Several shared-ui / shared-auth-ui / subscriptions / credits
components used shadcn-style bare CSS variables (--muted, --primary,
--foreground, etc.), but the Mana theme system standardized on
--color-*. The mismatch meant bg-[hsl(var(--muted))] classes
resolved to an invalid color and rendered transparent — most
visible on the Allgemein settings tab where language and week-start
buttons had no background.
Mechanical prefix across ~30 files. Two semantic renames:
- --destructive → --color-error (Mana uses "error" as the token name)
- --popover → --color-card (no popover token; card is the closest)
With shared packages on the correct naming, drop the shadcn-compat
alias shim from app.css.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Wallpaper system with four sources (predefined images, CSS gradients,
custom uploads via mana-media, and theme default). Configurable per-scene
or globally, with overlay controls (blur + opacity) and hover preview.
Adds sticky prop to shared PageHeader component and applies it across
themes, settings, credits, subscription, help, and profile pages.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Comprehensive warning sweep across 128 files that brings svelte-check
from 270 warnings → 0 (plus 3 new errors from concurrent upstream
changes fixed inline).
Final state: 6473 files, 0 errors, 0 warnings, 0 files with problems.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Eight more package-level type errors that all came from the same
small handful of patterns.
Modal escape-key handlers calling click-style functions
Four modals (AuthGateModal, GuestWelcomeModal, ConfirmationPopover,
ShareModal) had `onkeydown={(e) => { if (e.key === 'Escape')
handleBackdropClick(); }}` — but handleBackdropClick took a MouseEvent
parameter, so the no-arg call failed with "Expected 1 arguments,
got 0". Fix: route the keyboard escape path through the right
no-arg helper (`onClose` / `handleClose` / `handleContinueAsGuest`)
or pass the keyboard event through with a cast for the popover
trigger that genuinely shares its handler with the click path.
WallpaperModal $derived
`currentLayout` and `currentBackground` were declared with
`$derived(() => {...})` — passing a function expression. The
variant that takes a thunk is `$derived.by(...)`; plain `$derived`
expects a single value expression. Result: the variables held the
arrow function itself, the call sites had to invoke them as
`currentLayout()`, and TS rejected the function value where Layout
was expected. Switch to `$derived.by`, drop the call-site parens.
TagList.svelte
Generic param was named `Tag` in the handler signature
(`tag: Tag`) but the imported type was aliased as `TagType`. Tag
was undefined → "Cannot find name 'Tag'". Renamed to TagType.
TagStrip.svelte
`dropAccepts?: string[]` is too wide for `passiveDropZone`'s
`accepts: DragType[]`. Narrowed the prop type to `DragType[]`
and added the missing import.
shared-auth/types: UserData.{name,image}?
Two more optional fields for the public user shape. Both come
from the JWT user_metadata claim when the user has filled in
their profile during onboarding. Without these the
ProfileStep.svelte onboarding component couldn't read
`authStore.user?.name` / `?.image` without `as any`. Added
alongside `twoFactorEnabled` from the previous shared-auth
commit; same Optional rationale (guest tokens omit the claim).
Net: -10 type errors.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add curated icon registry (73 Phosphor icons, 8 categories) in shared-icons
- Add DynamicIcon atom and IconPicker molecule in shared-ui
- Migrate habits module from emoji strings to Phosphor icon names
- Add Dexie version(2) migration for emoji→icon field rename
- Replace inline SVGs in habits with Phosphor components
- Add drag-and-drop photo upload to Photos workbench ListView
- Add blob: to CSP img-src for upload previews
- Add dev:media script and include mana-media in dev:manacore:servers
- Add ./toast export to shared-ui package.json
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>
Tag import from @manacore/shared-icons (component) collided with Tag type
import from constants, causing "Identifier 'Tag' has already been declared"
in Svelte 5 builds. Renamed type to TagType.
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>
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>
- Add slide-in sidebar overlay with backdrop on mobile
- Make message actions appear below message on mobile
- Adjust emoji picker positioning for viewport awareness
- Reduce excessive padding on mobile screens
- Hide disabled call buttons on small screens
- Add responsive widths to panels and dialogs
- Close sidebar automatically when selecting room on mobile
- Move type exports from .svelte files to separate .types.ts files
(FilterDropdown, CommandBar) to prevent SSR hydration issues
- Replace direct NetworkGraph component import in network store
with TypeScript interface to avoid SSR component instantiation
- Add missing shared packages to vite.config.ts ssr.noExternal
and optimizeDeps.exclude (splitscreen, i18n, profile-ui, etc.)
The hydration error "Cannot read properties of undefined (reading 'call')"
was caused by Svelte 5's stricter handling of component imports in
.svelte.ts files and type exports from .svelte files during SSR.
🤖 Generated with [Claude Code](https://claude.ai/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>
- 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 optional 'centered' prop that centers the title with back button on
left and actions on right. Useful for mobile-style headers.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add backHref prop to PageHeader component for back navigation
- Integrate PageHeader in Chat app (archive, documents, spaces, templates)
- Integrate PageHeader in Picture app (board, generate, profile, tags, upload)
- Integrate PageHeader in Manacore app (dashboard, organizations, teams)
- Integrate PageHeader in Presi app (home, profile)
- Integrate PageHeader in Zitare app (authors, lists)
- Update Picture, Manadeck, Presi profiles to use shared ProfilePage
- Create new profile pages for Manacore and Zitare using shared ProfilePage
- Add profile navigation links to Manacore and Zitare
- Add Mana subscription pages to Presi and Zitare
- Fix shared-profile-ui tsconfig.json (remove invalid extends)
- Add @manacore/shared-profile-ui dependency to all web apps
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add svelte-i18n configuration with SSR support to all web apps
- Create LanguageSelector component for each app with brand colors
- Add German and English locale files
- Integrate language switcher into login pages via headerControls snippet
- Fix Tailwind v4 @source directives for shared package scanning
- Update AppSlider styling to match login container design
Apps updated:
- Memoro (gold #f8d62b)
- Märchenzauber (pink #FF6B9D)
- ManaDeck (purple #8b5cf6)
- ManaCore (indigo #6366f1)
🤖 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>
NEW COMPONENTS:
Navigation:
- NavLink: Reusable navigation link with active state, tooltips, badges
- Navbar: Horizontal top navigation with mobile menu support
- Sidebar: Vertical collapsible sidebar with theme toggle support
Form Elements:
- Select: Dropdown select with placeholder, error states
- Textarea: Multi-line input with auto-resize, character count
- Checkbox: Accessible checkbox with indeterminate state support
ENHANCED:
- Card: Added header/footer slots, interactive mode, filled variant
EXPORTS:
- NavItem, NavbarProps, SidebarProps, NavLinkProps types
- SelectOption type for Select component
All components use HSL CSS variables from shared-tailwind for
consistent theming across all apps.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
