till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-23 12:46:42 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(mana/web): AI tier selector dropdown in PillNavigation

Browse source 
Quick-access dropdown in the bottom navigation bar for toggling LLM
tiers without navigating to the full Settings page. Follows the same
PillDropdown pattern as the existing theme variant selector.

Three files changed:

  packages/shared-ui/src/navigation/types.ts
    Add showAiTierSelector, aiTierItems, currentAiTierLabel to
    PillNavigationProps. Same shape as the existing theme variant
    and language switcher props.

  packages/shared-ui/src/navigation/PillNavigation.svelte
    Destructure the three new props (defaults: false, [], 'KI').
    Render a PillDropdown with icon="cpu" between the theme
    variant selector and the theme toggle button.

  apps/mana/apps/web/src/routes/(app)/+layout.svelte
    Import llmSettingsState, updateLlmSettings, tierLabel, type
    LlmTier from @mana/shared-llm. Import isLocalLlmSupported,
    getLocalLlmStatus, loadLocalLlm from @mana/local-llm.

    Build aiTierItems as a $derived array of PillDropdownItem:
      - Three tier toggles: Browser (Gemma 4), Server (Gemma 4),
        Cloud (Gemini). Each shows active checkmark when enabled.
        Clicking toggles the tier in/out of allowedTiers. Browser
        toggle hidden when WebGPU isn't available.
      - Browser model status line: "✓ Modell geladen" (disabled,
        green) or "Lade... X%" (disabled, progress) or "Modell
        laden (~500 MB)" (clickable, triggers loadLocalLlm).
        Only shown when browser tier is enabled.
      - Divider + "KI-Einstellungen" link to /settings for the
        full configuration (cloud consent, behavior toggles, etc.)

    Build currentAiTierLabel as privacy-sorted first-active-tier
    short name: "Browser" or "Server" or "Cloud" or "Aus".

    Wire all three to PillNavigation via showAiTierSelector={true}
    + {aiTierItems} + {currentAiTierLabel}.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-10 18:19:27 +02:00
parent 0f7ab60397
commit a9956c0009
3 changed files with 97 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

19
packages/shared-ui/src/navigation/PillNavigation.svelte
View file

@ -241,6 +241,12 @@
showLanguageSwitcher?: boolean;
/** Show theme toggle (standalone button, hidden if showThemeVariants is true) */
showThemeToggle?: boolean;
/** Show AI tier selector dropdown */
showAiTierSelector?: boolean;
/** AI tier dropdown items (each representing a toggleable tier) */
aiTierItems?: PillDropdownItem[];
/** Current AI tier label, e.g. "Browser" or "Server" */
currentAiTierLabel?: string;
/** Primary color for active state (CSS custom property or hex) */
primaryColor?: string;
/** Elements to prepend before nav items (tab groups, dividers, nav items) */
@ -333,6 +339,9 @@
themeVariantItems = [],
currentThemeVariantLabel = 'Theme',
showThemeVariants = false,
showAiTierSelector = false,
aiTierItems = [],
currentAiTierLabel = 'KI',
themeMode = 'system',
onThemeModeChange,
appItems = [],
@ -651,6 +660,16 @@
</PillDropdown>
{/if}
<!-- AI Tier Selector -->
{#if showAiTierSelector && aiTierItems.length > 0}
<PillDropdown
items={aiTierItems}
direction={dropdownDirection}
label={currentAiTierLabel}
icon="cpu"
/>
{/if}
<!-- Theme Toggle (only show when not using theme variants dropdown) -->
{#if showThemeToggle && onToggleTheme && !showThemeVariants}
<button

6
packages/shared-ui/src/navigation/types.ts
View file

@ -167,6 +167,12 @@ export interface PillNavigationProps {
showLanguageSwitcher?: boolean;
/** Show theme toggle */
showThemeToggle?: boolean;
/** Show AI tier selector dropdown */
showAiTierSelector?: boolean;
/** AI tier dropdown items (each representing a toggleable tier) */
aiTierItems?: PillDropdownItem[];
/** Current AI tier label, e.g. "Browser" or "Server" */
currentAiTierLabel?: string;
/** Primary color for active state */
primaryColor?: string;
/** Elements to prepend before nav items (tab groups, dividers, nav items) */