Merge branch 'main' into feature/scheduled-send

2026-05-20 08:17:46 +02:00
parent 4a3c775b40 d530d9614b
commit 891c3250be
244 changed files with 20839 additions and 3479 deletions
@@ -6,9 +6,10 @@ import { Check, Plus, LogOut, Star, ChevronDown, AlertCircle } from "lucide-reac
 import { useTranslations } from "next-intl";
 import { useAccountStore, type AccountEntry } from "@/stores/account-store";
 import { useAuthStore } from "@/stores/auth-store";
-import { getInitials, getMaxAccounts } from "@/lib/account-utils";
+import { getMaxAccounts } from "@/lib/account-utils";
 import { cn } from "@/lib/utils";
 import { useRouter } from "@/i18n/navigation";
+import { Avatar } from "@/components/ui/avatar";

 interface AccountSwitcherProps {
  /** "rail" = small avatar only (NavigationRail), "expanded" = avatar + name + email (Sidebar) */
@@ -17,17 +18,15 @@ interface AccountSwitcherProps {
 }

 function AccountAvatar({ account, size = "sm" }: { account: AccountEntry; size?: "sm" | "md" }) {
-  const initials = getInitials(account.displayName || account.label, account.email || account.username);
-  const sizeClasses = size === "sm" ? "w-8 h-8 text-xs" : "w-9 h-9 text-sm";
-
  return (
-    <div
-      className={cn("rounded-full flex items-center justify-center text-white font-medium flex-shrink-0", sizeClasses)}
-      style={{ backgroundColor: account.avatarColor }}
-      title={account.label}
-    >
-      {initials}
-    </div>
+    <Avatar
+      name={account.displayName || account.label}
+      email={account.email || account.username}
+      size="sm"
+      className={cn("flex-shrink-0", size === "md" && "w-9 h-9 text-sm")}
+      disableFavicon
+      fallbackColor={account.avatarColor}
+    />
  );
 }

@@ -49,7 +48,6 @@ export function AccountSwitcher({ variant = "rail", className }: AccountSwitcher
  const switchAccount = useAuthStore((s) => s.switchAccount);
  const logout = useAuthStore((s) => s.logout);
  const logoutAll = useAuthStore((s) => s.logoutAll);
-  const primaryIdentity = useAuthStore((s) => s.primaryIdentity);

  const updatePosition = useCallback(() => {
    if (!buttonRef.current) return;
@@ -115,9 +113,11 @@ export function AccountSwitcher({ variant = "rail", className }: AccountSwitcher
    setDefaultAccount(accountId);
  };

-  // Display name for the active account
-  const displayName = primaryIdentity?.name || activeAccount?.displayName || activeAccount?.label || "";
-  const displayEmail = primaryIdentity?.email || activeAccount?.email || activeAccount?.username || "";
+  // Show the account's own identity, not the preferred sending identity -
+  // primaryIdentity can be an alias (e.g. info@korazo.net) that differs from
+  // the actually logged-in account (info@linusrath.de).
+  const displayName = activeAccount?.displayName || activeAccount?.label || "";
+  const displayEmail = activeAccount?.email || activeAccount?.username || "";

  return (
    <>
@@ -20,6 +20,7 @@ import {
  Pencil,
  FolderX,
  RefreshCw,
+  Upload,
 } from "lucide-react";

 interface Position {
@@ -84,6 +85,7 @@ interface MailboxContextMenuProps {
  onCreateFolder?: () => void;
  onRenameFolder?: (mailboxId: string) => void;
  onDeleteFolder?: (mailboxId: string) => void;
+  onImportEmail?: (mailboxId: string) => void;
  onRefresh?: () => void;
 }

@@ -102,6 +104,7 @@ export function MailboxContextMenu({
  onCreateFolder,
  onRenameFolder,
  onDeleteFolder,
+  onImportEmail,
  onRefresh,
 }: MailboxContextMenuProps) {
  const t = useTranslations("mailbox_context_menu");
@@ -149,6 +152,7 @@ export function MailboxContextMenu({
  const canCreateChild = mailbox.myRights?.mayCreateChild !== false;
  const canSetSeen = mailbox.myRights?.maySetSeen !== false;
  const canRemoveItems = mailbox.myRights?.mayRemoveItems !== false;
+  const canAddItems = mailbox.myRights?.mayAddItems !== false;

  const fullPath = getMailboxPath(mailbox, mailboxes);

@@ -190,6 +194,15 @@ export function MailboxContextMenu({

      <ContextMenuSeparator />

+      <ContextMenuItem
+        icon={Upload}
+        label={t("import_email")}
+        onClick={() => handleAction(() => onImportEmail?.(mailbox.id))}
+        disabled={!onImportEmail || !canAddItems}
+      />
+
+      <ContextMenuSeparator />
+
      <ContextMenuItem
        icon={FolderX}
        label={isTrashOrJunk ? t("empty_folder") : t("empty_folder_generic")}
@@ -3,6 +3,7 @@
 import { Menu, ArrowLeft, Plus, Search, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useUIStore } from "@/stores/ui-store";
+import { useIsDesktop } from "@/hooks/use-media-query";
 import { cn } from "@/lib/utils";
 import { useTranslations } from "next-intl";

@@ -25,6 +26,12 @@ export function MobileHeader({
 }: MobileHeaderProps) {
  const t = useTranslations('sidebar');
  const { toggleSidebar, goBack, sidebarOpen } = useUIStore();
+  // Pane-aware: in Pro split mode the viewport is desktop-wide while the
+  // pane is narrow. The Tailwind `lg:hidden` variant alone would never fire
+  // there, so we additionally hide via JS when the surrounding pane is
+  // desktop-sized. Outside of Pro this still returns the viewport value.
+  const isPaneDesktop = useIsDesktop();
+  if (isPaneDesktop) return null;

  const handleLeftAction = () => {
    if (showBack && onBack) {
@@ -40,7 +47,6 @@ export function MobileHeader({
    <header
      className={cn(
        "flex items-center justify-between px-4 h-14 border-b border-border bg-background shrink-0",
-        "lg:hidden", // Only visible on mobile/tablet
        className
      )}
    >
@@ -118,12 +124,13 @@ export function MobileViewerHeader({
  className,
 }: MobileViewerHeaderProps) {
  const t = useTranslations('sidebar');
+  const isPaneDesktop = useIsDesktop();
+  if (isPaneDesktop) return null;

  return (
    <header
      className={cn(
        "flex items-center justify-between px-2 h-14 border-b border-border bg-background shrink-0",
-        "lg:hidden", // Only visible on mobile/tablet
        className
      )}
    >
@@ -17,11 +17,12 @@ import { useAuthStore } from "@/stores/auth-store";
 import { useAccountStore } from "@/stores/account-store";
 import { useUpdateStore, selectHasUpdate } from "@/stores/update-store";
 import { getActiveAccountSlotHeaders } from "@/lib/auth/active-account-slot";
-import { getInitials, getMaxAccounts } from "@/lib/account-utils";
+import { getMaxAccounts } from "@/lib/account-utils";
 import { cn, formatFileSize } from "@/lib/utils";
 import { PluginSlot } from "@/components/plugins/plugin-slot";
 import { KeyboardShortcutsModal } from "@/components/keyboard-shortcuts-modal";
 import { apiFetch } from "@/lib/browser-navigation";
+import { Avatar } from "@/components/ui/avatar";

 interface NavItem {
  id: string;
@@ -44,6 +45,19 @@ interface NavigationRailProps {
  onInlineApp?: (appId: string, url: string, name: string) => void;
  onCloseInlineApp?: () => void;
  activeAppId?: string | null;
+  /**
+   * If provided, intercepts the rail's built-in route navigation. Return
+   * `true` to prevent the underlying `<Link>` from navigating — used by the
+   * Pro interface to open the route as a tab instead. The visual rail is
+   * unchanged.
+   */
+  onNavigate?: (itemId: 'mail' | 'calendar' | 'contacts' | 'files' | 'settings') => boolean | void;
+  /**
+   * When `onNavigate` is in use, this controls which nav item the rail
+   * highlights as active (since the URL alone no longer reflects the
+   * active app).
+   */
+  activeItemId?: 'mail' | 'calendar' | 'contacts' | 'files' | 'settings' | null;
 }

 function StorageQuotaCircle({ quota, usagePercent }: { quota: { used: number; total: number }; usagePercent: number }) {
@@ -159,6 +173,8 @@ export function NavigationRail({
  onInlineApp,
  onCloseInlineApp,
  activeAppId,
+  onNavigate,
+  activeItemId,
 }: NavigationRailProps) {
  const t = useTranslations("sidebar");
  const pathname = usePathname();
@@ -174,6 +190,7 @@ export function NavigationRail({
  const showRailAccountList = useSettingsStore((s) => s.showRailAccountList);
  const sidebarAppsEnabled = usePolicyStore((s) => s.isFeatureEnabled('sidebarAppsEnabled'));
  const filesEnabled = usePolicyStore((s) => s.isFeatureEnabled('filesEnabled'));
+  const contactsEnabled = usePolicyStore((s) => s.isFeatureEnabled('contactsEnabled'));
  const visibleSidebarApps = sidebarAppsEnabled ? sidebarApps : [];
  const inboxUnread = mailboxes.find(m => m.role === "inbox")?.unreadEmails || 0;
  const [isStalwartAdmin, setIsStalwartAdmin] = useState(false);
@@ -253,37 +270,58 @@ export function NavigationRail({
  const navItems: NavItem[] = [
    { id: "mail", icon: Mail, labelKey: "mail", href: "/", badge: inboxUnread },
    { id: "calendar", icon: Calendar, labelKey: "calendar", href: "/calendar", hidden: !supportsCalendar },
-    { id: "contacts", icon: BookUser, labelKey: "contacts", href: "/contacts", hidden: !supportsContacts },
+    { id: "contacts", icon: BookUser, labelKey: "contacts", href: "/contacts", hidden: !supportsContacts || !contactsEnabled },
    { id: "files", icon: HardDrive, labelKey: "files", href: "/files", hidden: !supportsFiles || !filesEnabled },
  ];

-  const isSettingsActive = !activeAppId && pathname.startsWith("/settings");
+  // When the host (e.g. the Pro shell) takes over navigation via `onNavigate`,
+  // it tells us which item is active; otherwise we infer it from the URL.
+  const isSettingsActive = onNavigate
+    ? activeItemId === 'settings'
+    : !activeAppId && pathname.startsWith("/settings");

  const visibleItems = navItems.filter((item) => !item.hidden);

-  const getIsActive = (href: string) => {
+  const getIsActive = (href: string, itemId: string) => {
    if (activeAppId) return false;
+    if (onNavigate) {
+      return activeItemId === itemId;
+    }
    if (href === "/") {
      return pathname === "/" || pathname === "";
    }
    return pathname.startsWith(href);
  };

+  const handleNavClick = (itemId: 'mail' | 'calendar' | 'contacts' | 'files' | 'settings') =>
+    (e: React.MouseEvent) => {
+      if (onNavigate) {
+        const intercepted = onNavigate(itemId);
+        if (intercepted !== false) {
+          e.preventDefault();
+        }
+        return;
+      }
+      if (activeAppId) {
+        onCloseInlineApp?.();
+      }
+    };
+
  if (orientation === "horizontal") {
    return (
      <nav
-        className={cn("flex items-center bg-background border-t border-border shrink-0 overflow-x-auto mobile-scroll-hidden", className)}
+        className={cn("flex items-center bg-background border-t border-border shrink-0 overflow-x-auto mobile-scroll-hidden pb-[calc(env(safe-area-inset-bottom)/2)]", className)}
        role="navigation"
        aria-label={t("nav_label")}
      >
        {visibleItems.map((item) => {
-          const isActive = getIsActive(item.href);
+          const isActive = getIsActive(item.href, item.id);
          const Icon = item.icon;
          return (
            <Link
              key={item.id}
              href={item.href}
-              onClick={activeAppId ? () => onCloseInlineApp?.() : undefined}
+              onClick={handleNavClick(item.id as 'mail' | 'calendar' | 'contacts' | 'files' | 'settings')}
              className={cn(
                "flex flex-col items-center justify-center gap-1 py-2 px-1 min-h-[44px] grow shrink-0 basis-[64px]",
                "transition-colors duration-150",
@@ -373,7 +411,7 @@ export function NavigationRail({
        {/* Settings */}
        <Link
          href="/settings"
-          onClick={activeAppId ? () => onCloseInlineApp?.() : undefined}
+          onClick={handleNavClick('settings')}
          className={cn(
            "flex flex-col items-center justify-center gap-1 py-2 px-1 min-h-[44px] grow shrink-0 basis-[64px]",
            "transition-colors duration-150",
@@ -427,13 +465,13 @@ export function NavigationRail({
        aria-label={t("nav_label")}
      >
        {visibleItems.map((item) => {
-          const isActive = getIsActive(item.href);
+          const isActive = getIsActive(item.href, item.id);
          const Icon = item.icon;
          return (
            <Link
              key={item.id}
              href={item.href}
-              onClick={activeAppId ? () => onCloseInlineApp?.() : undefined}
+              onClick={handleNavClick(item.id as 'mail' | 'calendar' | 'contacts' | 'files' | 'settings')}
              data-tour={`nav-${item.id}`}
              className={cn(
                "relative flex items-center gap-2.5 rounded-md transition-colors duration-150",
@@ -553,7 +591,7 @@ export function NavigationRail({

        <Link
          href="/settings"
-          onClick={activeAppId ? () => onCloseInlineApp?.() : undefined}
+          onClick={handleNavClick('settings')}
          data-tour="nav-settings"
          className={cn(
            "flex items-center justify-center w-10 h-10 rounded-md transition-colors",
@@ -610,7 +648,6 @@ export function NavigationRail({
            <div className="flex flex-col items-center gap-3">
            {accounts.map((account) => {
              const isActive = account.id === activeAccountId;
-              const initials = getInitials(account.displayName || account.label, account.email || account.username);
              return (
                <button
                  key={account.id}
@@ -618,15 +655,20 @@ export function NavigationRail({
                    if (!isActive) switchAccount(account.id);
                  }}
                  className={cn(
-                    "relative flex items-center justify-center w-8 h-8 rounded-full text-white text-[11px] font-medium transition-all flex-shrink-0",
+                    "relative w-8 h-8 rounded-full transition-all flex-shrink-0",
                    isActive
                      ? "ring-2 ring-primary ring-offset-2 ring-offset-background"
                      : "opacity-70 hover:opacity-100"
                  )}
-                  style={{ backgroundColor: account.avatarColor }}
                  title={`${account.displayName || account.label} (${account.email || account.username})`}
                >
-                  {initials}
+                  <Avatar
+                    name={account.displayName || account.label}
+                    email={account.email || account.username}
+                    size="sm"
+                    disableFavicon
+                    fallbackColor={account.avatarColor}
+                  />
                  {isActive && (
                    <span className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-primary flex items-center justify-center">
                      <Check className="w-2 h-2 text-primary-foreground" />
@@ -8,38 +8,46 @@ interface ResizeHandleProps {
  onResize: (delta: number) => void;
  onResizeEnd?: () => void;
  onDoubleClick?: () => void;
+  orientation?: "vertical" | "horizontal";
  className?: string;
 }

 const KEYBOARD_STEP = 10;

-export function ResizeHandle({ onResizeStart, onResize, onResizeEnd, onDoubleClick, className }: ResizeHandleProps) {
+export function ResizeHandle({ onResizeStart, onResize, onResizeEnd, onDoubleClick, orientation = "vertical", className }: ResizeHandleProps) {
  const isDragging = useRef(false);
-  const startX = useRef(0);
+  const startPos = useRef(0);
+  const isHorizontal = orientation === "horizontal";

  const handleMouseDown = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
    isDragging.current = true;
-    startX.current = e.clientX;
-    document.body.style.cursor = "col-resize";
+    startPos.current = isHorizontal ? e.clientY : e.clientX;
+    document.body.style.cursor = isHorizontal ? "row-resize" : "col-resize";
    document.body.style.userSelect = "none";
    onResizeStart?.();
-  }, [onResizeStart]);
+  }, [onResizeStart, isHorizontal]);

  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
    let delta = 0;
-    if (e.key === "ArrowLeft") delta = -KEYBOARD_STEP;
-    else if (e.key === "ArrowRight") delta = KEYBOARD_STEP;
-    else return;
+    if (isHorizontal) {
+      if (e.key === "ArrowUp") delta = -KEYBOARD_STEP;
+      else if (e.key === "ArrowDown") delta = KEYBOARD_STEP;
+      else return;
+    } else {
+      if (e.key === "ArrowLeft") delta = -KEYBOARD_STEP;
+      else if (e.key === "ArrowRight") delta = KEYBOARD_STEP;
+      else return;
+    }
    e.preventDefault();
    onResize(delta);
    onResizeEnd?.();
-  }, [onResize, onResizeEnd]);
+  }, [onResize, onResizeEnd, isHorizontal]);

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!isDragging.current) return;
-      const delta = e.clientX - startX.current;
+      const delta = (isHorizontal ? e.clientY : e.clientX) - startPos.current;
      onResize(delta);
    };

@@ -57,24 +65,25 @@ export function ResizeHandle({ onResizeStart, onResize, onResizeEnd, onDoubleCli
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };
-  }, [onResize, onResizeEnd]);
+  }, [onResize, onResizeEnd, isHorizontal]);

  return (
    <div
      role="separator"
-      aria-orientation="vertical"
+      aria-orientation={isHorizontal ? "horizontal" : "vertical"}
      aria-label="Resize"
      tabIndex={0}
      onMouseDown={handleMouseDown}
      onKeyDown={handleKeyDown}
      onDoubleClick={onDoubleClick}
      className={cn(
-        "w-1 flex-shrink-0 cursor-col-resize hover:bg-primary/30 active:bg-primary/50 transition-colors relative group",
+        "flex-shrink-0 hover:bg-primary/30 active:bg-primary/50 transition-colors relative group",
        "focus-visible:outline-none focus-visible:bg-primary/40 focus-visible:ring-2 focus-visible:ring-primary/50",
+        isHorizontal ? "h-1 cursor-row-resize bg-border" : "w-1 cursor-col-resize",
        className
      )}
    >
-      <div className="absolute inset-y-0 -left-1 -right-1" />
+      <div className={cn("absolute", isHorizontal ? "inset-x-0 -top-1 -bottom-1" : "inset-y-0 -left-1 -right-1")} />
    </div>
  );
 }
@@ -20,6 +20,7 @@ import {
  Folder,
  FolderOpen,
  User,
+  Users,
  Palmtree,
  Settings,
  X,
@@ -28,7 +29,10 @@ import {
  FlaskConical,
  PlayCircle,
  Loader2,
+  AlertTriangle,
+  NotebookPen,
  CalendarClock,
+  BellOff,
 } from "lucide-react";
 import { cn, buildMailboxTree, MailboxNode } from "@/lib/utils";
 import { Mailbox } from "@/lib/jmap/types";
@@ -67,6 +71,7 @@ interface SidebarProps {
  onCreateFolder?: () => void;
  onRenameFolder?: (mailboxId: string) => void;
  onDeleteFolder?: (mailboxId: string) => void;
+  onImportEmail?: (mailboxId: string) => void;
  onRefreshMailboxes?: () => void;
  scheduledTotal?: number;
  className?: string;
@@ -89,6 +94,11 @@ const getIconForMailbox = (role?: string, name?: string, hasChildren?: boolean,
  if (role === "trash" || lowerName.includes("trash") || lowerName.includes("deleted")) return Trash2;
  if (role === "junk" || role === "spam" || lowerName.includes("junk") || lowerName.includes("spam")) return Ban;
  if (role === "archive" || lowerName.includes("archive")) return Archive;
+  if (role === "shared" || lowerName.includes("shared")) return Users;
+  if (role === "important" || lowerName.includes("important")) return AlertTriangle;
+  if (role === "memos" || lowerName.includes("memo")) return NotebookPen;
+  if (role === "scheduled" || lowerName.includes("scheduled")) return CalendarClock;
+  if (role === "snoozed" || lowerName.includes("snoozed")) return BellOff;
  if (lowerName.includes("star") || lowerName.includes("flag")) return Star;

  if (hasChildren) {
@@ -105,6 +115,11 @@ const ROLE_ICON_COLOR: Record<string, string> = {
  trash: "text-muted-foreground",
  junk: "text-red-600/80 dark:text-red-400/80",
  archive: "text-amber-600/80 dark:text-amber-400/80",
+  shared: "text-cyan-600/80 dark:text-cyan-400/80",
+  important: "text-orange-600/80 dark:text-orange-400/80",
+  memos: "text-yellow-600/80 dark:text-yellow-400/80",
+  scheduled: "text-sky-600/80 dark:text-sky-400/80",
+  snoozed: "text-slate-500/80 dark:text-slate-400/80",
 };

 function resolveRoleKey(role?: string, name?: string): string | undefined {
@@ -115,6 +130,11 @@ function resolveRoleKey(role?: string, name?: string): string | undefined {
  if (role === "trash" || lowerName.includes("trash") || lowerName.includes("deleted")) return "trash";
  if (role === "junk" || role === "spam" || lowerName.includes("junk") || lowerName.includes("spam")) return "junk";
  if (role === "archive" || lowerName.includes("archive")) return "archive";
+  if (role === "shared" || lowerName.includes("shared")) return "shared";
+  if (role === "important" || lowerName.includes("important")) return "important";
+  if (role === "memos" || lowerName.includes("memo")) return "memos";
+  if (role === "scheduled" || lowerName.includes("scheduled")) return "scheduled";
+  if (role === "snoozed" || lowerName.includes("snoozed")) return "snoozed";
  return undefined;
 }

@@ -638,6 +658,7 @@ export function Sidebar({
  onCreateFolder,
  onRenameFolder,
  onDeleteFolder,
+  onImportEmail,
  onRefreshMailboxes,
  scheduledTotal = 0,
  className,
@@ -1051,6 +1072,7 @@ export function Sidebar({
        onCreateFolder={onCreateFolder}
        onRenameFolder={onRenameFolder}
        onDeleteFolder={onDeleteFolder}
+        onImportEmail={onImportEmail}
        onRefresh={onRefreshMailboxes}
      />
    </div>