CommandBar was a near-duplicate of QuickInputBar's InputBar with the UX
of a Cmd+K modal. Only arcade still used it. Migrate arcade onto the
existing GlobalSpotlight (hosted by PillNavigation) so there is a single
Cmd+K modal across all mana apps, then remove CommandBar entirely.
Arcade changes (games/arcade/apps/web/src/routes/(app)/+layout.svelte):
- Merge commandBarQuickActions into spotlightActions (nav-level items)
- Convert handleCommandBarSearch into a ContentSearcher that returns the
game list grouped under a single 'Spiele' category
- Drop the standalone Cmd+K handler; PillNavigation + GlobalSpotlight
handle the shortcut
- Remove the <CommandBar> render; add `contentSearcher` +
spotlightPlaceholder to <PillNavigation>
shared-ui cleanup:
- Delete packages/shared-ui/src/command-bar/ (CommandBar.svelte,
CommandBar.types.ts, index.ts)
- Drop CommandBar / CommandBarItem from the public @mana/shared-ui export
- Delete docs/central-services/COMMAND-BAR.md (stale)
No more duplication: highlight + debounce live in search-core, and the
only remaining Cmd+K surface is GlobalSpotlight.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Both QuickInputBar (InputBar.svelte), CommandBar.svelte, and GlobalSpotlight
were duplicating syntax highlighting and the 150ms search debounce. Pull
these into a new `packages/shared-ui/src/search-core/` module so the two
input surfaces stay in sync on feel and matching rules.
- search-core/highlight.ts — HighlightPattern type, locale-aware
getHighlightPatterns(), and the shared highlightText() (HTML-escape +
span wrap). Patterns were previously in quick-input/highlightPatterns.ts
+ inline in CommandBar.svelte.
- search-core/config.ts — SEARCH_DEBOUNCE_MS = 150. Used from InputBar,
CommandBar, GlobalSpotlight, and apps/mana web SearchEngine.
- quick-input/highlightPatterns.ts + types.ts become thin back-compat
re-exports.
- Public surface: @mana/shared-ui now exports getHighlightPatterns,
highlightText, SEARCH_DEBOUNCE_MS, and the HighlightPattern type.
No UX change. UIs still live in their own files (per earlier split
recommendation: shared backend, separate surfaces).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
PillNav overhaul:
- Dropdown-as-bar: theme/AI/sync/user menus render as horizontal
bars in the bottom stack (PillDropdownBar) instead of floating
popovers. New onOpenBar/activeBarId props on PillNavigation.
- iconOnly pills: tags/search/workbench-tabs pills show only icons.
Home pill removed. New iconOnly flag on PillNavItem.
- Segmented toggle groups: items sharing a `group` id render as a
single segmented pill (e.g. Light/Dark/System triple).
- Fullscreen mode: press "f" to hide all bottom chrome, Esc to exit.
- QuickInputBar + bottom bar visibility toggles via new pills.
- Progress ring on AI trigger pill during model download
(conic-gradient ::after, follows pill border-radius).
@mana/local-stt — new package for browser-local speech-to-text:
- Whisper models via transformers.js v4 (WebGPU + WASM fallback)
- Same Web Worker architecture as @mana/local-llm
- Two models: Whisper Tiny (150 MB) and Whisper Small (950 MB)
- Reactive Svelte 5 bindings (getLocalSttStatus, loadLocalStt, transcribe)
Voice-to-text integration:
- useLocalStt() composable: mic capture via AudioContext +
ScriptProcessor, resample to 16kHz mono, feed into Whisper worker
- Mic button in QuickInputBar (leftAction slot) with
recording/loading/transcribing states + pulse animation
- Transcribed text injected into InputBar via new injectedText prop
- STT model selector in AI bar alongside LLM tier controls
Also: vite.config.ts server.fs.allow expanded to monorepo root
so workspace package workers resolve in dev.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Five unrelated packages each had a few imports pointing at the wrong
file or missing from their public surface. Grouped because none of
the individual fixes warrants its own commit and they all unblock
the same downstream consumer (apps/mana/apps/web type-check).
packages/help
- HelpPage.svelte: `'../types.js'` and `'./content'` for
HelpPageProps/HelpSection/SearchResult — neither path exists.
Real homes are `../ui-types` (props) and `../search-types`
(search shapes). Fix the imports.
- HelpSearch.svelte: same `'../content'` typo for SearchResult →
`'../search-types'`.
- translations.ts: `'./types.js'` for HelpPageTranslations →
`'./ui-types'`.
- ui-types.ts: was importing SearchResult from `'./content'` but
that module only exports content shapes. Split into two imports
so HelpContent stays from content.ts and SearchResult comes from
search-types.ts.
packages/feedback
- FeedbackPage.svelte: imported `Feedback` and `CreateFeedbackInput`
from `'./createFeedbackService'` but the service module only
exports the service factory. Real homes are `'./feedback'`
(Feedback) and `'./api'` (CreateFeedbackInput).
- FeedbackForm.svelte: same `'./feedback'` typo for
CreateFeedbackInput → `'./api'`.
packages/subscriptions
- UsageCard / CostCard / pages/SubscriptionPage: all imported
UsageData / CostItem from `'./plans'` but those types live in
`'./usage'`. SubscriptionPage additionally had a relative-path
bug — it's at `src/pages/`, not `src/`, so `./plans` resolved
to `pages/plans` (nonexistent). Now imports `'../plans'` for
plan types and `'../usage'` for usage/cost types.
packages/shared-ui
- index.ts: re-exports the QuickInputItem family from
`./quick-input` but had forgotten `HighlightPattern`. Added.
Apps that build their own InputBar pattern config (e.g.
mana/web/src/lib/quick-input/types.ts) need it as a public type.
- PillNavigation.svelte: imported `SpotlightAction` and
`ContentSearcher` from `./GlobalSpotlight.svelte` (a Svelte
component file), which only re-exports the default. Both types
live in `./types`. Move them to the existing types-import
block; the GlobalSpotlight import becomes a plain default.
packages/shared-auth-ui
- stores/createAuthStore.svelte.ts: imported AuthServiceAdapter /
AuthResult / BaseUser from `'./types'` (nonexistent — the file
is `'./store-types'`).
Net: -23 type errors. Zero behavior change.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Every workbench-style module ListView reimplemented the same
liveQuery + filter + scroll-area + empty-state shell. Extract a
shared <BaseListView> in @mana/shared-ui (with toolbar/header/
listHeader/item/empty snippets) and migrate the 17 modules whose
list templates fit the workbench tailwind track.
While here:
- migrate DeckCard onto the existing (previously unused) shared
Card atom from shared-ui/atoms.
- fix a latent type bug in times/ListView: it was reading .date /
.startTime / .isRunning off LocalTimeEntry, which doesn't define
them. Now uses the proper joined TimeEntry via toTimeEntry() like
the rest of the times module.
Modules with their own scoped-CSS layout track (calendar, finance,
contacts, notes, places, todo, photos, habits, automations, dreams,
cycles) and outliers (calc, events, playground, zitare) are left
alone — migrating them would be a visual rewrite, not a structural
shell swap.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add shared TagField component (ID-based wrapper for TagSelector).
Wire TagField into: calendar EventForm, times EntryForm, cards
CreateDeckModal, contacts detail page. Wire FavoriteButton into
contacts list (replaces inline Star toggle). Add ColorPicker to
cards CreateDeckModal for deck color selection.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Extract TagColorPicker logic into generic ColorPicker that accepts custom
color palettes. TagColorPicker is now a thin wrapper. Add COLORS_12 and
COLORS_16 standard palettes for consistent color selection across all
modules (projects, folders, calendars, categories, etc.). 10 new tests.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
FavoriteButton: reusable heart/star/pin toggle with filled/outline states,
accessible labels, configurable colors. toggleField: generic boolean field
toggle for Dexie records (isFavorite, isPinned, etc.) with timestamp.
Includes 11 tests (6 FavoriteButton + 5 toggleField).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add compact inline TagChip for list items/cards (smaller than TagBadge).
Set up vitest with jsdom for shared-ui package and add 44 tests covering
TagChip, TagBadge, TagColorPicker, TagSelector, and constants.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add ContentSearcher interface, debounced cross-app search with AbortController,
loading indicators, and content result rendering to the spotlight component.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add NotificationBar shared component for in-stack notifications
- Add BottomNotification type and top snippet slot to BottomStack
- Add bottomOffset prop to PillNavigationProps for flexible positioning
- Remove pillNavCollapsed from todo settings (PillNav now always visible,
toggled by layout FAB that hides all bottom bars)
- Replace floating GuestRegistrationNudge with integrated NotificationBar
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Implement a two-layer DnD system in @manacore/shared-ui/dnd that coexists
with svelte-dnd-action (same-type reordering):
- Layer 1 (Pointer Events): dragSource + dropTarget actions for cross-type
drags (e.g. Tag → Task). Mobile-first with long-press (300ms) and haptic
feedback.
- Layer 2 (Passive Overlay): passiveDropZone action detects when
svelte-dnd-action drags hover over external targets (e.g. Task → Tag pill,
Task → Trash zone).
- DragPreview: floating pill that follows the finger/cursor during Layer 1
drags.
- ActionZone: auto-appearing drop zones (trash, archive) during any drag.
Integrate into Todo app:
- TagStrip pills: draggable (dragSource) + accept tasks (passiveDropZone)
- TaskList items: accept tags (dropTarget) + register drags for passive layer
- ViewColumn + FokusLayout: register svelte-dnd-action drags for passive layer
- Layout: DragPreview + ActionZone (trash) added, tasks enriched with resolved
label objects from shared tags so tag badges actually render on TaskItem.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Create reusable Svelte action for focus trapping in modals/dialogs.
Traps Tab/Shift+Tab within element and restores focus on destroy.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove hand-written sw.js, offline.html, and manifest.json from todo/skilltree/zitare web apps
in favor of the Workbox-based service worker generated by @vite-pwa/sveltekit. This fixes an
issue where the custom SW could get stuck serving the offline fallback page even when the server
was reachable. Also extracts the duplicated offline page (~80 lines each across 19 apps) into a
shared OfflinePage component in @manacore/shared-ui with 3 props (appName, offlineMessage,
accentColor), reducing each app's offline route to an 8-line wrapper.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- shared-vite-config: getBuildDefines() injects __BUILD_HASH__ and
__BUILD_TIME__ as compile-time constants via Vite define
- shared-ui: DevBuildBadge component shows git hash + build timestamp
in a small fixed badge at bottom-right (click to expand)
- Integrated into mukke-web for deployment verification
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add PillTagSelector component for tag selection in navigation
- Remove separate TagStrip bar (saves 70px vertical space)
- Add tag-selector support to PillNavigation element rendering
- Remove hasTagStrip prop from DateStrip/DateStripFab components
- Export PillTagSelector and types from shared-ui
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This utility function was used by contacts-web skeletons but wasn't
exported from the main shared-ui package entry point.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Extract setupGlobalErrorHandler() utility from contacts app and add to
@manacore/shared-ui. Migrate 7 apps to use the shared implementation:
calendar, chat, clock, contacts, matrix, picture, storage.
Features:
- Catches unhandled promise rejections with error classification
- Handles offline/online network status changes
- Built-in i18n (DE + EN) with customizable translations
- Optional onAuthError callback for redirect handling
- Returns cleanup function for proper unmounting
- Move ImmersiveModeToggle component from Calendar to shared-ui package
- Add immersiveModeEnabled setting to Contacts and Todo settings stores
- Update all three app layouts with F-key shortcut and conditional UI rendering
- Consistent glass-pill styling on hover for toggle button
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Combine separate Kalender and Aufgaben pills into single tab group
- Add prependElements prop to PillNavigation for tab groups at start
- Clicking Aufgaben tab toggles todo sidebar instead of navigating
- Remove separate /tasks route (no longer needed)
- Implement 50/50 splitscreen layout on mobile (calendar top, todos bottom)
- Add proper flex container hierarchy for mobile layout
- Make TodoSidebarSection fill container on mobile with clean edges
- Add calendar and check-square icons to PillTabGroup
- Export PillTabGroupConfig type from shared-ui
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create new help module with HelpModal, KeyboardShortcutsPanel, and SyntaxHelpPanel components
- Add common shortcuts and syntax constants for reusability
- Refactor InputBarHelpModal to use new HelpModal component
- Fix ContextMenu event handling with stopPropagation and pointer-events
- Fix Modal z-index for proper stacking context
- Add CalendarHeaderContextMenu import to WeekView
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 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>
- Add new ConfirmationPopover wrapper component in shared-ui
- Uses portal pattern to escape overflow constraints
- Supports danger/warning/info variants with appropriate styling
- Uses elevation-3 for proper layering above overlays
- Integrate in QuickEventOverlay for delete confirmation
- Fix parseISO bug in QuickEventOverlay (was not imported)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Added overflow-x: auto with hidden scrollbar
- Max-width constraint to prevent overflow
- Smooth touch scrolling for mobile devices
🤖 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>
- Add QuickInputBar component with natural language parsing, syntax
highlighting, search, and quick-create functionality
- Add PillToolbar, PillToolbarButton, PillToolbarDivider components
for app-specific toolbar controls
- Add PillTimeRangeSelector for hour range selection
- Add PillViewSwitcher for view mode switching with sliding indicator
- Integrate QuickInputBar into Calendar, Contacts, and Todo apps
- Add app-specific toolbars: CalendarToolbar, ContactsToolbar, TodoToolbar
- Add DateStrip component for Calendar date navigation
- Fix type exports: export QuickAction and CreatePreview from quick-input
module, remove duplicate exports from deprecated command-bar
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add ContactSelector, ContactBadge, ContactAvatar to shared-ui
- Add ContactsClient API service to shared-auth
- Add ContactReference, ContactSummary types to shared-types
- Todo: Add assignee and involvedContacts to tasks with UI in TaskEditModal
- Todo: Display contacts in TaskItem and KanbanTaskCard
- Calendar: Add AttendeeSelector with RSVP status support
- Calendar: Integrate attendees in EventForm
- Calendar: Add task drag-drop to calendar views (Day/Week/MultiDay)
- Contacts: Add ContactTasks component to show related tasks
- Backend: Add findByContact endpoint to Todo task service
- UI polish: glassmorphism styling, keyboard navigation, auto-focus
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add natural language parser for task input (date, time, priority, project, labels)
- Extend CommandBar with onCreate/onParseCreate callbacks
- Show create preview with parsed attributes as first option
- Support Cmd/Ctrl+Enter to create directly
- Fix service worker to not intercept Vite dev server requests
- Update deprecated apple-mobile-web-app-capable meta tag
Example: "Meeting morgen 14 Uhr !hoch @Arbeit #wichtig"
→ Creates task with due date, time, priority, project and label
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add AppsPage component to shared-ui for displaying all Mana apps
- Add allAppsHref prop to PillNavigation with "Alle Apps" link in dropdown
- Integrate PillNavigation in archived apps (maerchenzauber, news, uload, wisekeep)
- Add /apps route to all web apps (active and archived)
- Replace custom sidebars/headers with unified PillNavigation
Apps updated:
- Active: chat, manacore, manadeck, picture, presi, zitare
- Archived: maerchenzauber, memoro, news, nutriphi, uload, wisekeep
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add dedicated /themes page with ThemePage component to all three apps
- Add theme variant dropdown with "Alle Themes" link in navigation
- Add keyboard shortcut 'T' for quick access to themes page
- Export PillNavElement type from shared-ui package
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add PillNavigation and PillDropdown to @manacore/shared-ui
- Features: glassmorphism design, horizontal/sidebar toggle, collapsible FAB
- Configurable per app: nav items, primary color, logo, language switcher
- Integrate into ManaCore, ManaDeck, and Memoro web apps
- Remove old local navigation components (Sidebar, Navbar, PillNavigation)
- Add navigation stores for persistent user preferences
Apps now share consistent navigation UX with app-specific branding.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
New components:
- KeyboardShortcutsPanel: Collapsible panel for displaying keyboard shortcuts
with support for categories and compact mode
- SidebarSection: Grouped navigation section with optional collapse behavior
New types:
- KeyboardShortcut: Interface for shortcut definitions (keys, label, category)
These components enable building feature-rich sidebars like Memoro's while
keeping the shared-ui Sidebar flexible and data-driven.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
New molecules:
- ModalFooter: Standardized modal footer with button layout
- DataCard: Generic card for displaying data items (memos, decks, etc.)
- PageHeader: Standardized page header with title, description, actions
New organisms:
- FormModal: Modal with built-in form handling, validation, loading states
All components use Svelte 5 snippets for flexible slot patterns.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Button enhancements:
- Add 'outline' and 'success' variants
- Add 'xl' size option
New skeleton/loading components:
- SkeletonBox: Base skeleton with shimmer animation (theme-aware)
- SkeletonText: Multi-line text skeleton
New feedback components:
- EmptyState: Standardized empty state display with icon, title,
message, and optional action buttons
New confirmation components:
- ConfirmationModal: Pre-styled confirmation dialog for delete/warning
actions with 'danger', 'warning', and 'info' variants
These components reduce duplication across apps and provide
consistent UX patterns.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
New shared-ui components:
- GlassCard: Glassmorphism container for cards
- StatRow: Generic stat row with snippet-based icons
- TagBadge: Reusable tag badge component
- AudioPlayer: Full-featured audio player with customizable icons
Updated Memoro to use shared components as wrappers while
maintaining app-specific features (icons, styling).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
