feat: add UI/UX polish with navigation rail, confirm dialogs, welcome banner, and form validation

- Add NavigationRail component (desktop vertical icon sidebar + mobile bottom tab bar) - Add ConfirmDialog with promise-based useConfirmDialog hook for async confirmation flow - Add WelcomeBanner onboarding component (one-time display, localStorage persistence) - Polish login form UX (shake on error, TOTP slide animation, password visibility toggle, session expired banner) - Add inline form validation with shake animation in email composer and contacts - Add empty state patterns for contacts (no data vs no search results with contextual actions) - Improve toast notification system with undo action support and typed durations - Add WCAG AA prefers-reduced-motion media query, safe area insets, sr-only live regions - Add template settings tab and keyboard shortcut integration - Update all 8 locale translations
2026-02-17 02:31:50 +01:00
parent 2636a88820
commit a43096485b
44 changed files with 2148 additions and 669 deletions
@@ -0,0 +1,91 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useTranslations } from "next-intl";
+import { X, Lightbulb } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+const ONBOARDING_KEY = "onboarding_completed";
+
+export function WelcomeBanner() {
+  const t = useTranslations("welcome");
+  const [visible, setVisible] = useState(false);
+  const [dismissed, setDismissed] = useState(false);
+
+  useEffect(() => {
+    try {
+      if (!localStorage.getItem(ONBOARDING_KEY)) {
+        setVisible(true);
+      }
+    } catch { /* localStorage unavailable */ }
+  }, []);
+
+  const dismiss = useCallback(() => {
+    setDismissed(true);
+    try {
+      localStorage.setItem(ONBOARDING_KEY, "true");
+    } catch { /* localStorage unavailable */ }
+  }, []);
+
+  useEffect(() => {
+    if (!visible) return;
+    const handle = (e: KeyboardEvent) => {
+      if (e.key === "Escape") dismiss();
+    };
+    window.addEventListener("keydown", handle);
+    return () => window.removeEventListener("keydown", handle);
+  }, [visible, dismiss]);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      role="complementary"
+      aria-label={t("title")}
+      className={`mx-4 mt-3 mb-1 rounded-lg border border-border bg-background shadow-sm transition-all duration-300 ease-out ${
+        dismissed ? "opacity-0 scale-95 pointer-events-none" : "opacity-100 scale-100"
+      }`}
+      onTransitionEnd={() => {
+        if (dismissed) setVisible(false);
+      }}
+    >
+      <div className="p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex items-start gap-3">
+            <div className="flex-shrink-0 mt-0.5 p-1.5 rounded-md bg-primary/10">
+              <Lightbulb className="w-4 h-4 text-primary" />
+            </div>
+            <div className="space-y-2">
+              <h3 className="text-sm font-medium text-foreground">
+                {t("title")}
+              </h3>
+              <ul className="space-y-1.5 text-sm text-muted-foreground">
+                <li>{t("tip_compose")}</li>
+                <li>{t("tip_shortcuts")}</li>
+                <li>{t("tip_sidebar")}</li>
+                <li>{t("tip_settings")}</li>
+              </ul>
+            </div>
+          </div>
+          <button
+            onClick={dismiss}
+            className="flex-shrink-0 p-1 rounded hover:bg-muted transition-colors"
+            aria-label={t("dismiss")}
+          >
+            <X className="w-4 h-4 text-muted-foreground" />
+          </button>
+        </div>
+        <div className="mt-3 flex justify-end">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={dismiss}
+            className="text-xs"
+          >
+            {t("got_it")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}