- Add rightAction snippet prop to QuickInputBar (InputBar.svelte)
- Move toggle from leftAction to rightAction (renders after submit button)
- Increase toggle size from 28px to 36px for better tap target
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace 4 independent position:fixed elements with one flex container that
stacks them naturally from bottom to top. Elements push each other
automatically — no more hardcoded offsets or z-index conflicts.
Stack order (bottom → top):
1. PillNavigation (collapsible)
2. TagStrip (togglable)
3. QuickInputBar + toggle button row
Shared-UI changes:
- PillNavigation: add positioning='fixed'|'static' prop
- QuickInputBar: add positioning='fixed'|'static' prop
- TagStrip: add positioning='fixed'|'static' prop
- All default to 'fixed' for backward compatibility
Layout changes:
- Wrap all bottom elements in .bottom-stack (position:fixed, flex-column)
- Remove hardcoded bottomOffset calculations
- Toggle button is now inline next to QuickInputBar (not separately positioned)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Migrate 41 inline SVG icons to Phosphor components across 21 shared-ui
files including CommandBar, InputBar, Sidebar, AudioPlayer, PageHeader,
Select, TagBadge, SettingsRow, and more.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1. Extract hardcoded German highlight patterns into locale-specific sets
(de, en, fr, it, es). InputBar accepts `locale` or custom
`highlightPatterns` prop, defaulting to German for backward compat.
2. Add visual success feedback after creating: input bar flashes green
with a checkmark icon for 1.2s, confirming the action was successful.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Instead of auto-searching on every keystroke (causing flickering loader),
show two static options: "create task" and "search". Search only runs
when explicitly selected, reducing API calls and improving UX.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Remove "Meine Aufgaben" header (sections are self-explanatory)
- Add enhanced empty state with animated sparkle icon, motivational
message, and clickable syntax examples that insert into input bar
- Implement smart section visibility (only show sections with tasks,
but always show "Today" as primary workspace)
- Add onboarding tip for users with 1-3 tasks showing #tags and
!priority syntax
- Add quick-input-set event listener to InputBar for example clicks
- Add InputBarContextMenu with settings toggles (syntax highlighting, auto-focus)
- Add InputBarHelpModal for keyboard shortcuts and syntax help
- Add inputBarSettings store with localStorage persistence
- Add recentInputHistory store for tracking used tags/references
- Integrate context menu in calendar app with default calendar selection
- Right-click on InputBar opens settings menu
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Export FilterDropdown and FilterDropdownOption from molecules
- Add hasFabLeft prop to InputBar for left-side FAB spacing
- Minor ThemePage formatting fix
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- InputBar: use --color-primary, --color-surface, --color-border for
focus ring, backgrounds, and syntax highlighting
- PillToolbarButton: active state uses --color-primary
- PillViewSwitcher: sliding indicator and active text use theme colors
- PillTimeRangeSelector: all glass effects and active states themed
- CalendarToolbar: FAB active state uses theme colors
- CalendarToolbarContent: removed hardcoded primaryColor prop
- DateStrip: replaced all #3b82f6 with theme variables
All UI components now automatically adapt to the selected theme
(Ocean, Sunset, Forest, etc.)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add hasFabRight prop to InputBar for mobile FAB spacing
- InputBar leaves space for FAB on screens under 900px
- Change active FAB style to subtle muted colors instead of bright blue
- Support dark mode for active FAB state
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add layout control icons (sidebar/bottom-bar) for better UX
- Position FABs on right side for consistent minimization direction
- Fix app switcher dropdown direction (opens up when nav at bottom)
- Add isToolbarCollapsed store for toolbar state management
- Create CalendarToolbarContent component for reusable toolbar elements
- Improve sidebar toolbar integration with proper vertical layout
- Hide PillViewSwitcher sliding indicator in vertical mode
- Add scrollbar to sidebar toolbar content
- Ensure all toolbar buttons are full-width and left-aligned in sidebar
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add portal action to move overlay to body, escaping parent stacking contexts
- Set z-index: 99999 via inline style to ensure overlay appears above all UI elements
- Remove z-index: 0 from main-content that was creating a stacking context
- Overlay now correctly displays above DateStrip, Toolbar, and InputBar
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Rename QuickInputBar.svelte to InputBar.svelte (simpler name)
- Remove quickActions prop (moved to toolbar components)
- Add onSearchChange callback for real-time search updates
- Export both InputBar and QuickInputBar (alias) for backwards compatibility
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-12 11:58:13 +01:00
Renamed from packages/shared-ui/src/quick-input/QuickInputBar.svelte (Browse further)
