Skip to content

POC of a Vue.js-based frontend rewrite (served alongside existing Flutter UI)#519

Draft
Vultaire wants to merge 25 commits intomainfrom
vultaire/vue-frontend-poc
Draft

POC of a Vue.js-based frontend rewrite (served alongside existing Flutter UI)#519
Vultaire wants to merge 25 commits intomainfrom
vultaire/vue-frontend-poc

Conversation

@Vultaire
Copy link

NOTE: This is not ready for review! This is a largely vibe-coded POC; the code needs to be properly reviewed and cleaned up before it's ready to be merged, even in its current incomplete form.

Description

This PR (building upon #518) reimplements much of the Flutter UI using Vue.js.

It captures much of the existing UI's functionality for browsing and searching for test runs and issues.

Notable gaps are:

  • Issue creation and test attachment rules
  • "Reported issues"
  • Rerun buttons and other "action" buttons
  • Filters don't fully work the same way as the Flutter UI; some changes are intentional, and some details are deltas that still need to be worked through to resolve.
  • Styling has changed and was largely auto-generated by the LLM; if we want to move forward with this beyond as a POC, we will probably want to make modifications to make it more in line with the Flutter version.

It can be test-driven by running e.g. podman compose up and connecting to http://localhost/30001/vue_poc/. Note that the trailing / must be there or else it will navigate to the Flutter UI.

This addresses the following concerns:

  • Multiple concerns related to the Flutter app rendering as HTML canvas rather than DOM, such as the lack of normal right-clickable hyperlinks.
  • Limited developer familiarity with Flutter, instead leveraging the more widely known JavaScript - albeit in this case with a specific JS framework, Vue.js, which does admittedly have its own learning curve but at least remains in the JavaScript space.
  • Relatively slow build and rebuild times for Flutter in comparison to JavaScript.

Resolved issues

Documentation

At present this is purely a POC, although a fairly highly functional one. It does not interfere with the existing UI and its existance is not yet widely communicated.

Again, for those that want to test drive the UI, just run podman compose up to build and spin up the containers locally and then connect to http://localhost/30001/vue_poc/. This is not a concern for normal users of Test Observer and thus I don't think this is a detail that belongs in the main documentation at this time.

Web service API changes

No API changes.

Tests

@Vultaire
Copy link
Author

This is in draft state, blocking on:

Copy link
Author

@Vultaire Vultaire left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Initial self-review completed.

const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
// Use UTC to match Flutter behavior which uses the date components directly
return `${monthNames[date.getUTCMonth()]} ${date.getUTCDate()}`
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I "trusted" the LLM with this change when I noted a rendering time delta, but I want to review the Flutter sources here and verify that this is appropriate.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The JSON simply has a simple string, e.g. "2026-01-12", for due_date values. Loading to a new Date() works, but it shows the date in local time which, for me, ends up being off-by-one. Using the UTC functions does seem like the right way to handle this.

> date = new Date("2026-01-12")
Date Sun Jan 11 2026 16:00:00 GMT-0800 (Pacific Standard Time)
> date.getDate()
11
> date.getUTCDate()
12

@Vultaire Vultaire force-pushed the vultaire/vue-frontend-poc branch from 01ebc4d to dd0a9d5 Compare January 13, 2026 15:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants