feat(settings): add Updates section with channel radio and Check now

This commit is contained in:
2026-06-08 06:40:51 +05:30
parent ade6c115b8
commit 691b00a2b8
2 changed files with 65 additions and 1 deletions
@@ -8,6 +8,7 @@ import { ThemeSettings } from './ThemeSettings';
import { ExportSettings } from './ExportSettings'; import { ExportSettings } from './ExportSettings';
import { PluginsSettings } from './PluginsSettings'; import { PluginsSettings } from './PluginsSettings';
import { AboutSettings } from './AboutSettings'; import { AboutSettings } from './AboutSettings';
import { UpdatesSettings } from './UpdatesSettings';
export function SettingsSheet() { export function SettingsSheet() {
const closeModal = useAppStore((s) => s.closeModal); const closeModal = useAppStore((s) => s.closeModal);
@@ -21,11 +22,12 @@ export function SettingsSheet() {
<SheetDescription>Editor, theme, and export preferences</SheetDescription> <SheetDescription>Editor, theme, and export preferences</SheetDescription>
</SheetHeader> </SheetHeader>
<Tabs defaultValue="editor" className="mt-4"> <Tabs defaultValue="editor" className="mt-4">
<TabsList className="grid w-full grid-cols-5"> <TabsList className="grid w-full grid-cols-6">
<TabsTrigger value="editor">Editor</TabsTrigger> <TabsTrigger value="editor">Editor</TabsTrigger>
<TabsTrigger value="theme">Theme</TabsTrigger> <TabsTrigger value="theme">Theme</TabsTrigger>
<TabsTrigger value="export">Export</TabsTrigger> <TabsTrigger value="export">Export</TabsTrigger>
<TabsTrigger value="plugins">Plugins</TabsTrigger> <TabsTrigger value="plugins">Plugins</TabsTrigger>
<TabsTrigger value="updates">Updates</TabsTrigger>
<TabsTrigger value="about">About</TabsTrigger> <TabsTrigger value="about">About</TabsTrigger>
</TabsList> </TabsList>
<div className="mt-4 max-h-[70vh] overflow-y-auto pr-2"> <div className="mt-4 max-h-[70vh] overflow-y-auto pr-2">
@@ -33,6 +35,7 @@ export function SettingsSheet() {
<TabsContent value="theme"><ThemeSettings /></TabsContent> <TabsContent value="theme"><ThemeSettings /></TabsContent>
<TabsContent value="export"><ExportSettings /></TabsContent> <TabsContent value="export"><ExportSettings /></TabsContent>
<TabsContent value="plugins"><PluginsSettings /></TabsContent> <TabsContent value="plugins"><PluginsSettings /></TabsContent>
<TabsContent value="updates"><UpdatesSettings /></TabsContent>
<TabsContent value="about"><AboutSettings /></TabsContent> <TabsContent value="about"><AboutSettings /></TabsContent>
</div> </div>
</Tabs> </Tabs>
@@ -0,0 +1,61 @@
import { useUpdaterStore } from '@/lib/updater-store';
import { useSettingsStore } from '@/stores/settings-store';
import { Button } from '@/components/ui/button';
export function UpdatesSettings() {
const updateChannel = useSettingsStore((s) => s.updateChannel);
const setSetting = useSettingsStore((s) => s.setSetting);
const autoCheck = useSettingsStore((s) => s.autoCheckUpdates);
const { check, state } = useUpdaterStore();
return (
<div className="space-y-4" data-testid="updates-settings">
<div>
<h3 className="font-medium mb-2">Update channel</h3>
<div className="flex flex-col gap-2">
<label className="flex items-center gap-2">
<input
type="radio"
name="update-channel"
checked={updateChannel === 'github'}
onChange={() => setSetting('updateChannel', 'github')}
/>
<span>GitHub Releases (public)</span>
</label>
<label className="flex items-center gap-2">
<input
type="radio"
name="update-channel"
checked={updateChannel === 'concreteinfo'}
onChange={() => setSetting('updateChannel', 'concreteinfo')}
/>
<span>ConcreteInfo self-hosted</span>
</label>
</div>
</div>
<div>
<h3 className="font-medium mb-2">Auto-check on launch</h3>
<label className="flex items-center gap-2">
<input
type="checkbox"
checked={autoCheck}
onChange={(e) => setSetting('autoCheckUpdates', e.target.checked)}
/>
<span>Check for updates 5s after launch</span>
</label>
</div>
<div>
<h3 className="font-medium mb-2">Manual check</h3>
<Button
onClick={() => check()}
disabled={state === 'checking' || state === 'downloading'}
data-testid="check-now"
>
{state === 'checking' ? 'Checking…' : 'Check now'}
</Button>
</div>
</div>
);
}