style: Atom style enhanced #22
Open
Conversation
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
Restructure CSS files to prepare for the Atom Enhanced design system: - Remove hardcoded Inter font from base.css - Refactor main.css into a clean import center with modular loading order - Create 5 dedicated CSS files: - typography.css - Font system (Stage 1 placeholder) - effects.css - Visual effects (includes fade-bottom from messageList.css) - animations.css - Animation system (Stage 3 placeholder) - scrollbar.css - Scrollbar styles (consolidated from main.css and textarea.css) - utilities.css - Utility classes (Stage 4 placeholder) - Update component imports (MessageList.tsx, textarea.tsx) - Remove redundant files (messageList.css, textarea.css) This is Stage 0 of the Atom Enhanced design improvement plan, laying the foundation for typography, color, animation, and atmosphere enhancements.
…onts Implement Stage 1 of the Atom Enhanced design system - typography refresh: Typography System (typography.css): - Load Outfit font (display font) for bold, geometric headings - Load Plus Jakarta Sans (body font) for refined, readable text - Define comprehensive typography hierarchy (display, h1-h4, body, caption, small) - Create utility classes for font weights and letter spacing - Add responsive typography for mobile devices Component Updates: - NotebookList: Apply text-display to page title - NotebookCard: Apply text-h2 to card titles - Empty: Apply text-h2 to empty state titles - Settings pages: Apply text-h1/text-h2 to section headings - ProviderConfigPanel: text-h1 - AboutSettings: text-h1 - PromptsSettings: text-h2 This replaces the generic Inter font with a distinctive font pairing that establishes visual identity and brand recognition.
Implement Stage 2 of the Atom Enhanced design system - color enhancement: Visual Effects System (effects.css): - Define gradient system based on Atom colors (primary, accent, cool, warm) - Add background decoration system (grid, dots, noise textures) - Create colored shadows for depth and visual interest - Implement glass-effect utilities with backdrop-filter - Add glow effects and gradient borders Component Updates: - NotebookCard: Use CSS variable shadows for consistent styling - Button (default): Use bg-gradient-primary for vibrant primary buttons - Empty: Add bg-dots pattern for visual interest in empty states This brings the Atom color palette to life with rich gradients and depth through colored shadows, while keeping the UI clean and focused.
Implement Stage 3 of the Atom Enhanced design system - animations & micro-interactions: Animation System (animations.css): - Define easing curve variables (smooth, bounce, fluid) - Create keyframes: fadeInUp, fadeIn, slideIn, shimmer, pulse, scaleIn, spin - Build animation utility classes for common effects - Implement staggered animation delays for list items (up to 20 items) - Add smooth theme switching transitions - Include accessibility support (prefers-reduced-motion) - Create card hover lift, shimmer line, ripple effect, and skeleton loaders Component Updates: - NotebookList: Add stagger-item to cards for cascading fade-in animation on page load This brings the interface to life with delightful animations that enhance user experience without overwhelming, respecting user accessibility preferences.
Major improvements: - Replace all confirm() calls with React Dialog components for consistent UX - Add UnsavedChangesDialog, DeleteNoteConfirmDialog, and ConfirmDialog components - Update NotePanel, NoteList, ItemList, and DocumentList to use new Dialogs - Fix ScrollBar hardcoded colors, use CSS variables for theme switching - Standardize Dialog widths for RenameDialog and AddProviderDialog - Add missing i18n translations
Implemented a complete keyboard shortcuts system to boost productivity with customizable application shortcuts.
Key Features:
- Created ShortcutManager service and IPC handlers for main process
- Implemented shortcut state management with Zustand store and executor hook
- Developed shortcut settings UI with recording, conflict detection, and enable/disable
- Added 5 core shortcuts: create/close notebook, toggle panels, send message
- Integrated shortcuts across notebook, panel, and chat components
- Replaced native confirm dialogs with custom React Dialog components
- Full internationalization support for English and Chinese
Technical Details:
- Uses webContents.on('before-input-event') for keyboard event listening
- Main-renderer communication via IPC and CustomEvent
- Persistent storage with electron-store
- Cleaned up all debug logs for console clarity
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
No description provided.