From a828b635a77b83496defe98352f23d9f82097d17 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 21 Jan 2026 21:47:34 +0000 Subject: [PATCH] feat: add working theme selector and improve settings UI Added fully functional theme selector and improved the settings UI with better components and cleaner copy. Changes: - Created Switch component (shadcn/radix-ui) for boolean settings - Added working theme selector that integrates with existing theme system - Uses useTheme hook to display available themes (Dark, Light, Plan9) - Reordered sections: Appearance first, Post second - Reordered settings: Theme first in Appearance section - Replaced Checkbox with Switch for better UX on boolean toggles - Simplified copy: "Add Grimoire tag to published events" instead of listing kinds - Simplified copy: "Display client identifiers in events" instead of "via Grimoire" mention - Better layout: Label/description on left, Switch on right Settings now use proper form components: - Switch for boolean toggles (include client tag, show client tags) - Button group for theme selection - Clean justify-between layout for settings rows The theme selector works immediately - clicking Dark/Light/Plan9 applies the theme instantly via the existing ThemeProvider context. --- package-lock.json | 71 ++++++++++++++++++ package.json | 1 + src/components/SettingsViewer.tsx | 116 +++++++++++++++++------------- src/components/ui/switch.tsx | 27 +++++++ 4 files changed, 167 insertions(+), 48 deletions(-) create mode 100644 src/components/ui/switch.tsx diff --git a/package-lock.json b/package-lock.json index 05e8e20..00738dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@radix-ui/react-scroll-area": "^1.2.10", "@radix-ui/react-slider": "^1.3.6", "@radix-ui/react-slot": "^1.2.4", + "@radix-ui/react-switch": "^1.2.6", "@radix-ui/react-tabs": "^1.1.13", "@radix-ui/react-tooltip": "^1.2.8", "@tiptap/core": "^3.15.3", @@ -3371,6 +3372,76 @@ } } }, + "node_modules/@radix-ui/react-switch": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz", + "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.3", + "@radix-ui/react-compose-refs": "1.1.2", + "@radix-ui/react-context": "1.1.2", + "@radix-ui/react-primitive": "2.1.3", + "@radix-ui/react-use-controllable-state": "1.2.2", + "@radix-ui/react-use-previous": "1.1.1", + "@radix-ui/react-use-size": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-primitive": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz", + "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-slot": "1.2.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-slot": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz", + "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.2" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-tabs": { "version": "1.1.13", "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz", diff --git a/package.json b/package.json index 160f261..6bbf47a 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@radix-ui/react-scroll-area": "^1.2.10", "@radix-ui/react-slider": "^1.3.6", "@radix-ui/react-slot": "^1.2.4", + "@radix-ui/react-switch": "^1.2.6", "@radix-ui/react-tabs": "^1.1.13", "@radix-ui/react-tooltip": "^1.2.8", "@tiptap/core": "^3.15.3", diff --git a/src/components/SettingsViewer.tsx b/src/components/SettingsViewer.tsx index f60229f..50b6925 100644 --- a/src/components/SettingsViewer.tsx +++ b/src/components/SettingsViewer.tsx @@ -1,21 +1,73 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs"; -import { Checkbox } from "./ui/checkbox"; +import { Switch } from "./ui/switch"; +import { Button } from "./ui/button"; import { useSettings } from "@/hooks/useSettings"; +import { useTheme } from "@/lib/themes"; export function SettingsViewer() { const { settings, updateSetting } = useSettings(); + const { themeId, setTheme, availableThemes } = useTheme(); return (
- +
- Post Appearance + Post
+ +
+

Appearance

+

+ Customize display preferences +

+
+ +
+
+ +
+ {availableThemes.map((theme) => ( + + ))} +
+
+ +
+
+ +

+ Display client identifiers in events +

+
+ + updateSetting("appearance", "showClientTags", checked) + } + /> +
+
+ +

Post Settings

@@ -25,57 +77,25 @@ export function SettingsViewer() {
-
- +
+ +

+ Add Grimoire tag to published events +

+
+ updateSetting("post", "includeClientTag", checked) } /> -
- -

- Add Grimoire tag to posts, spells, and deletions -

-
-
-
- - - -
-

Appearance

-

- Customize display preferences -

-
- -
-
- - updateSetting("appearance", "showClientTags", checked) - } - /> -
- -

- Display "via Grimoire" and other client identifiers -

-
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx new file mode 100644 index 0000000..6338184 --- /dev/null +++ b/src/components/ui/switch.tsx @@ -0,0 +1,27 @@ +import * as React from "react"; +import * as SwitchPrimitives from "@radix-ui/react-switch"; + +import { cn } from "@/lib/utils"; + +const Switch = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)); +Switch.displayName = SwitchPrimitives.Root.displayName; + +export { Switch };