Refactor Frontend

[GrahamSH-LLK]

Description

This PR completely removes Vuetify from the photon-client codebase in favor of a custom component set built with Tailwind CSS and Reka UI.

Summary of changes

1. Completely removed Vuetify. This lowers build times, allows much more flexibility, and shrinks CSS bundles a lot.
2. Implemented simpler Tailwind + Reka component library (src/components/common/). This allows for more modern, accessible and custom components that fit our theme better.
3. Generally tighten up UI styling. Tweak breakpoints so that the UI is more usable at small viewports.
4. Moved body font from Prompt to Lato- Prompt is a really terrible body text font and doesn't support tabular numbers which leads to layout shifting and jittering. Lato is what our brandards recommend for body text anyways
5. Improved tree shaking of various parts of the app (Migrating icons alone cut <30% of content loaded)
6. Upgraded minor outdated deps

Meta

Merge checklist:

• Pull Request title is short, imperative summary of proposed changes
• The description documents the what and why, including events that led to this PR
• If this PR changes behavior or adds a feature, user documentation is updated
• If this PR touches photon-serde, all messages have been regenerated and hashes have not changed unexpectedly
• If this PR touches configuration, this is backwards compatible with all settings going back to the previous seasons's last release (seasons end after champs ends)
• If this PR touches pipeline settings or anything related to data exchange, the frontend typing is updated
• If this PR addresses a bug, a regression test for it is added
• If this PR adds a dependency, the license has been checked for compatibility and steps taken to follow it

[thatcomputerguy0101]

We should probably have a fallback for CSS contrast-color since some environments (like the VSCode integrated browser) don't support it yet.

[mcm001]

This tab feels empty to me. I think it's the lack of vertical divider between the left sidebar and the main card area that's kinda messing me up. How would it look with that vertical divider?

[mcm001]

weird padding on the camera stream on the left side at 1080p 100% zoom 100% scale

[mcm001]

Camera stream overflowing

[mcm001]

Stream padding seems largely improved with 1ebedd6

[mcm001]

There's a lot of vertical padding here that at 1080p or 720p feels like wasted space. How do you feel about tightening this up?

[GrahamSH-LLK]

All of the padding comes from the input elements and is standardized across the app. I personally think dropping the padding by multiple of our spacing constant looks worse.

[thatcomputerguy0101]

We should probably have a fallback for CSS contrast-color since some environments (like the VSCode integrated browser) don't support it yet.

This alternative gives acceptable fallback results: oklch(from var(--name) round(1.21 - L) 0 0), (from https://css-tricks.com/approximating-contrast-color-with-other-css-features/)

[spacey-sooty]

I can't toggle the low latency mode switch with this on my laptop with its in built webcam whereas I can (and observe that it has an effect) on main

[samfreund]

I don't like how you can't tell whether an element is a button or not. There should be some sort of indicator of whether something is clickable, which is currently missing.

[GrahamSH-LLK]

I don't like how you can't tell whether an element is a button or not. There should be some sort of indicator of whether something is clickable, which is currently missing.

Could you give an example of something that isn't clearly clickable? Buttons in the app have relatively consistent styling but I'm not sure if there's a specific spot I'm missing

[samfreund]

I don't like how you can't tell whether an element is a button or not. There should be some sort of indicator of whether something is clickable, which is currently missing.

Could you give an example of something that isn't clearly clickable? Buttons in the app have relatively consistent styling but I'm not sure if there's a specific spot I'm missing

The big one for me was with raw/processed stream mode. If you've only got one on, you can't turn it off , but the button doesn't change to indicate that. Similar things with other buttons.

[GrahamSH-LLK]

I don't like how you can't tell whether an element is a button or not. There should be some sort of indicator of whether something is clickable, which is currently missing.

Could you give an example of something that isn't clearly clickable? Buttons in the app have relatively consistent styling but I'm not sure if there's a specific spot I'm missing

The big one for me was with raw/processed stream mode. If you've only got one on, you can't turn it off , but the button doesn't change to indicate that. Similar things with other buttons.

How about this

[samfreund]

I'm not a fan of having to import every individual icon, is there anything we can do to get around that?

[samfreund]

OD card could do with some TLC

[thatcomputerguy0101]

I'm not a fan of having to import every individual icon, is there anything we can do to get around that?

I don’t really like polluting the global namespace with a dynamic icon resolver. I’d lean towards either a dedicated namespace for the resolver, or just keeping the imports. Something that collects the imports on the same line wouldn’t be terrible either.

[mcm001]

Deleting and then activating a camera leads to a broken UI. To reproduce

• delete a vision module

- activate it again - swap to dashboard tab

[thatcomputerguy0101]

That might actually be a JSON and/or backend logic problem. While reworking code for #2511, I think some of the deletion logic I replaced lines up with that behavior.

[mcm001]

I wasn't able to reproduce on main :(

[samfreund]

Why so long?

[samfreund]

Where'd the default resolution go?

[samfreund]

In the first image, both buttons are enabled, second only delete button is enabled. To me, the enabled state of the delete button seems to be not quite vibrant enough, it looks disabled.

[samfreund]

Is there a particular reason text areas have a darker color? I'm not sure I'm a fan.

[samfreund]

For the rows (apriltags in settings, etc.) might be good to have slightly different alternating colors to make it more readable.

[samfreund]

Why is the targets list scrollable even tho it's emtpy?

[Gold856]

If you rapidly switch back and forth between the AprilTag and Input Tabs, you'll note the text for the controls are offset by different amounts. This is because toggles and sliders have a different content size, but the same amount of padding, and is something I compensated for in #1972.