refactor, lint, cleanup

client/ui/frontend/src/components/dialog/ConfirmDialog.tsx

@@ -2,15 +2,6 @@ import { ReactNode, forwardRef } from "react";
 import { cn } from "@/lib/cn.ts";
 import { isMacOS } from "@/lib/platform.ts";
 
-// ConfirmDialog is the shared layout wrapper used by dialog-style window
-// surfaces (SessionExpiration, …). Purely a layout
-// primitive — callers compose the contents (SquareIcon, DialogHeading,
-// DialogDescription, DialogActions) so each dialog can tweak its own
-// internal structure without growing the ConfirmDialog API.
-//
-// Callers that mount the dialog inside its own Wails window pair this
-// with useAutoSizeWindow by forwarding the returned ref onto the content
-// wrapper so the window height tracks the rendered content.
 type ConfirmDialogProps = {
     children: ReactNode;
 };

client/ui/frontend/src/components/dialog/ConfirmModal.tsx

@@ -6,25 +6,13 @@ import { DialogHeading } from "@/components/dialog/DialogHeading";
 import { DialogDescription } from "@/components/dialog/DialogDescription";
 import { DialogActions } from "@/components/dialog/DialogActions";
 
-// ConfirmModal is the shared in-app confirmation modal — a left-aligned
-// title + (optionally multi-line) description with Cancel / confirm buttons
-// in the footer. It's the in-window counterpart to a native confirm dialog.
-//
-// Most call sites should not render this directly: use the imperative
-// `useConfirm()` from DialogContext (`await confirm({...})`), which mounts a
-// single instance at the provider level. Render ConfirmModal yourself only
-// when you need bespoke control over its open/busy lifecycle.
 type ConfirmModalProps = {
     open: boolean;
     title: ReactNode;
     description: ReactNode;
-    /** Confirm button label. */
     confirmLabel: string;
-    /** Cancel button label; defaults to the shared "Cancel" string. */
     cancelLabel?: string;
-    /** Use the destructive (red) confirm button variant. */
     danger?: boolean;
-    /** Disable the buttons (and ignore dismiss) while an action runs. */
     busy?: boolean;
     onConfirm: () => void;
     onCancel: () => void;
@@ -43,9 +31,7 @@ export const ConfirmModal = ({
 }: ConfirmModalProps) => {
     const { t } = useTranslation();
 
-    // Retain the last shown content so it stays rendered through Radix's
-    // close animation instead of blanking out the instant the caller clears
-    // its state on close.
+    // Retain last content so it survives Radix's close animation.
     type Snapshot = Pick<ConfirmModalProps, "title" | "description" | "confirmLabel" | "danger"> & {
         cancelLabel: string;
     };

client/ui/frontend/src/components/dialog/DialogActions.tsx

@@ -1,21 +1,13 @@
 import { ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
-// DialogActions wraps a vertical stack of Buttons inside a dialog surface.
-// The wails-no-draggable class lets the user click the buttons even when
-// the dialog window itself is draggable from any background region.
 type DialogActionsProps = {
     children: ReactNode;
     className?: string;
 };
 
 export const DialogActions = ({ children, className }: DialogActionsProps) => (
-    <div
-        className={cn(
-            "wails-no-draggable flex flex-col gap-3 w-full mx-auto",
-            className,
-        )}
-    >
+    <div className={cn("wails-no-draggable flex flex-col gap-3 w-full mx-auto", className)}>
         {children}
     </div>
 );

client/ui/frontend/src/components/dialog/DialogDescription.tsx

@@ -1,8 +1,6 @@
 import { ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
-// DialogDescription is the supporting description text rendered under a
-// DialogHeading inside ConfirmDialog (and similar dialog surfaces).
 type DialogAlign = "left" | "center" | "right";
 
 const alignClass: Record<DialogAlign, string> = {
@@ -17,18 +15,12 @@ type DialogDescriptionProps = {
     align?: DialogAlign;
 };
 
-export const DialogDescription = ({ children, className, align = "center" }: DialogDescriptionProps) => (
-    // w-full for the same reason DialogHeading carries it — see the
-    // comment there. The default text-center remains visually identical
-    // to before; left/right alignment now anchors to the dialog content
-    // edge instead of collapsing to no-op on a content-width box.
-    <p
-        className={cn(
-            "w-full text-sm text-nb-gray-300 select-none",
-            alignClass[align],
-            className,
-        )}
-    >
+export const DialogDescription = ({
+    children,
+    className,
+    align = "center",
+}: DialogDescriptionProps) => (
+    <p className={cn("w-full text-sm text-nb-gray-300 select-none", alignClass[align], className)}>
         {children}
     </p>
 );

client/ui/frontend/src/components/dialog/DialogHeading.tsx

@@ -1,9 +1,6 @@
 import { ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
-// DialogHeading is the title text used inside ConfirmDialog (and any other
-// dialog-style surface with the same shape). Pair with DialogDescription
-// for the standard title/description stack.
 type DialogAlign = "left" | "center" | "right";
 
 const alignClass: Record<DialogAlign, string> = {
@@ -19,12 +16,6 @@ type DialogHeadingProps = {
 };
 
 export const DialogHeading = ({ children, className, align = "center" }: DialogHeadingProps) => (
-    // w-full so the alignClass actually has a box to anchor against.
-    // The wrapping <p> defaulted to content width inside a flex column,
-    // which made `text-left` a no-op (nothing to push the text away
-    // from). Stretching the element is invisible for the default
-    // text-center case (center of content == center of box) and lets
-    // text-left/right line up with the dialog's content edge.
     <p
         className={cn(
             "w-full text-base font-semibold text-nb-gray-50 select-none",