@goplusvn/core 0.1.0 → 0.1.1

package/src/ui/layout/notification-dropdown.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import Link from "next/link";
+import { Bell } from "lucide-react";
+
+import type { DictionaryType } from "../../hooks";
+
+import { cn, formatDistance, formatUnreadCount } from "../../utils";
+
+import { Badge, Button, buttonVariants, Card, CardFooter } from "../index";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  DynamicIcon,
+  ScrollArea,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "../primitives/client";
+
+interface NotificationItem {
+  id: string;
+  url: string;
+  iconName: string;
+  content: string;
+  date: string | Date;
+  isRead: boolean;
+}
+
+interface NotificationDropdownProps {
+  dictionary: DictionaryType;
+  notifications?: NotificationItem[];
+  unreadCount?: number;
+}
+
+export function NotificationDropdown({
+  dictionary,
+  notifications = [],
+  unreadCount = 0,
+}: NotificationDropdownProps) {
+  const displayCount = formatUnreadCount(unreadCount);
+
+  return (
+    <Popover modal>
+      <Tooltip>
+        <PopoverTrigger asChild>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="relative"
+            >
+              <Bell className="size-4" />
+              <span className="sr-only">Notification</span>
+              {!!unreadCount && (
+                <Badge
+                  className="absolute -top-1 -end-1 h-4 max-w-8 flex justify-center"
+                  aria-live="polite"
+                  aria-atomic="true"
+                  role="status"
+                  aria-label={`${displayCount} unread`}
+                >
+                  {displayCount}
+                </Badge>
+              )}
+            </Button>
+          </TooltipTrigger>
+        </PopoverTrigger>
+        <TooltipContent>Notifications</TooltipContent>
+      </Tooltip>
+      <PopoverContent className="w-[380px] p-0">
+        <Card className="border-0 shadow-none">
+          <div className="flex items-center justify-between border-b border-border p-3">
+            <h3 className="text-sm font-semibold">
+              {dictionary.navigation.notifications.notifications}
+            </h3>
+            <Button variant="link" className="text-primary h-auto p-0">
+              {dictionary.navigation.notifications.dismissAll}
+            </Button>
+          </div>
+          <ScrollArea className="max-h-[300px]">
+            <ul>
+              {notifications.map((notification) => (
+                <li key={notification.id}>
+                  <Link
+                    href={notification.url}
+                    className="flex items-center gap-2 py-4 px-6 hover:bg-accent hover:text-accent-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
+                  >
+                    <Badge className="h-10 w-10 flex items-center justify-center">
+                      <DynamicIcon
+                        name={notification.iconName as any}
+                        className="h-5 w-5"
+                      />
+                    </Badge>
+                    <div className="flex-1 w-0">
+                      <p className="text-sm break-all truncate">
+                        {notification.content}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {formatDistance(notification.date)}
+                      </p>
+                    </div>
+                    {!notification.isRead && (
+                      <div className="h-2 w-2 rounded-full bg-primary" />
+                    )}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </ScrollArea>
+          <CardFooter className="justify-center border-t border-border p-0 min-h-12 flex items-center">
+            <Link
+              href=""
+              className={cn(
+                buttonVariants({ variant: "link" }),
+                "text-primary text-center",
+              )}
+            >
+              {dictionary.navigation.notifications.seeAllNotifications}
+            </Link>
+          </CardFooter>
+        </Card>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/ui/layout/page-tabs.tsx

@@ -0,0 +1,306 @@
+"use client";
+
+import { useState } from "react";
+import { X, MoreHorizontal, Loader2, Pin } from "lucide-react";
+import { useParams, useRouter } from "next/navigation";
+import type { DictionaryType } from "../../hooks";
+import type { LocaleType } from "../../types";
+
+import { cn } from "../../utils";
+import { Button, Badge } from "../index";
+import {
+  DynamicIcon,
+  ScrollArea,
+  ScrollBar,
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "../primitives/client";
+
+import { useTabNavigation } from "./tab-navigation-provider";
+import { useRouteCache } from "./route-cache";
+
+interface PageTabsProps {
+  dictionary?: DictionaryType;
+  className?: string;
+  variant?: "default" | "header";
+}
+
+export function PageTabs({
+  dictionary,
+  className,
+  variant = "default",
+}: PageTabsProps) {
+  const {
+    tabs,
+    activeTabId,
+    removeTab,
+    setActiveTab,
+    removeOtherTabs,
+    removeTabsToRight,
+    clearTabs,
+  } = useTabNavigation();
+  const { reloadTab } = useRouteCache();
+  const params = useParams();
+  const router = useRouter();
+  const locale = params?.lang as LocaleType | undefined;
+  const [contextMenuTabId, setContextMenuTabId] = useState<string | null>(null);
+
+  // Don't render if no tabs
+  if (tabs.length === 0) {
+    return null;
+  }
+
+  const handleTabClick = (tabId: string) => {
+    setActiveTab(tabId);
+  };
+
+  const handleReloadTab = (path: string) => {
+    reloadTab(path);
+    router.refresh();
+  };
+
+  const handleCloseTab = (e: React.MouseEvent, tabId: string) => {
+    e.stopPropagation();
+    removeTab(tabId);
+  };
+
+  const handleContextMenu = (tabId: string) => {
+    setContextMenuTabId(tabId);
+  };
+
+  // Sort tabs: pinned first, then by creation time
+  const sortedTabs = [...tabs].sort((a, b) => {
+    if (a.isPinned && !b.isPinned) return -1;
+    if (!a.isPinned && b.isPinned) return 1;
+    return a.createdAt - b.createdAt;
+  });
+
+  const currentTabIndex = sortedTabs.findIndex(
+    (tab) => tab.id === contextMenuTabId,
+  );
+  const hasTabsToRight =
+    currentTabIndex >= 0 && currentTabIndex < sortedTabs.length - 1;
+  const hasOtherTabs = sortedTabs.length > 1;
+
+  // Generate unique gradient background for each tab based on path
+  const getTabBackgroundColor = (path: string, isActive: boolean) => {
+    if (isActive) return "bg-background";
+
+    // Generate consistent hash from path
+    const normalizedPath = path.replace(/^\/[a-z]{2}(\/|$)/, "/");
+    const hash = normalizedPath.split("").reduce((acc, char) => {
+      return (acc << 5) - acc + char.charCodeAt(0);
+    }, 0);
+
+    // Refined gradient palette - darker and more visible (using dark theme colors for both modes)
+    const gradients = [
+      "bg-gradient-to-r from-slate-700 to-slate-600",
+      "bg-gradient-to-r from-zinc-700 to-zinc-600",
+      "bg-gradient-to-r from-stone-700 to-stone-600",
+      "bg-gradient-to-r from-neutral-700 to-neutral-600",
+      "bg-gradient-to-r from-blue-700 to-blue-600",
+      "bg-gradient-to-r from-indigo-700 to-indigo-600",
+      "bg-gradient-to-r from-purple-700 to-purple-600",
+      "bg-gradient-to-r from-violet-700 to-violet-600",
+      "bg-gradient-to-r from-fuchsia-700 to-fuchsia-600",
+      "bg-gradient-to-r from-pink-700 to-pink-600",
+      "bg-gradient-to-r from-rose-700 to-rose-600",
+      "bg-gradient-to-r from-red-700 to-red-600",
+      "bg-gradient-to-r from-orange-700 to-orange-600",
+      "bg-gradient-to-r from-amber-700 to-amber-600",
+      "bg-gradient-to-r from-yellow-700 to-yellow-600",
+      "bg-gradient-to-r from-lime-700 to-lime-600",
+      "bg-gradient-to-r from-green-700 to-green-600",
+      "bg-gradient-to-r from-emerald-700 to-emerald-600",
+      "bg-gradient-to-r from-teal-700 to-teal-600",
+      "bg-gradient-to-r from-cyan-700 to-cyan-600",
+      "bg-gradient-to-r from-sky-700 to-sky-600",
+    ];
+
+    // Select gradient based on hash to ensure consistency
+    const gradientIndex = Math.abs(hash) % gradients.length;
+    return gradients[gradientIndex];
+  };
+
+  return (
+    <div className={cn("w-full", variant === "header" && "py-0", className)}>
+      <ScrollArea className={cn("w-full", variant === "header" && "h-8")}>
+        <div
+          className={cn(
+            "flex items-end gap-0 px-2 py-0.5",
+            variant === "header" && "items-center py-0",
+          )}
+        >
+          {sortedTabs.map((tab, index) => {
+            const isActive = tab.id === activeTabId;
+            const isLast = index === sortedTabs.length - 1;
+            return (
+              <ContextMenu
+                key={tab.id}
+                onOpenChange={(open) => !open && setContextMenuTabId(null)}
+              >
+                <ContextMenuTrigger asChild>
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => handleTabClick(tab.id)}
+                    onContextMenu={() => handleContextMenu(tab.id)}
+                    onMouseEnter={() => {
+                      // Prefetch route when hovering over tab
+                      if (!isActive && tab.path) {
+                        router.prefetch(tab.path);
+                      }
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        handleTabClick(tab.id);
+                      }
+                    }}
+                    className={cn(
+                      "group relative flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-all duration-200",
+                      "border border-transparent",
+                      "hover:brightness-105 cursor-pointer",
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                      getTabBackgroundColor(tab.path, isActive),
+                      variant === "default" &&
+                        (isActive
+                          ? "bg-background text-foreground border-b-2 border-primary shadow-sm shadow-primary/10 border-t border-x border-b-0 rounded-t-md -mb-px z-10"
+                          : "text-white hover:text-white border-b border-white/10 rounded-t-md"),
+                      variant === "header" &&
+                        (isActive
+                          ? "bg-background text-foreground border-b-2 border-primary shadow-sm shadow-primary/10 border-t border-x rounded-t-md z-10"
+                          : "text-white hover:text-white border-b border-white/10 rounded-t-md"),
+                      !isLast &&
+                        !isActive &&
+                        variant === "default" &&
+                        "border-r border-white/10",
+                    )}
+                  >
+                    {/* Tab number indicator (for keyboard shortcuts) */}
+                    {index < 9 && (
+                      <span
+                        className={cn(
+                          "text-[10px] font-bold shrink-0 w-3 text-center opacity-50",
+                          isActive && "opacity-70 text-primary",
+                        )}
+                      >
+                        {index + 1}
+                      </span>
+                    )}
+                    {/* Icon or status indicator */}
+                    <div className="flex items-center gap-1 shrink-0">
+                      {tab.isPinned && (
+                        <Pin className="h-3 w-3 text-primary fill-current shrink-0" />
+                      )}
+                      {tab.isLoading ? (
+                        <Loader2 className="h-3 w-3 animate-spin text-primary shrink-0" />
+                      ) : tab.hasUnsavedChanges ? (
+                        <div className="h-1.5 w-1.5 rounded-full bg-warning shrink-0" />
+                      ) : tab.iconName ? (
+                        <DynamicIcon
+                          name={tab.iconName}
+                          className={cn(
+                            "h-3.5 w-3.5 shrink-0 transition-colors",
+                            isActive
+                              ? "text-primary"
+                              : "text-white/70 group-hover:text-white",
+                          )}
+                        />
+                      ) : null}
+                    </div>
+                    <span
+                      className={cn(
+                        "truncate max-w-[150px]",
+                        isActive ? "font-semibold" : "font-medium",
+                      )}
+                    >
+                      {tab.title}
+                    </span>
+                    {tab.badge !== undefined && (
+                      <Badge
+                        variant={isActive ? "default" : "secondary"}
+                        className={cn(
+                          "h-4 min-w-4 px-1.5 text-[10px] font-semibold shrink-0",
+                          isActive &&
+                            "bg-primary/20 text-primary border-primary/30",
+                        )}
+                      >
+                        {typeof tab.badge === "number" && tab.badge > 99
+                          ? "99+"
+                          : tab.badge}
+                      </Badge>
+                    )}
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className={cn(
+                        "h-4 w-4 ml-0.5 opacity-0 group-hover:opacity-100 transition-opacity shrink-0",
+                        "hover:bg-destructive/10 hover:text-destructive",
+                        isActive && "opacity-100",
+                      )}
+                      onClick={(e) => handleCloseTab(e, tab.id)}
+                      aria-label={`Close ${tab.title}`}
+                    >
+                      <X className="h-2.5 w-2.5" />
+                    </Button>
+                  </div>
+                </ContextMenuTrigger>
+                <ContextMenuContent>
+                  <ContextMenuItem onClick={() => handleReloadTab(tab.path)}>
+                    Reload Tab
+                  </ContextMenuItem>
+                  <ContextMenuItem onClick={() => handleTabClick(tab.id)}>
+                    Switch to Tab
+                  </ContextMenuItem>
+                  <ContextMenuItem onClick={() => removeTab(tab.id)}>
+                    Close Tab
+                  </ContextMenuItem>
+                  {hasOtherTabs && (
+                    <>
+                      <ContextMenuSeparator />
+                      <ContextMenuItem onClick={() => removeOtherTabs(tab.id)}>
+                        Close Other Tabs
+                      </ContextMenuItem>
+                      {hasTabsToRight && (
+                        <ContextMenuItem
+                          onClick={() => removeTabsToRight(tab.id)}
+                        >
+                          Close Tabs to the Right
+                        </ContextMenuItem>
+                      )}
+                    </>
+                  )}
+                  {tabs.length > 1 && (
+                    <>
+                      <ContextMenuSeparator />
+                      <ContextMenuItem onClick={() => clearTabs()}>
+                        Close All Tabs
+                      </ContextMenuItem>
+                    </>
+                  )}
+                </ContextMenuContent>
+              </ContextMenu>
+            );
+          })}
+          {sortedTabs.length > 3 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 px-2 text-xs ml-1"
+              onClick={() => clearTabs()}
+              title="Close all tabs"
+            >
+              <MoreHorizontal className="h-3 w-3 mr-1" />
+              Close All
+            </Button>
+          )}
+        </div>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    </div>
+  );
+}

package/src/ui/layout/route-cache.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+} from "react";
+import { usePathname } from "next/navigation";
+import { useTabNavigation } from "./tab-navigation-provider";
+
+interface RouteCacheContextType {
+  reloadTab: (path: string) => void;
+}
+
+const RouteCacheContext = createContext<RouteCacheContextType | undefined>(
+  undefined,
+);
+
+interface CacheEntry {
+  node: React.ReactNode;
+  lastActive: number;
+  path: string;
+}
+
+const CACHE_TIMEOUT = 3 * 60 * 1000; // 3 minutes
+
+export function RouteCacheProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  const { tabs } = useTabNavigation();
+  const [cache, setCache] = useState<Map<string, CacheEntry>>(new Map());
+  // We need a ref to access the latest cache in effects/callbacks without triggering re-renders
+  const cacheRef = useRef<Map<string, CacheEntry>>(new Map());
+
+  // Update ref when state changes
+  useEffect(() => {
+    cacheRef.current = cache;
+  }, [cache]);
+
+  // Function to manually reload a tab
+  const reloadTab = useCallback((path: string) => {
+    setCache((prev) => {
+      const newCache = new Map(prev);
+      newCache.delete(path);
+      return newCache;
+    });
+  }, []);
+
+  // 1. Handle Pathname Change (Add/Update Cache)
+  useEffect(() => {
+    if (!pathname) return;
+
+    setCache((prev) => {
+      const now = Date.now();
+      // Check if we need to update
+      const existing = prev.get(pathname);
+
+      // If exists and was active recently (e.g. < 1s), skip update to avoid spam
+      // But we need to update lastActive.
+      // However, if we just updated it, maybe we don't need to trigger a re-render?
+      // Let's just update if it's NOT in cache, or if we want to refresh the timestamp.
+
+      if (existing) {
+        // If it exists, we only update timestamp.
+        // To avoid re-renders on every render (if this effect runs often),
+        // we could check if timestamp is significantly different?
+        // But this effect only runs on [pathname]. So it runs once per navigation.
+        // This is fine.
+        const newCache = new Map(prev);
+        newCache.set(pathname, {
+          ...existing,
+          lastActive: now,
+        });
+        return newCache;
+      }
+
+      // If not in cache, add it.
+      const newCache = new Map(prev);
+      newCache.set(pathname, {
+        node: children,
+        lastActive: now,
+        path: pathname,
+      });
+      return newCache;
+    });
+  }, [pathname, children]); // Removed 'tabs' dependency
+
+  // 2. Handle Tab Closing (Cleanup)
+  useEffect(() => {
+    // We only want to run this when 'tabs' changes (specifically when a tab is removed)
+    // We can check if any cached path is NOT in tabs (and not current path)
+
+    setCache((prev) => {
+      const tabPaths = new Set(tabs.map((t) => t.path));
+      let hasChanges = false;
+
+      // Check if we need to remove anything
+      for (const key of prev.keys()) {
+        if (key !== pathname && !tabPaths.has(key)) {
+          hasChanges = true;
+          break;
+        }
+      }
+
+      if (!hasChanges) return prev; // Return same reference to avoid re-render
+
+      const newCache = new Map(prev);
+      for (const key of newCache.keys()) {
+        if (key !== pathname && !tabPaths.has(key)) {
+          newCache.delete(key);
+        }
+      }
+      return newCache;
+    });
+  }, [tabs, pathname]);
+
+  // 3. Periodic cleanup for timeouts
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCache((prev) => {
+        const now = Date.now();
+        let hasChanges = false;
+
+        for (const [key, entry] of prev.entries()) {
+          if (key === pathname) continue;
+          if (now - entry.lastActive > CACHE_TIMEOUT) {
+            hasChanges = true;
+            break;
+          }
+        }
+
+        if (!hasChanges) return prev;
+
+        const newCache = new Map(prev);
+        for (const [key, entry] of newCache.entries()) {
+          if (key === pathname) continue;
+          if (now - entry.lastActive > CACHE_TIMEOUT) {
+            newCache.delete(key);
+          }
+        }
+        return newCache;
+      });
+    }, 10000);
+
+    return () => clearInterval(interval);
+  }, [pathname]);
+
+  // Render Logic
+  // We render ALL cached items.
+  // The one matching `pathname` gets the *fresh* `children` if it wasn't cached,
+  // OR the *cached* node if it was.
+  // Actually, the logic in the effect above sets the cache.
+  // Here we just iterate and render.
+
+  // WAIT: The `children` passed to this component is the content of the CURRENT route.
+  // If we want to cache it, we must save it.
+  // But `children` changes on every route change.
+
+  // Correct Approach for Next.js App Router "Keep Alive":
+  // We need to "freeze" the children at the moment they are first mounted for a path.
+
+  // Let's refine the render:
+  // We iterate through the `cache`.
+  // For each entry, we render `entry.node`.
+  // We control visibility with `display: none`.
+
+  // BUT: What if the current page is NOT in the cache yet (first render)?
+  // The effect hasn't run yet.
+  // We should render `children` directly for the current path, and THEN cache it.
+
+  // Let's try a simpler approach for the render loop:
+  const itemsToRender = Array.from(cache.entries());
+
+  // If current path is not in cache, we must render it too (and it will be added to cache by effect)
+  const isCurrentInCache = cache.has(pathname);
+
+  return (
+    <RouteCacheContext.Provider value={{ reloadTab }}>
+      <div className="flex-1 w-full h-full relative">
+        {itemsToRender.map(([path, entry]) => (
+          <div
+            key={path}
+            className="w-full h-full"
+            style={{ display: path === pathname ? "block" : "none" }}
+          >
+            {entry.node}
+          </div>
+        ))}
+
+        {!isCurrentInCache && (
+          <div key={pathname} className="w-full h-full">
+            {children}
+          </div>
+        )}
+      </div>
+    </RouteCacheContext.Provider>
+  );
+}
+
+export function useRouteCache() {
+  const context = useContext(RouteCacheContext);
+  if (!context) {
+    // It's optional, so we can return a dummy if not found, or throw.
+    // Let's return a dummy to avoid breaking if used outside.
+    return { reloadTab: () => {} };
+  }
+  return context;
+}