mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-08-02 18:10:18 +05:30
feat(settings): add Updates section with channel radio and Check now
This commit is contained in:
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user