Command Palette

1<script lang="ts">2	import { Button, CommandPalette, Kbd, Text, type CommandGroup } from 'omaris';3​4	let open = $state(false);5	let ran = $state('nothing yet');6​7	const items: CommandGroup[] = [8		{9			heading: 'Go to',10			items: [11				{ id: 'dashboard', label: 'Dashboard', icon: home, onselect: () => (ran = 'Dashboard') },12				{ id: 'orders', label: 'Orders', icon: box, onselect: () => (ran = 'Orders') },13				{14					id: 'settings',15					label: 'Settings',16					keywords: ['preferences', 'account', 'profile'],17					icon: gear,18					shortcut: 'mod+,',19					onselect: () => (ran = 'Settings')20				}21			]22		},23		{24			heading: 'Actions',25			items: [26				{27					id: 'new-order',28					label: 'New order',29					description: 'Start a blank order',30					icon: plus,31					shortcut: 'mod+shift+o',32					onselect: () => (ran = 'New order')33				},34				{35					id: 'new-issue',36					label: 'New issue',37					icon: plus,38					shortcut: 'c',39					onselect: () => (ran = 'New issue')40				}41			]42		}43	];44</script>45​46{#snippet home()}47	...48{/snippet}49{#snippet box()}50	...51{/snippet}52{#snippet gear()}53	...54{/snippet}55{#snippet plus()}56	...57{/snippet}58​59<div class="flex flex-col items-center gap-2">60	<Button variant="outlined" onclick={() => (open = true)}>61		Search commands62		<Kbd keys="mod+j" size="sm" variant="flat" />63	</Button>64	<Text variant="body-sm" tone="muted">Last run: {ran}</Text>65</div>66​67<CommandPalette bind:open {items} hotkey="mod+j" />

1<script lang="ts">2	import { Button, CommandPalette, Text, type CommandGroup } from 'omaris';3​4	let open = $state(false);5	let ran = $state('nothing yet');6​7	const TEAM = ['Amina Yusuf', 'Dilan Karim', 'Hevi Salih', 'Omar Nasir'];8	const STATUSES = ['Backlog', 'In progress', 'In review', 'Done'];9​10	const items: CommandGroup[] = [11		{12			heading: 'Issue',13			items: [14				{15					id: 'assign',16					label: 'Assign to…',17					placeholder: 'Who should take it?',18					children: TEAM.map((name) => ({19						id: `assign:${name}`,20						label: name,21						onselect: () => (ran = `Assigned to ${name}`)22					}))23				},24				{25					id: 'status',26					label: 'Change status…',27					children: STATUSES.map((status) => ({28						id: `status:${status}`,29						label: status,30						onselect: () => (ran = `Moved to ${status}`)31					}))32				}33			]34		},35		{36			heading: 'Preferences',37			items: [38				{39					id: 'theme',40					label: 'Theme…',41					children: [42						{43							heading: 'Appearance',44							items: [45								{ id: 'theme:light', label: 'Light', onselect: () => (ran = 'Light theme') },46								{ id: 'theme:dark', label: 'Dark', onselect: () => (ran = 'Dark theme') },47								{ id: 'theme:system', label: 'System', onselect: () => (ran = 'System theme') }48							]49						}50					]51				}52			]53		}54	];55</script>56​57<div class="flex flex-col items-center gap-2">58	<Button variant="tonal" onclick={() => (open = true)}>Issue actions</Button>59	<Text variant="body-sm" tone="muted">Last run: {ran}</Text>60</div>61​62<CommandPalette63	bind:open64	{items}65	hotkey={false}66	recentKey="omaris-docs-palette-recent"67	recent={3}68	placeholder="What do you want to do?"69/>

1<script lang="ts">2	import { Button, CommandPalette, Text, type CommandGroup } from 'omaris';3​4	const CUSTOMERS = [5		'Zagros Café',6		'Nishtiman Books',7		'Erbil Bakery',8		'Tigris Tailors',9		'Sulaymaniyah Print House',10		'Duhok Dairy',11		'Basra Marine Supply'12	];13​14	let open = $state(false);15	let query = $state('');16	let loading = $state(false);17	let results = $state<CommandGroup[]>([]);18	let picked = $state('nobody yet');19​20	/** Stands in for `fetch('/api/customers?q=…')`. */21	$effect(() => {22		const q = query.trim().toLowerCase();23		loading = true;24		const timer = setTimeout(() => {25			const items = CUSTOMERS.filter((name) => name.toLowerCase().includes(q)).map((name) => ({26				id: name,27				label: name,28				description: 'Customer',29				onselect: () => (picked = name)30			}));31			results = items.length ? [{ heading: 'Customers', items }] : [];32			loading = false;33		}, 400);34		return () => clearTimeout(timer);35	});36</script>37​38<div class="flex flex-col items-center gap-2">39	<Button variant="outlined" onclick={() => (open = true)}>Find a customer</Button>40	<Text variant="body-sm" tone="muted">Picked: {picked}</Text>41</div>42​43<CommandPalette44	bind:open45	bind:query46	items={results}47	filter={false}48	{loading}49	hotkey={false}50	placeholder="Search customers…"51/>

1<script lang="ts">2	import { Button, CommandPalette, Text, type CommandGroup } from 'omaris';3​4	let open = $state(false);5	let ran = $state('—');6​7	const items: CommandGroup[] = [8		{9			heading: 'الطلبات',10			items: [11				{ id: 'ar-new', label: 'طلب جديد', shortcut: 'mod+n', onselect: () => (ran = 'طلب جديد') },12				{ id: 'ar-orders', label: 'كل الطلبات', onselect: () => (ran = 'كل الطلبات') }13			]14		},15		{16			heading: 'المظهر',17			items: [18				{19					id: 'ar-theme',20					label: 'تغيير المظهر',21					children: [22						{ id: 'ar-light', label: 'فاتح', onselect: () => (ran = 'فاتح') },23						{ id: 'ar-dark', label: 'داكن', onselect: () => (ran = 'داكن') }24					]25				}26			]27		}28	];29</script>30​31<div dir="rtl" lang="ar" class="flex flex-col items-center gap-2">32	<Button variant="outlined" onclick={() => (open = true)}>لوحة الأوامر</Button>33	<Text variant="body-sm" tone="muted">آخر أمر: {ran}</Text>34​35	<CommandPalette36		bind:open37		{items}38		dir="rtl"39		lang="ar"40		hotkey={false}41		label="لوحة الأوامر"42		placeholder="اكتب أمرًا أو ابحث…"43		backLabel="رجوع"44		clearLabel="مسح"45		class="max-w-lg"46		classes={{47			header: 'bg-surface-container-low',48			option: 'rounded-full',49			highlight: 'text-tertiary underline decoration-2 underline-offset-4'50		}}51	>52		{#snippet empty(query)}53			<Text variant="body-md" tone="muted">لا نتائج لـ «{query}»</Text>54		{/snippet}55		{#snippet footer()}56			<Text as="span" variant="label-sm">↑↓ للتنقل · ↵ للاختيار · esc للإغلاق</Text>57		{/snippet}58	</CommandPalette>59</div>