cbf247a4ef
<img width="496" height="470" alt="Screenshot 2025-10-24 200100" src="https://github.com/user-attachments/assets/e64ee081-dc08-4b54-94a6-9ed41453cfcf" /> This PR adds settings for text size, small, medium (default), large and extra large. This should help more people use Dyad more productively. Closes #1482 <!-- This is an auto-generated description by cubic. --> --- ## Summary by cubic Adds adjustable workspace zoom levels (90%, 100%, 110%, 125%, 150%) to improve readability and accessibility. Changes apply instantly and persist per user, addressing issue #1482. - **New Features** - Zoom selector in Settings → General. - Persists zoomLevel in user settings and schema. - Applies zoom via Electron webFrame for consistent app scaling. - **Refactors** - Removed deprecated workspaceTextSize setting. - Removed root font-size from globals.css. <sup>Written for commit 54bad25f016a83e9f414025a07e80fdbad859366. Summary will update automatically on new commits.</sup> <!-- End of auto-generated description by cubic. --> <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Adds adjustable app zoom levels (90–150%) with a Settings selector, persisted in user settings, and applied via Electron webFrame. > > - **UI/Settings**: > - Add `ZoomSelector` component and surface it in `Settings → General` (`src/components/ZoomSelector.tsx`, `src/pages/settings.tsx`). > - **Schema/Persistence**: > - Introduce `ZoomLevelSchema` and optional `zoomLevel` in `UserSettingsSchema` (`src/lib/schemas.ts`). > - **Electron Integration**: > - Expose `webFrame.setZoomFactor/getZoomFactor` in `window.electron` (`src/preload.ts`). > - **App Behavior**: > - Apply zoom factor on load and when settings change with default `100%` (`src/app/layout.tsx`). > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 54bad25f016a83e9f414025a07e80fdbad859366. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY --> --------- Co-authored-by: Devforschool <138079274+Devforschool@users.noreply.github.com> Co-authored-by: Will Chen <willchen90@gmail.com>
73 lines
2.2 KiB
TypeScript
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>
|
|
);
|
|
}
|