chore: starter template

apps/app/src/components/ThemeSelector.tsx

@@ -0,0 +1,27 @@
+import { Select } from '@pikku/mantine/core'
+import { m } from '@/i18n/messages'
+import { useLocale } from '@/i18n/config'
+import { themeList } from '@project/mantine-themes'
+import { usePreferences } from '@/contexts/preferences'
+
+// A single theme per app. Themes are normally chosen from the Fabric console
+// (which live-injects into the iframe); this picker only appears when more than
+// one theme ships, and is hidden otherwise.
+export function ThemeSelector() {
+  useLocale()
+  const { themeId, setThemeId } = usePreferences()
+
+  if (themeList.length <= 1) return null
+
+  return (
+    <Select
+      aria-label={m.preferences__theme()}
+      data={themeList.map((t) => ({ value: t.id, label: t.name }))}
+      value={themeId}
+      onChange={(v) => v && setThemeId(v)}
+      size="xs"
+      w={110}
+      allowDeselect={false}
+    />
+  )
+}