update dialogs, hide main window on browser login, keep state as disconnected when needslogin

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

@@ -0,0 +1,29 @@
+import { ReactNode, forwardRef } from "react";
+
+// ConfirmDialog is the shared layout wrapper used by dialog-style window
+// surfaces (SessionExpired, SessionAboutToExpire, …). 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;
+};
+
+export const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(
+    function ConfirmDialog({ children }, ref) {
+        return (
+            <div className={"flex flex-col items-center justify-center"}>
+                <div
+                    ref={ref}
+                    className={"flex flex-col items-center gap-5 p-8 text-center"}
+                >
+                    {children}
+                </div>
+            </div>
+        );
+    },
+);

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

@@ -0,0 +1,21 @@
+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,
+        )}
+    >
+        {children}
+    </div>
+);

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

@@ -0,0 +1,13 @@
+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 DialogDescriptionProps = {
+    children: ReactNode;
+    className?: string;
+};
+
+export const DialogDescription = ({ children, className }: DialogDescriptionProps) => (
+    <p className={cn("text-sm text-nb-gray-300", className)}>{children}</p>
+);

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

@@ -0,0 +1,16 @@
+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 DialogHeadingProps = {
+    children: ReactNode;
+    className?: string;
+};
+
+export const DialogHeading = ({ children, className }: DialogHeadingProps) => (
+    <p className={cn("text-base font-semibold text-nb-gray-50", className)}>
+        {children}
+    </p>
+);

client/ui/frontend/src/components/SquareIcon.tsx

@@ -0,0 +1,23 @@
+import { ComponentType } from "react";
+import { LucideProps } from "lucide-react";
+import { cn } from "@/lib/cn";
+
+// SquareIcon is the rounded-square icon tile used by dialog-style surfaces
+// (ConfirmDialog, etc.). Renders a bordered dark tile with the provided
+// lucide icon centered inside.
+type SquareIconProps = {
+    icon: ComponentType<LucideProps>;
+    iconSize?: number;
+    className?: string;
+};
+
+export const SquareIcon = ({ icon: Icon, iconSize = 20, className }: SquareIconProps) => (
+    <div
+        className={cn(
+            "h-11 w-11 rounded-xl flex items-center justify-center bg-nb-gray-920 border border-nb-gray-900 text-white",
+            className,
+        )}
+    >
+        <Icon size={iconSize} />
+    </div>
+);