@goplusvn/core 0.1.0 → 0.1.1

package/src/ui/layout/tab-navigation-provider.tsx

@@ -0,0 +1,536 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useReducer,
+  useCallback,
+  useRef,
+} from "react";
+import { usePathname, useRouter } from "next/navigation";
+import type { ReactNode } from "react";
+
+import type { DynamicIconNameType, NavigationType } from "../../types";
+import {
+  findRouteTitle,
+  findRouteIcon,
+  normalizePathname,
+  shouldExcludeFromTabs,
+} from "../../utils";
+
+export interface Tab {
+  id: string;
+  path: string;
+  title: string;
+  createdAt: number;
+  badge?: number | string;
+  isLoading?: boolean;
+  hasUnsavedChanges?: boolean;
+  isPinned?: boolean;
+  iconName?: DynamicIconNameType;
+}
+
+interface TabNavigationState {
+  tabs: Tab[];
+  activeTabId: string | null;
+}
+
+type TabNavigationAction =
+  | {
+      type: "ADD_TAB";
+      payload: { path: string; title: string; iconName?: DynamicIconNameType };
+    }
+  | { type: "REMOVE_TAB"; payload: { id: string } }
+  | { type: "SET_ACTIVE_TAB"; payload: { id: string } }
+  | { type: "LOAD_STATE"; payload: TabNavigationState }
+  | { type: "CLEAR_TABS" }
+  | { type: "REMOVE_OTHER_TABS"; payload: { id: string } }
+  | { type: "REMOVE_TABS_TO_RIGHT"; payload: { id: string } }
+  | { type: "MOVE_TAB"; payload: { fromIndex: number; toIndex: number } };
+
+const STORAGE_KEY = "tab-navigation-state";
+
+function tabNavigationReducer(
+  state: TabNavigationState,
+  action: TabNavigationAction,
+): TabNavigationState {
+  switch (action.type) {
+    case "ADD_TAB": {
+      const { path, title, iconName } = action.payload;
+      const normalizedPath = normalizePathname(path);
+      const tabId = normalizedPath;
+
+      // Check if tab already exists
+      const existingTab = state.tabs.find((tab) => tab.id === tabId);
+      if (existingTab) {
+        return {
+          ...state,
+          activeTabId: tabId,
+        };
+      }
+
+      // Add new tab
+      const newTab: Tab = {
+        id: tabId,
+        path,
+        title,
+        createdAt: Date.now(),
+        iconName,
+      };
+
+      return {
+        tabs: [...state.tabs, newTab],
+        activeTabId: tabId,
+      };
+    }
+
+    case "REMOVE_TAB": {
+      const { id } = action.payload;
+      const filteredTabs = state.tabs.filter((tab) => tab.id !== id);
+
+      // If removing active tab, switch to another tab
+      let newActiveTabId = state.activeTabId;
+      if (id === state.activeTabId) {
+        const currentIndex = state.tabs.findIndex((tab) => tab.id === id);
+        // Try to activate tab to the right, then left, then first available
+        if (currentIndex < filteredTabs.length) {
+          newActiveTabId = filteredTabs[currentIndex]?.id ?? null;
+        } else if (filteredTabs.length > 0) {
+          newActiveTabId = filteredTabs[filteredTabs.length - 1]?.id ?? null;
+        } else {
+          newActiveTabId = null;
+        }
+      }
+
+      return {
+        tabs: filteredTabs,
+        activeTabId: newActiveTabId,
+      };
+    }
+
+    case "SET_ACTIVE_TAB": {
+      const { id } = action.payload;
+      // Only set active if tab exists
+      const tabExists = state.tabs.some((tab) => tab.id === id);
+      return {
+        ...state,
+        activeTabId: tabExists ? id : state.activeTabId,
+      };
+    }
+
+    case "LOAD_STATE": {
+      return action.payload;
+    }
+
+    case "CLEAR_TABS": {
+      return {
+        tabs: [],
+        activeTabId: null,
+      };
+    }
+
+    case "REMOVE_OTHER_TABS": {
+      const { id } = action.payload;
+      const tabToKeep = state.tabs.find((tab) => tab.id === id);
+      if (!tabToKeep) return state;
+
+      return {
+        tabs: [tabToKeep],
+        activeTabId: id,
+      };
+    }
+
+    case "REMOVE_TABS_TO_RIGHT": {
+      const { id } = action.payload;
+      const currentIndex = state.tabs.findIndex((tab) => tab.id === id);
+      if (currentIndex === -1) return state;
+
+      const filteredTabs = state.tabs.slice(0, currentIndex + 1);
+      return {
+        tabs: filteredTabs,
+        activeTabId: state.activeTabId,
+      };
+    }
+
+    case "MOVE_TAB": {
+      const { fromIndex, toIndex } = action.payload;
+      const newTabs = [...state.tabs];
+      const [movedTab] = newTabs.splice(fromIndex, 1);
+      newTabs.splice(toIndex, 0, movedTab);
+
+      return {
+        ...state,
+        tabs: newTabs,
+      };
+    }
+
+    default:
+      return state;
+  }
+}
+
+const initialState: TabNavigationState = {
+  tabs: [],
+  activeTabId: null,
+};
+
+interface TabNavigationContextValue {
+  tabs: Tab[];
+  activeTabId: string | null;
+  addTab: (path: string, title?: string) => void;
+  removeTab: (id: string) => void;
+  setActiveTab: (id: string) => void;
+  clearTabs: () => void;
+  removeOtherTabs: (id: string) => void;
+  removeTabsToRight: (id: string) => void;
+  goToNextTab: () => void;
+  goToPreviousTab: () => void;
+  goToTabByIndex: (index: number) => void;
+  closeAndGoToParent: () => void;
+}
+
+const TabNavigationContext = createContext<
+  TabNavigationContextValue | undefined
+>(undefined);
+
+export function TabNavigationProvider({
+  children,
+  navigations,
+}: {
+  children: ReactNode;
+  navigations: NavigationType[];
+}) {
+  const [state, dispatch] = useReducer(tabNavigationReducer, initialState);
+  const pathname = usePathname();
+  const router = useRouter();
+  const isInitialized = useRef(false);
+
+  // Load state from sessionStorage on mount
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    try {
+      const stored = sessionStorage.getItem(STORAGE_KEY);
+      if (stored) {
+        const parsedState = JSON.parse(stored) as TabNavigationState;
+        dispatch({ type: "LOAD_STATE", payload: parsedState });
+      }
+    } catch (error) {
+      console.error("Failed to load tab navigation state:", error);
+    }
+    isInitialized.current = true;
+  }, []);
+
+  // Save state to sessionStorage whenever it changes
+  useEffect(() => {
+    if (!isInitialized.current) return;
+
+    try {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+    } catch (error) {
+      console.error("Failed to save tab navigation state:", error);
+    }
+  }, [state]);
+
+  // Auto-add tab when pathname changes
+  useEffect(() => {
+    if (!pathname || !isInitialized.current) return;
+
+    // Skip excluded routes
+    if (shouldExcludeFromTabs(pathname)) {
+      return;
+    }
+
+    // Get title and icon from navigation data or use pathname
+    const title = findRouteTitle(pathname, navigations) || "Page";
+    const iconName = findRouteIcon(pathname, navigations) || undefined;
+    const normalizedPath = normalizePathname(pathname);
+
+    // Check if tab already exists
+    const existingTab = state.tabs.find((tab) => tab.id === normalizedPath);
+    if (existingTab) {
+      // Just set as active if not already active
+      if (state.activeTabId !== normalizedPath) {
+        dispatch({ type: "SET_ACTIVE_TAB", payload: { id: normalizedPath } });
+      }
+    } else {
+      // Add new tab
+      dispatch({
+        type: "ADD_TAB",
+        payload: { path: pathname, title, iconName },
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname, navigations]);
+
+  // Prefetch all tab routes when tabs change
+  useEffect(() => {
+    if (!isInitialized.current) return;
+
+    // Prefetch all tab routes in background
+    state.tabs.forEach((tab) => {
+      if (tab.path && tab.id !== state.activeTabId) {
+        router.prefetch(tab.path);
+      }
+    });
+  }, [state.tabs, state.activeTabId, router]);
+
+  const addTab = useCallback(
+    (path: string, title?: string) => {
+      const tabTitle = title || findRouteTitle(path, navigations) || "Page";
+      const iconName = findRouteIcon(path, navigations) || undefined;
+      dispatch({
+        type: "ADD_TAB",
+        payload: { path, title: tabTitle, iconName },
+      });
+    },
+    [navigations],
+  );
+
+  const removeTab = useCallback(
+    (id: string) => {
+      // Check if removing active tab before dispatch
+      const tabToRemove = state.tabs.find((tab) => tab.id === id);
+      const isRemovingActive = tabToRemove?.id === state.activeTabId;
+      const remainingTabs = state.tabs.filter((tab) => tab.id !== id);
+
+      dispatch({ type: "REMOVE_TAB", payload: { id } });
+
+      // Navigate to new active tab or dashboard if removing active tab
+      if (isRemovingActive) {
+        if (remainingTabs.length > 0) {
+          const nextTab = remainingTabs[remainingTabs.length - 1];
+          router.replace(nextTab.path, { scroll: false });
+        } else {
+          // Navigate to dashboard/home
+          const locale = pathname.split("/")[1];
+          router.replace(locale ? `/${locale}` : "/", { scroll: false });
+        }
+      }
+    },
+    [state.tabs, state.activeTabId, router, pathname],
+  );
+
+  const setActiveTab = useCallback(
+    (id: string) => {
+      const tab = state.tabs.find((t) => t.id === id);
+      if (tab) {
+        dispatch({ type: "SET_ACTIVE_TAB", payload: { id } });
+        // Use replace instead of push to avoid adding to history
+        // Use scroll: false to prevent scroll restoration
+        router.replace(tab.path, { scroll: false });
+      }
+    },
+    [state.tabs, router],
+  );
+
+  const clearTabs = useCallback(() => {
+    dispatch({ type: "CLEAR_TABS" });
+  }, []);
+
+  const removeOtherTabs = useCallback(
+    (id: string) => {
+      dispatch({ type: "REMOVE_OTHER_TABS", payload: { id } });
+      const tab = state.tabs.find((t) => t.id === id);
+      if (tab) {
+        router.replace(tab.path, { scroll: false });
+      }
+    },
+    [state.tabs, router],
+  );
+
+  const removeTabsToRight = useCallback((id: string) => {
+    dispatch({ type: "REMOVE_TABS_TO_RIGHT", payload: { id } });
+  }, []);
+
+  const goToNextTab = useCallback(() => {
+    if (state.tabs.length === 0) return;
+    const currentIndex = state.tabs.findIndex(
+      (tab) => tab.id === state.activeTabId,
+    );
+    const nextIndex =
+      currentIndex === -1 ? 0 : (currentIndex + 1) % state.tabs.length;
+    const nextTab = state.tabs[nextIndex];
+    if (nextTab) {
+      setActiveTab(nextTab.id);
+    }
+  }, [state.tabs, state.activeTabId, setActiveTab]);
+
+  const goToPreviousTab = useCallback(() => {
+    if (state.tabs.length === 0) return;
+    const currentIndex = state.tabs.findIndex(
+      (tab) => tab.id === state.activeTabId,
+    );
+    const prevIndex =
+      currentIndex === -1
+        ? state.tabs.length - 1
+        : (currentIndex - 1 + state.tabs.length) % state.tabs.length;
+    const prevTab = state.tabs[prevIndex];
+    if (prevTab) {
+      setActiveTab(prevTab.id);
+    }
+  }, [state.tabs, state.activeTabId, setActiveTab]);
+
+  const goToTabByIndex = useCallback(
+    (index: number) => {
+      if (index >= 0 && index < state.tabs.length) {
+        const tab = state.tabs[index];
+        if (tab) {
+          setActiveTab(tab.id);
+        }
+      }
+    },
+    [state.tabs, setActiveTab],
+  );
+
+  // Close current tab and navigate to parent tab (e.g., from detail page to list page)
+  const closeAndGoToParent = useCallback(() => {
+    const currentTab = state.tabs.find((t) => t.id === state.activeTabId);
+    if (!currentTab) {
+      router.back();
+      return;
+    }
+
+    // Find parent path (e.g., /vi/supplier-quotes/abc -> /vi/supplier-quotes)
+    const pathParts = currentTab.path.split("/");
+    // Remove the last segment (the ID or 'new')
+    const parentPath = pathParts.slice(0, -1).join("/") || "/";
+    const normalizedParent = normalizePathname(parentPath);
+
+    // Find parent tab in existing tabs
+    const parentTab = state.tabs.find((t) => t.id === normalizedParent);
+
+    // Get remaining tabs after removing current
+    const remainingTabs = state.tabs.filter((t) => t.id !== currentTab.id);
+
+    // Remove current tab
+    dispatch({ type: "REMOVE_TAB", payload: { id: currentTab.id } });
+
+    // Navigate to parent tab if exists, otherwise navigate to parent path
+    if (parentTab) {
+      router.replace(parentTab.path, { scroll: false });
+    } else if (remainingTabs.length > 0) {
+      // If no parent tab but there are other tabs, go to the last one
+      const lastTab = remainingTabs[remainingTabs.length - 1];
+      router.replace(lastTab.path, { scroll: false });
+    } else {
+      // No tabs left, navigate to parent path (will create a new tab)
+      router.replace(parentPath, { scroll: false });
+    }
+  }, [state.tabs, state.activeTabId, router]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Don't handle if user is typing in input/textarea
+      const target = e.target as HTMLElement;
+      if (
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable ||
+        target.closest('[role="dialog"]') ||
+        target.closest('[data-slot="command-input"]')
+      ) {
+        return;
+      }
+
+      const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+      const ctrlOrCmd = isMac ? e.metaKey : e.ctrlKey;
+
+      // Ctrl/Cmd + 1-9: Switch to tab by index
+      if (ctrlOrCmd && e.key >= "1" && e.key <= "9") {
+        const index = parseInt(e.key) - 1;
+        if (index < state.tabs.length) {
+          e.preventDefault();
+          goToTabByIndex(index);
+        }
+        return;
+      }
+
+      // Ctrl/Cmd + W: Close current tab
+      if (ctrlOrCmd && e.key === "w") {
+        if (state.activeTabId) {
+          e.preventDefault();
+          removeTab(state.activeTabId);
+        }
+        return;
+      }
+
+      // Ctrl/Cmd + Tab: Next tab
+      if (ctrlOrCmd && e.key === "Tab" && !e.shiftKey) {
+        e.preventDefault();
+        goToNextTab();
+        return;
+      }
+
+      // Ctrl/Cmd + Shift + Tab: Previous tab
+      if (ctrlOrCmd && e.shiftKey && e.key === "Tab") {
+        e.preventDefault();
+        goToPreviousTab();
+        return;
+      }
+
+      // Ctrl/Cmd + Shift + W: Close all tabs except current
+      if (ctrlOrCmd && e.shiftKey && e.key === "w") {
+        if (state.activeTabId && state.tabs.length > 1) {
+          e.preventDefault();
+          removeOtherTabs(state.activeTabId);
+        }
+        return;
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    state.tabs,
+    state.activeTabId,
+    removeTab,
+    goToNextTab,
+    goToPreviousTab,
+    goToTabByIndex,
+    removeOtherTabs,
+  ]);
+
+  return (
+    <TabNavigationContext.Provider
+      value={{
+        tabs: state.tabs,
+        activeTabId: state.activeTabId,
+        addTab,
+        removeTab,
+        setActiveTab,
+        clearTabs,
+        removeOtherTabs,
+        removeTabsToRight,
+        goToNextTab,
+        goToPreviousTab,
+        goToTabByIndex,
+        closeAndGoToParent,
+      }}
+    >
+      {children}
+    </TabNavigationContext.Provider>
+  );
+}
+
+const noopTabNavigation = {
+  tabs: [] as Tab[],
+  activeTabId: null as string | null,
+  addTab: () => {},
+  removeTab: () => {},
+  setActiveTab: () => {},
+  clearTabs: () => {},
+  removeOtherTabs: () => {},
+  removeTabsToRight: () => {},
+  goToNextTab: () => {},
+  goToPreviousTab: () => {},
+  goToTabByIndex: () => {},
+  closeAndGoToParent: () => {},
+};
+
+export function useTabNavigation() {
+  const context = useContext(TabNavigationContext);
+  return context ?? noopTabNavigation;
+}

package/src/ui/layout/toggle-mobile-sidebar.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { PanelLeft } from "lucide-react";
+
+import { Button } from "../index";
+import { useSidebar } from "../primitives/sidebar"; // Import specific hook from primitives
+import { Tooltip, TooltipTrigger, TooltipContent } from "../primitives/client";
+
+export function ToggleMobileSidebar() {
+  const { isMobile, openMobile, setOpenMobile } = useSidebar();
+
+  if (isMobile) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            data-sidebar="trigger"
+            variant="ghost"
+            size="icon"
+            onClick={() => setOpenMobile(!openMobile)}
+            aria-label="Toggle Sidebar"
+          >
+            <PanelLeft className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Toggle Sidebar</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+  return null;
+}