Migrate from Svelte 5 to Vue 3 with Office Space theme#7
Merged
Conversation
- Replace all Svelte components with Vue 3 equivalents - Implement Office Space-inspired design system: - TPS report styling with greenbar paper background - Vintage UI elements (stamps, post-it notes, flair badges) - CRT monitor aesthetics for voice input - 1990s corporate office color palette - Update dependencies: remove Svelte, add Vue 3 - Migrate state management from Svelte stores to Vue reactive refs - Refactor component architecture while preserving functionality: - Header → TPSHeader (with Lumbergh quote) - Output → OutputPanel (TPS report format) - Settings → SettingsPanel - VoiceInput/TextInput (CRT and paper form styling) - Add new components: PostItNote, FlairBadge - Expand CSS with vintage design system (dot matrix fonts, perforation edges) - Update Vite config for Vue 3 support - Remove Svelte-specific config files
- Add component imports to App.vue (TPSHeader, PostItNote, VoiceInput, TextInput, SettingsPanel, OutputPanel) - Add FlairBadge import to TPSHeader.vue - Add missing state imports to VoiceInput.vue (inputMode, voiceStatus, liveTranscript) - Add missing state imports to TextInput.vue (inputMode, isProcessing) - Add missing state imports to OutputPanel.vue (transformedPlain, transformedEmail, changes) - Add missing state import to SettingsPanel.vue (apiKey) Resolves all Vue warnings about failed component resolution.
- Replace emoji stapler with custom SVG in TPSHeader - Update branding from 'CORPORATE COMMUNICATIONS COMPLIANCE' to 'LANGUAGE COMPLIANCE SYSTEM' - Change trademark symbol from ™ to ® - Remove flair strip from header, add scattered flair pins around main content - Transform TextInput, VoiceInput, and OutputPanel to yellow post-it note styling - Redesign SettingsPanel with interactive AI flair badge toggle (starburst design) - Update color scheme to match post-it note aesthetic (yellow gradients, brown text) - Add post-it note visual effects (shadows, curl corners, slight rotations) - Enhance button styling with 3D effects and better visual feedback - Improve overall Office Space movie aesthetic throughout the UI
- Introduce ProcessingBadge component in App.vue for AI processing indication - Enhance flair badge hover effect by removing unnecessary transition styles - Update starburst design in SettingsPanel for improved visual clarity
- Replace button-based input mode selection in VoiceInput and TextInput with a tab-switcher for improved UX - Update App.vue to pass mode-switching events to VoiceInput and TextInput components - Remove unnecessary styles and elements related to previous button layout - Enhance ProcessingBadge with a new design and animations for better visual feedback
…photo - Remove starburst SVG background and replace it with a circular image of Bill Lumbergh - Update styles for flair-circle and lumbergh-photo for improved visual effects - Adjust flair-content positioning and flair-status styles for better alignment and readability - Enhance responsiveness of the AI flair toggle component
- Remove FlairBadge from App.vue for a cleaner layout - Eliminate unused pin-backing styles from SettingsPanel.vue - Update TextInput and VoiceInput components to use an image icon instead of an emoji for mode selection - Introduce a new stapler image asset for branding consistency in TPSHeader.vue - Adjust styles for improved alignment and visual appeal across components
- Add .oxlintrc.json with TypeScript, Unicorn, and ESLint rules - Update lint:fix script to run both Biome and Oxlint with auto-fix - Apply automatic fixes: toSorted(), error cause, unused imports - Suppress non-critical warnings (function scoping, event listeners, await in loop)
- Update function names in various components to remove leading underscores for clarity - Modify linter configuration to disable unused variable warnings - Enhance biome.json with additional linter rules for better code quality - Adjust OutputPanel to handle changes more robustly - Clean up computed properties in FlairBadge, TPSHeader, and other components
Deploying worksafe with
|
| Latest commit: |
1f9e383
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d1d6dd54.worksafe.pages.dev |
| Branch Preview URL: | https://office-space-vue.worksafe.pages.dev |
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
1 participant
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.
What
Replaced Svelte 5 with Vue 3 and redesigned the UI with an Office Space theme. All components now use Vue's composition API with post-it note styling, flair badges, and Lumbergh imagery.
Key changes:
App,TextInput,VoiceInput,OutputPanel,SettingsPanel,TPSHeader) in Vueref/reactiveProcessingBadge,FlairBadge, andPostItNotecomponents for themed UI elementsWhy
Standardize on Vue 3 for better ecosystem support and create a more distinctive UI that matches the corporate satire tone of the passive-aggressive content rewriter. The Office Space theme reinforces the app's purpose of translating workplace communication.
Testing
bun buildtsc --noEmitBreaking Changes
None - this is a UI framework migration that doesn't affect the core rewriting logic or API.