Merge pull request #20 from Nuzair46/minor-ui-fixes

Minor UI improvements

Author: Nuzair46

web/App.tsx

@@ -21,7 +21,7 @@ import {
   type PendingDisplayToggle,
   type View,
 } from "@/app/ui";
-import { capitalizeToastError, formatMs } from "@/app/utils";
+import { capitalizeToastError, formatMs, shortcutSlotKey } from "@/app/utils";
 
 import {
   applyLayout,
@@ -44,16 +44,6 @@ import type {
   DisplayInfo,
 } from "./types";
 
-function shortcutSlotKey(index: number): string | null {
-  if (index >= 0 && index <= 8) {
-    return String(index + 1);
-  }
-  if (index === 9) {
-    return "0";
-  }
-  return null;
-}
-
 function buildShortcutFromBase(base: string | null, slotIndex: number): string | null {
   const trimmedBase = (base ?? "").trim();
   if (!trimmedBase) {
@@ -179,12 +169,11 @@ function App() {
     successNotice?: string,
     refresh = true,
   ): Promise<boolean> {
-    let succeeded = false;
     setBusy(true);
     setError(null);
+
     try {
       await action();
-      succeeded = true;
       if (successNotice) {
         toast.success(successNotice);
       }
@@ -193,16 +182,15 @@ function App() {
       setError(message);
       toast.error(capitalizeToastError(message));
       return false;
-    }
-    finally {
+    } finally {
       setBusy(false);
     }
 
-    if (succeeded && refresh) {
+    if (refresh) {
       void refreshState();
     }
 
-    return succeeded;
+    return true;
   }
 
   function runPendingLayoutDecision(
@@ -218,7 +206,7 @@ function App() {
       current ? { ...current, pending_confirmation: null } : current,
     );
 
-    void (async () => {
+    const run = async () => {
       try {
         await action();
       } catch (err) {
@@ -229,7 +217,9 @@ function App() {
         setPendingLayoutDecisionBusy(false);
         void refreshState();
       }
-    })();
+    };
+
+    void run();
   }
 
   useEffect(() => {
@@ -493,39 +483,38 @@ function App() {
     );
   }
 
-  function handleRevertTimeoutInputChange(value: string) {
+  function markSettingsDirty() {
     setError(null);
     settingsDirtyRef.current = true;
+  }
+
+  function handleRevertTimeoutInputChange(value: string) {
+    markSettingsDirty();
     setRevertTimeoutInput(value);
   }
 
   function handleStartWithWindowsChange(checked: boolean) {
-    setError(null);
-    settingsDirtyRef.current = true;
+    markSettingsDirty();
     setStartWithWindowsEnabled(checked);
   }
 
   function handleStartupProfileNameChange(value: string | null) {
-    setError(null);
-    settingsDirtyRef.current = true;
+    markSettingsDirty();
     setStartupProfileName(value);
   }
 
   function handleGlobalShortcutsEnabledChange(checked: boolean) {
-    setError(null);
-    settingsDirtyRef.current = true;
+    markSettingsDirty();
     setGlobalShortcutsEnabled(checked);
   }
 
   function handleProfileShortcutBaseChange(value: string) {
-    setError(null);
-    settingsDirtyRef.current = true;
+    markSettingsDirty();
     setProfileShortcutBaseInput(value);
   }
 
   function handleDisplayShortcutBaseChange(value: string) {
-    setError(null);
-    settingsDirtyRef.current = true;
+    markSettingsDirty();
     setDisplayShortcutBaseInput(value);
   }
 

web/app/components/app-header.tsx

@@ -15,15 +15,13 @@ export function AppHeader() {
   return (
     <Card className="overflow-hidden">
       <CardHeader className="gap-4 lg:flex-row lg:items-start lg:justify-between">
-        <div className="space-y-3">
-          <div className="space-y-2">
-            <CardTitle className="tracking-widest text-primary">
-              MONARCH
-            </CardTitle>
-            <CardDescription className="max-w-3xl text-sm leading-relaxed sm:text-base">
-              Detach, restore, and switch monitor layouts without touching cables.
-            </CardDescription>
-          </div>
+        <div className="space-y-2">
+          <CardTitle className="tracking-widest text-primary">
+            MONARCH
+          </CardTitle>
+          <CardDescription className="max-w-3xl text-sm leading-relaxed sm:text-base">
+            Detach, restore, and switch monitor layouts without touching cables.
+          </CardDescription>
         </div>
 
         <div className="flex w-full flex-col gap-2 lg:w-auto lg:items-end">

web/app/components/dialogs.tsx

@@ -12,6 +12,8 @@ import { formatMs } from "@/app/utils";
 import type { PendingDisplayToggle } from "@/app/ui";
 import type { PendingConfirmation } from "@/types";
 
+const noop = () => {};
+
 type PendingConfirmationDialogProps = {
   pendingConfirmation: PendingConfirmation | null;
   busy: boolean;
@@ -26,7 +28,7 @@ export function PendingConfirmationDialog({
   onRevert,
 }: PendingConfirmationDialogProps) {
   return (
-    <AlertDialog open={Boolean(pendingConfirmation)} onOpenChange={() => {}}>
+    <AlertDialog open={Boolean(pendingConfirmation)} onOpenChange={noop}>
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>Confirm layout change</AlertDialogTitle>
@@ -68,34 +70,37 @@ export function DisplayToggleDialog({
   onOpenChange,
   onConfirm,
 }: DisplayToggleDialogProps) {
+  const isActive = Boolean(pendingDisplayToggle?.currentlyActive);
+  const actionLabel = isActive ? "Detach Display" : "Attach Display";
+  const title = isActive ? "Detach display?" : "Attach display?";
+  const description = isActive
+    ? "will be removed from the active layout."
+    : "will be added back to the active layout.";
+
   return (
     <AlertDialog open={Boolean(pendingDisplayToggle)} onOpenChange={onOpenChange}>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>
-            {pendingDisplayToggle?.currentlyActive ? "Detach display?" : "Attach display?"}
-          </AlertDialogTitle>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
           <AlertDialogDescription>
             {pendingDisplayToggle ? (
               <>
                 <span className="font-medium text-foreground">
                   {pendingDisplayToggle.friendlyName}
                 </span>{" "}
-                {pendingDisplayToggle.currentlyActive
-                  ? "will be removed from the active layout."
-                  : "will be added back to the active layout."}
+                {description}
               </>
             ) : null}
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel disabled={busy}>Cancel</AlertDialogCancel>
           <AlertDialogAction
-            variant={pendingDisplayToggle?.currentlyActive ? "destructive" : "default"}
+            variant={isActive ? "destructive" : "default"}
             disabled={busy}
             onClick={onConfirm}
           >
-            {pendingDisplayToggle?.currentlyActive ? "Detach Display" : "Attach Display"}
+            {actionLabel}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>

web/app/components/layout-preview.tsx

@@ -3,6 +3,8 @@ import { useMemo } from "react";
 import { cn } from "@/lib/utils";
 import type { AppSnapshot } from "@/types";
 
+type LayoutOutput = AppSnapshot["layout"]["outputs"][number];
+
 function previewOutputs(snapshot: AppSnapshot | null) {
   if (!snapshot) {
     return [];
@@ -14,32 +16,44 @@ function previewOutputs(snapshot: AppSnapshot | null) {
   );
 }
 
-function layoutBounds(snapshot: AppSnapshot | null) {
-  const outputs = previewOutputs(snapshot);
+function getOutputResolution(
+  output: LayoutOutput,
+  displayByKey: Map<string, AppSnapshot["displays"][number]>,
+) {
+  const display = displayByKey.get(output.display_key);
+  if (!display?.is_active) {
+    return output.resolution;
+  }
+
+  return display.resolution;
+}
+
+function layoutBounds(snapshot: AppSnapshot | null, outputs: LayoutOutput[]) {
   if (!snapshot || outputs.length === 0) {
     return null;
   }
 
   const displayByKey = new Map(snapshot.displays.map((display) => [display.id_key, display]));
-  const outputWidth = (output: AppSnapshot["layout"]["outputs"][number]) =>
-    displayByKey.get(output.display_key)?.is_active
-      ? (displayByKey.get(output.display_key)?.resolution.width ?? output.resolution.width)
-      : output.resolution.width;
-  const outputHeight = (output: AppSnapshot["layout"]["outputs"][number]) =>
-    displayByKey.get(output.display_key)?.is_active
-      ? (displayByKey.get(output.display_key)?.resolution.height ?? output.resolution.height)
-      : output.resolution.height;
+
   const left = Math.min(...outputs.map((o) => o.position.x));
   const top = Math.min(...outputs.map((o) => o.position.y));
-  const right = Math.max(...outputs.map((o) => o.position.x + outputWidth(o)));
-  const bottom = Math.max(...outputs.map((o) => o.position.y + outputHeight(o)));
+  const right = Math.max(
+    ...outputs.map((output) => output.position.x + getOutputResolution(output, displayByKey).width),
+  );
+  const bottom = Math.max(
+    ...outputs.map((output) => output.position.y + getOutputResolution(output, displayByKey).height),
+  );
 
   return { left, top, right, bottom, width: right - left, height: bottom - top };
 }
 
 export function LayoutPreview({ snapshot }: { snapshot: AppSnapshot | null }) {
-  const bounds = useMemo(() => layoutBounds(snapshot), [snapshot]);
   const outputs = useMemo(() => previewOutputs(snapshot), [snapshot]);
+  const bounds = useMemo(() => layoutBounds(snapshot, outputs), [snapshot, outputs]);
+  const displayByKey = useMemo(
+    () => new Map((snapshot?.displays ?? []).map((display) => [display.id_key, display])),
+    [snapshot],
+  );
   const monitorNumberByDisplayKey = useMemo(
     () =>
       new Map(
@@ -71,7 +85,7 @@ export function LayoutPreview({ snapshot }: { snapshot: AppSnapshot | null }) {
         }}
       >
         {outputs.map((output) => {
-          const display = snapshot.displays.find((d) => d.id_key === output.display_key);
+          const display = displayByKey.get(output.display_key);
           const monitorNumber = monitorNumberByDisplayKey.get(output.display_key);
           const active = output.enabled;
           const previewResolution =