UI refresh: dark mode, mockup alignment and in-app tabs#20
Merged
Conversation
FaviconManager still used the Vuex API (this.$store.state...) after the Pinia migration, so this.$store was undefined and the thrown error broke the entire main-app mount. Switch it to useExecutionsStore(). This is the only remaining Vuex reference in the codebase. UI refresh (increment 1): - Replace the rainbow image banner behind the script header with a clean surface (--script-header-background -> background color). - Execute/Stop buttons: drop the full-width flex stretch; compact, left-aligned with a gap, schedule button pushed right. - Welcome panel: clearer type hierarchy and constrained logo. - Sidebar: remove the underline on the server-name link. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add a light/dark theme toggle to the main app, echoing the mockup palette (teal accent preserved on dark surfaces). - vuetifyPlugin: new scriptServerDark Vuetify theme. - shared.css: dark overrides for the custom CSS variables, toggled by a `theme-dark` class on <html>. - common/utils/theme.js: keeps the html class and Vuetify theme in sync, persists the choice in localStorage, falls back to prefers-color-scheme. - ThemeToggle component in the sidebar header. Verified in the browser: light/dark render, toggle, and persistence all work. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Inject the Vuetify theme into common/utils/theme.js via registerVuetifyTheme() instead of importing it statically, so the Vuetify-less login page can reuse the same preference logic without bundling Vuetify (login chunk stays ~3 kB). - admin: registers the theme, calls initTheme(), adds a white ThemeToggle to the header (ThemeToggle now takes a `color` prop). - login: applies the persisted/OS-preferred theme on load and adds a small floating emoji toggle (no Material Icons font on this page). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
light_mode/dark_mode are absent from the legacy material-design-icons font, so the toggle rendered the literal ligature text instead of an icon. Swap to brightness_7 (sun) / brightness_2 (moon), which are present in the font. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sidebar: - two-row header: server badge + title, then a persistent full-width search field underneath (replaces the collapsible search icon) - folder grouping restyled as uppercase section labels with a folder icon - leading chevron icon per script; active item highlighted in the teal accent Execution view: - play_arrow icon on the Execute button - log output restyled as a GitHub-dark console with an "Output" header bar Typography: introduce --font-sans / --font-mono (modern system stack) applied app-wide; the terminal uses the mono stack. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Drop the leading chevron icon, and render script names smaller (0.82rem) with the system sans stack for a lighter, cleaner list under each folder group. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add a persistent tab bar so several scripts can be kept open and switched between without leaving the app. - scriptTabs store: tracks open tabs (persisted to localStorage) and snapshots each tab's parameter form values - ScriptTabs component: tab bar above the content, with per-tab close; closing the active tab activates the neighbour - index.js: open a tab on navigation, snapshot the leaving tab's values, and restore the entered tab's values via the existing reloadModel path (consumeValues is one-shot to avoid looping on the parameter echo) Concurrent executions already persist per script (executions.executors map), so switching tabs keeps running scripts and their output intact. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Also gitignore the local .claude/ tooling directory (machine-local settings and dev launch configs). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Codecov Report❌ Patch coverage is 📢 Thoughts on this report? Let us know! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
A visual refresh of the main app plus two new capabilities: a dark theme and in-app tabs for keeping several scripts open at once. Also fixes a production-breaking bug found along the way.
Changes
Critical fix
FaviconManagerstill used Vuex (this.$store.state.executions…) after the Pinia migration, which threw on mount and left the whole main app blank. Switched touseExecutionsStore().Dark mode
localStorage, otherwise follows the OSprefers-color-scheme.registerVuetifyTheme()so the Vuetify-less login page reuses the same preference without bundling Vuetify (login chunk stays ~3 kB).brightness_2/brightness_7—light_mode/dark_modedon't exist in the bundled legacymaterial-design-iconsfont (they rendered as literal text).Main-app refresh (aligned with the proposed mockup)
--font-sans/--font-mono).In-app tabs
reloadModelpath;consumeValuesis one-shot to avoid looping on the parameter echo).executions.executorsmap). Open tabs persisted tolocalStorage.Testing
npm run test:unit-ci— 984 passed (incl. +16 for the newscriptTabsstore;MainAppSidebartest updated for the new markup).🤖 Generated with Claude Code