UI experimental redesign

[matejstastny]

Why did I do this?

I'm on the drivebase team, and recently we moved to hardware testing. There has been a bunch of things bugging me with mission control, so I decided to fix them for a better drivebase testing expirience. Mainly it was the frontend, websocket config, and controller config. Now I understand as somebody who hasn't talked to the team I do not know what is being done and what are the plans, but the repo and team seemed pretty inactive to me.

---

What I Changed

Visual Redesign (global.scss, Navbar.vue, all pages)

• Implemented theming so it complies with the Trickfire styleguide:
  • --tf-green: #00fe00 as the primary accent
  • --eerie-black, --app-background, --component-background surface hierarchy
  • Dropped Inter in favor of Barlow Condensed (headings) + Overpass (body)
• Navbar completely rebuilt: rounded pill chip tabs, solid green active state, cleaner status indicators, rover host shown in the status bar

New Controller Page (src/pages/Controller.vue, ControllerConfig.vue, ControllerMonitor.vue)

• Added a dedicated /Controller tan
• Keybind preview and live controller input preview with controller name
• Added a toggle to disable horizontal input of the controller, because the robot container log is full of unhandeled input errors from it, making it really hard to catch useful things

Home Dashboard (src/pages/Home.vue)

• Replaced unmarked placeholder boxes with labeled sections (Front Camera, Drive Motors, Battery & Systems, Map Preview) I guessed these tabs, but they were kinda suggested in the comment on top, and I did not like that I do not see whats supposed to be there
• Embedded ConnectionSettings directly on the dashboard so you don't have to navigate away to reconnect, something we did a lot. We do not do it as much now, because I made the settings be persistent (this was my biggest pain point of the whole thing)
• There is also a reconnect button. I know it connects on it's own, but did not happen until I refreshed the page for me. This works better for me

Code hygiene

• Fixed deprecated TypeScript config options (tsconfig.json, tsconfig.node.json)
• Reworked the Prettier/ESLint formatting workflow
• Added VSCode format-on-save
• Updated packages to reduce security vulnerabilities, from 26 with 10 high to only 2 moderate that I cannot fix (from a dep not from our packages)

---

What I Broke / What This Affects

I did this analysis after I implemented all of this and want to be fully transparent. Here's what conflicts with active work on other branches:

Bigger

Branch	Problem
EmissionGraph	Built a CO2 emissions graph into Science.vue. My branch replaced Science.vue with a "Not Implemented" placeholder — their work does not exist in my version.
adding-navbar-arrows	Added left/right arrow icons to the navbar for tab navigation. My navbar is a complete rewrite and their feature is gone.
dev-tab	Uses the old CSS variable names with old values. My global.scss changed the meaning of several variables (--grey, --purple, --white, etc.) so any component from that branch will look wrong on mine.

Medium

Branch	Problem
controllerrefactoring + rover-unveiling	These branches built a new input abstraction layer (src/lib/input/), refactored controllerState.ts, gamepad.ts, and touched Home.vue, Telemetry.vue, Map.vue, Navbar.vue, and main.ts. I also touch controllerState.ts and built a parallel Controller UI. Two independent controller systems exist now.
OccupancyGraph	Touches ConnectionSettings.vue, settingsStore.ts, Home.vue, and Map.vue — all files I heavily modified. Their settingsStore is the old simple version and would conflict with my ControllerConfig additions.
compass-component	Added a CompassComponent into Map.vue. My Map.vue is clean; their compass would need to be re-applied.
teja-dasari/map-development	Added GPS pin support to InteractiveMap.vue (component I don't touch — low risk, but their Map.vue wrapper changes conflict).

Not affected stale (is there a reason they are not deleted?) or mergeble

kyler/3d-arm, adam/new-codebase-camera, camera-use-subscriber, teja-dasari/map-development (InteractiveMap.vue itself), Alan-angle-display, ArmComponentAxisFix, alant-arm-movement, adamc/I-Love-UWB

---

So what now?

I would like to talk about this with somebody, but I understand if this gets closed right away. Here are some options that appear for me:

Option A: Merge active conflicting branches to main first, then revisit this. I am going to fix anything that would break.

Option B: Merge this into main after review, I help other branches adapt

After the team reviews and approves the redesign direction, merge this into main. I will then go branch by branch and help integrate their components into the new theme & structure.

Option C Close this PR or cherry-pick only the non-breaking parts

Keep main as-is. I understand I went to this without permission without talking with other people about it. It was driving me a little crazy, and there is a lot a person with Claude and a little webdev knowledge can do. Or you can cherry-pick only the parts that don't break anything (tooling fixes, TypeScript config cleanup, package updates) and I rebuild the Controller page on top of the current main. The visual redesign gets scoped down or done in a more coordinated way.

---

Some other notes

• The default websocket address changed from ws://192.168.0.146:9090 to ws://192.168.0.145:9090 that's the IP of the Orin. Any reason it was something different? Is it the IP of the other Orin? Or just not updated?
• The settingsStore deep-merge means old saved settings in localStorage will not break — new keys just get their defaults.
• I am fully willing to do the integration work across other branches. I'm not dropping this on the team and walking away! I would hate to do that.

[matejstastny]

Some other notes and issues I found, but I do not want to touch more that I need:

• All the motor references still use moteus in their name, we use rmdx8 as motors now
• The arm modes is outdated

Also I do not know if I left some docs not updated, but honestly I would first want to know if there is even a chance this could be a thing before I start changing docs. Also thank you so much for anybody willing to look at this! 💫