Add slider

apps/desktop/package.json

@@ -25,6 +25,7 @@
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",

apps/desktop/src-tauri/src/commands.rs

@@ -6,6 +6,7 @@ use crate::{constants::*, Pinned};
 
 #[tauri::command]
 pub fn zoom_window(window: tauri::Window, scale_factor: f64) {
+  let window = window.get_window(MAIN_WINDOW_NAME).expect("can't find the main window");
   let _ = window.with_webview(move |webview| {
     #[cfg(target_os = "linux")]
     {

apps/desktop/src/components/ui/slider.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/utils/tw"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

apps/desktop/src/views/settings/account.tsx

@@ -24,6 +24,7 @@ import { emit } from "@tauri-apps/api/event";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import type { VoiceUser } from "@/types";
 import { useConfigValue } from "@/hooks/use-config-value";
+import { Slider } from "@/components/ui/slider";
 
 export const Developer = () => {
   const platformInfo = usePlatformInfo();
@@ -125,6 +126,7 @@ export const Account = () => {
   const [showQuitDialog, setShowQuitDialog] = useState(false);
   const [user, setUser] = useState<VoiceUser | null>(null);
   const [tokenExpires, setTokenExpires] = useState(localStorage.getItem("discord_access_token_expiry"));
+  const [zoom, setZoom] = useState(50);
 
   // pull out the user data from localStorage
   useEffect(() => {
@@ -183,7 +185,6 @@ export const Account = () => {
             </div>
           </div>
         </div>
-
         <div className="flex flex-row gap-4 pb-4">
           <div>
             <Dialog
@@ -268,6 +269,19 @@ export const Account = () => {
           <Developer />
         </div>
         <AppInfo />
+        Zoom
+        <Slider
+          onValueChange={async ([val]) => {
+            setZoom(val || 0);
+            await invoke("zoom_window", { scaleFactor: zoom });
+          }}
+          defaultValue={[0.4]}
+          min={0.4}
+          max={1.5}
+          step={0.1}
+          className="w-[60%]"
+        />
+        {zoom}
       </div>
     </div>
   );