Linus Rath
cf02f587de
Resizable Columns - Add ResizeHandle component with mouse drag, keyboard (Arrow keys), and double-click to reset to default width - Add sidebarWidth/emailListWidth to ui-store with clamping + persistence - Wire resize handles between sidebar/email-list panels on desktop Navigation Rail Overhaul - Move StorageQuotaCircle, push-status, sign-out from Sidebar to NavigationRail - Interactive SVG ring with popover breakdown (used/free/total) - Sidebar collapse state lifted to ui-store - Show total email count per mailbox alongside unread badge Email Multi-Selection & Drag-and-Drop - Ctrl+Click (toggle) and Shift+Click (range) on all list items - Add selectRangeEmails and lastSelectedEmailId to email-store - Enable drag-and-drop on thread items and thread headers - useEmailDrag accepts optional threadEmails for full-thread drag Email Viewer Layout - Remove card wrapper for cleaner full-width reading - Always render HTML body when available - Adjust skeleton loader to match flat layout Modal & UI Polish - Standardise backdrops, close buttons, padding, border-radius, transitions - Migrate template-string classNames to cn() in settings - Unify focus-ring token to ring-ring on form controls i18n - Add storage_used/free/total keys to all 8 locales Dev Mock JMAP Server (new, gated by DEV_MOCK_JMAP=true) - Session, Mailbox/Email/Thread/Identity CRUD, back-references, upload - GET /download with Content-Disposition, GET /eventsource SSE Tests (46 new) - ui-store (13), email-selection (10), resize-handle (9), mock-server (14)
92 lines
2.8 KiB
TypeScript
92 lines
2.8 KiB
TypeScript
"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.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground"
|
|
aria-label={t("dismiss")}
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</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>
|
|
);
|
|
}
|