feat(shared-ui): add FilterDropdown export and InputBar FAB support

- 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>
This commit is contained in:
Till-JS 2025-12-14 21:32:03 +01:00
parent fc3129aaa5
commit bc0db4d87e
3 changed files with 15 additions and 3 deletions

View file

@ -1,5 +1,10 @@
<script lang="ts">
import type { ThemeVariant, ThemeMode, A11yStore } from '@manacore/shared-theme';
import type {
ThemeVariant,
ThemeMode,
A11yStore,
UserSettingsStore,
} from '@manacore/shared-theme';
import { ArrowLeft, Sun, Moon, Desktop } from '@manacore/shared-icons';
import type { ThemeCardData, ThemePageTranslations, A11yTranslations } from '../types';
import { defaultTranslations, defaultA11yTranslations } from '../types';

View file

@ -2,8 +2,8 @@
export { Text, Button, Badge, Card } from './atoms';
// Molecules
export { Toggle, Input, Select, Textarea, Checkbox } from './molecules';
export type { SelectOption } from './molecules';
export { Toggle, Input, Select, Textarea, Checkbox, FilterDropdown } from './molecules';
export type { SelectOption, FilterDropdownOption } from './molecules';
// Stats
export { GlassCard, StatRow } from './molecules';

View file

@ -60,6 +60,8 @@
bottomOffset?: string;
/** Whether to leave space for a FAB button on the right side on mobile (default: false) */
hasFabRight?: boolean;
/** Whether to leave space for a FAB button on the left side on mobile (default: false) */
hasFabLeft?: boolean;
}
let {
@ -76,6 +78,7 @@
autoFocus = true,
bottomOffset = '70px',
hasFabRight = false,
hasFabLeft = false,
}: Props = $props();
let searchQuery = $state('');
@ -246,6 +249,7 @@
<div
class="quick-input-bar"
class:has-fab-right={hasFabRight}
class:has-fab-left={hasFabLeft}
style="--bottom-offset: {bottomOffset}"
>
<!-- Results Panel (above input) -->
@ -435,6 +439,9 @@
.quick-input-bar.has-fab-right {
padding-right: calc(54px + 1rem + 0.75rem); /* FAB width + FAB right margin + gap */
}
.quick-input-bar.has-fab-left {
padding-left: calc(54px + 1rem + 0.75rem); /* FAB width + FAB left margin + gap */
}
}
.input-container,