Files
moreminimore-vibe/backups/backup-20251218-094212/src/components/ZoomSelector.tsx
Kunthawat Greethong 5660de49de
Some checks failed
CI / test (map[image:macos-latest name:macos], 1, 4) (push) Has been cancelled
CI / test (map[image:macos-latest name:macos], 2, 4) (push) Has been cancelled
CI / test (map[image:macos-latest name:macos], 3, 4) (push) Has been cancelled
CI / test (map[image:macos-latest name:macos], 4, 4) (push) Has been cancelled
CI / test (map[image:windows-latest name:windows], 1, 4) (push) Has been cancelled
CI / test (map[image:windows-latest name:windows], 2, 4) (push) Has been cancelled
CI / test (map[image:windows-latest name:windows], 3, 4) (push) Has been cancelled
CI / test (map[image:windows-latest name:windows], 4, 4) (push) Has been cancelled
CI / merge-reports (push) Has been cancelled
feat: integrate custom features for smart context management
- Added a new integration script to manage custom features related to smart context.
- Implemented handlers for smart context operations (get, update, clear, stats) in ipc.
- Created a SmartContextStore class to manage context snippets and summaries.
- Developed hooks for React to interact with smart context (useSmartContext, useUpdateSmartContext, useClearSmartContext, useSmartContextStats).
- Included backup and restore functionality in the integration script.
- Validated integration by checking for custom modifications and file existence.
2025-12-18 15:56:48 +07:00

73 lines
2.2 KiB
TypeScript

import { useMemo } from "react";
import { useSettings } from "@/hooks/useSettings";
import { ZoomLevel, ZoomLevelSchema } from "@/lib/schemas";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
const ZOOM_LEVEL_LABELS: Record<ZoomLevel, string> = {
"90": "90%",
"100": "100%",
"110": "110%",
"125": "125%",
"150": "150%",
};
const ZOOM_LEVEL_DESCRIPTIONS: Record<ZoomLevel, string> = {
"90": "Slightly zoomed out to fit more content on screen.",
"100": "Default zoom level.",
"110": "Zoom in a little for easier reading.",
"125": "Large zoom for improved readability.",
"150": "Maximum zoom for maximum accessibility.",
};
const DEFAULT_ZOOM_LEVEL: ZoomLevel = "100";
export function ZoomSelector() {
const { settings, updateSettings } = useSettings();
const currentZoomLevel: ZoomLevel = useMemo(() => {
const value = settings?.zoomLevel ?? DEFAULT_ZOOM_LEVEL;
return ZoomLevelSchema.safeParse(value).success
? (value as ZoomLevel)
: DEFAULT_ZOOM_LEVEL;
}, [settings?.zoomLevel]);
return (
<div className="space-y-2">
<div className="flex flex-col gap-1">
<Label htmlFor="zoom-level">Zoom level</Label>
<p className="text-sm text-muted-foreground">
Adjusts the zoom level to make content easier to read.
</p>
</div>
<Select
value={currentZoomLevel}
onValueChange={(value) =>
updateSettings({ zoomLevel: value as ZoomLevel })
}
>
<SelectTrigger id="zoom-level" className="w-[220px]">
<SelectValue placeholder="Select zoom level" />
</SelectTrigger>
<SelectContent>
{Object.entries(ZOOM_LEVEL_LABELS).map(([value, label]) => (
<SelectItem key={value} value={value}>
<div className="flex flex-col text-left">
<span>{label}</span>
<span className="text-xs text-muted-foreground">
{ZOOM_LEVEL_DESCRIPTIONS[value as ZoomLevel]}
</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
);
}