create-eziwiki 0.1.0

package/template/components/layout/Sidebar.tsx

@@ -0,0 +1,376 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { ChevronRight, ChevronsLeft, ChevronsRight, Search, Share2 } from 'lucide-react';
+import { NavigationItem } from '@/lib/payload/types';
+import { useTabStore } from '@/lib/store/tabStore';
+import { ThemeToggle } from '@/components/ThemeToggle';
+import { useUrlMap } from '@/components/providers/UrlMapProvider';
+import { SearchTrigger } from '@/components/search/SearchTrigger';
+import { useSearchStore } from '@/lib/store/searchStore';
+import { filterHiddenItems } from '@/lib/navigation/builder';
+
+/**
+ * Props for the Sidebar component
+ */
+interface SidebarProps {
+  /** Array of top-level navigation items */
+  navigation: NavigationItem[];
+}
+
+/**
+ * Props for the NavigationItemComponent
+ */
+interface NavigationItemComponentProps {
+  /** Navigation item to render */
+  item: NavigationItem;
+  /** Nesting level for indentation (0 = top level) */
+  level: number;
+  /** Array of booleans indicating which levels should show vertical lines */
+  parentLines?: boolean[];
+  /** Background color inherited from parent */
+  backgroundColor?: string;
+}
+
+/**
+ * Calculate luminance of a color to determine if it's light or dark
+ * Returns true if the color is light (needs dark text)
+ */
+function isLightColor(hexColor: string): boolean {
+  const hex = hexColor.replace('#', '');
+
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+  return luminance > 0.5;
+}
+
+/**
+ * Renders a single navigation item with support for nested children.
+ * Items with children can be expanded/collapsed. Items with paths are
+ * rendered as links and highlighted when active.
+ *
+ * @param props - Component props
+ * @param props.item - Navigation item to render
+ * @param props.level - Nesting depth for indentation
+ * @param props.isLast - Whether this is the last item in its parent's children
+ * @param props.parentLines - Array indicating which levels should show vertical lines
+ */
+function NavigationItemComponent({
+  item,
+  level,
+  parentLines = [],
+  backgroundColor,
+}: NavigationItemComponentProps) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const router = useRouter();
+  const { href: urlFor } = useUrlMap();
+  const { activeTabId, tabs } = useTabStore();
+  const hasChildren = item.children && item.children.length > 0;
+
+  const bgColor = item.color || backgroundColor;
+
+  const isLight = bgColor ? isLightColor(bgColor) : true;
+
+  const textColor = isLight ? 'rgb(55, 65, 81)' : 'rgb(243, 244, 246)'; // gray-700 : gray-100
+  const lineColor = isLight ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.3)';
+
+  const getBgStyle = (isTopLevel: boolean) => {
+    if (!bgColor) return undefined;
+
+    return {
+      backgroundColor: bgColor,
+      ...(isTopLevel && { padding: '4px', paddingBottom: '8px', borderRadius: '6px' }),
+    };
+  };
+
+  const activeTab = tabs.find((tab) => tab.id === activeTabId);
+  const activeTabPath = activeTab?.path || '';
+
+  const isActive = item.path === activeTabPath;
+
+  const handleToggle = (e: React.MouseEvent) => {
+    if (hasChildren) {
+      e.preventDefault();
+      setIsExpanded(!isExpanded);
+    }
+  };
+
+  const handleLinkClick = (e: React.MouseEvent) => {
+    if (item.path) {
+      e.preventDefault();
+      const { tabs, addTab: storeAddTab, navigateInHistory } = useTabStore.getState();
+
+      if (activeTabId) {
+        navigateInHistory(activeTabId, item.path, item.name);
+      } else if (tabs.length === 0) {
+        // No tabs at all, create a new one
+        storeAddTab({ title: item.name, path: item.path });
+      } else if (tabs.length > 0) {
+        // Tabs exist but no active tab, update the first tab
+        const firstTab = tabs[0];
+        navigateInHistory(firstTab.id, item.path, item.name);
+      }
+
+      router.replace(urlFor(item.path));
+    }
+  };
+
+  return (
+    <div className="relative" style={level === 0 ? getBgStyle(true) : undefined}>
+      <div className="flex items-center relative" style={level > 0 ? getBgStyle(false) : undefined}>
+        {level > 0 && (
+          <div className="absolute left-0 top-0 bottom-0 flex">
+            {parentLines.map((showLine, idx) => (
+              <div key={idx} className="relative" style={{ width: '20px' }}>
+                {showLine && (
+                  <div
+                    className={`absolute left-1/2 top-0 bottom-0 w-px ${!bgColor ? 'bg-gray-300 dark:bg-gray-700' : ''}`}
+                    style={{ backgroundColor: bgColor ? lineColor : undefined }}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div
+          className="flex items-center"
+          style={{ marginLeft: level > 0 ? `${parentLines.length * 20}px` : '0' }}
+        >
+          {hasChildren && (
+            <button
+              onClick={handleToggle}
+              className={`mr-1 p-1 rounded transition-colors touch-manipulation flex-shrink-0 ${
+                !bgColor
+                  ? 'text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 hover:bg-black/5 dark:hover:bg-white/10'
+                  : ''
+              }`}
+              style={bgColor ? { color: textColor } : undefined}
+              // The button is a bare chevron, so it needs a name of its own —
+              // and it has to name the section, or a screen reader announces
+              // one indistinguishable "Expand" per section.
+              aria-label={`${isExpanded ? 'Collapse' : 'Expand'} ${item.name}`}
+              aria-expanded={isExpanded}
+            >
+              <ChevronRight
+                className={`w-4 h-4 transition-transform duration-[120ms] ${isExpanded ? 'rotate-90' : ''}`}
+                style={{ transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)' }}
+              />
+            </button>
+          )}
+          {item.path ? (
+            <Link
+              href={urlFor(item.path)}
+              onClick={handleLinkClick}
+              className={`flex-1 px-2 py-1 rounded-md text-sm transition-colors touch-manipulation ${
+                isActive
+                  ? 'bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100 font-medium'
+                  : !bgColor
+                    ? 'text-gray-600 dark:text-gray-300 hover:bg-black/5 dark:hover:bg-white/10 active:bg-black/10 dark:active:bg-white/20'
+                    : ''
+              } ${!hasChildren ? 'ml-5' : ''}`}
+              style={bgColor && !isActive ? { color: textColor } : undefined}
+            >
+              {item.icon && <span className="mr-2">{item.icon}</span>}
+              {item.name}
+            </Link>
+          ) : (
+            <div
+              className={`flex-1 px-2 py-1 text-sm font-semibold ${
+                !bgColor ? 'text-gray-900 dark:text-gray-100' : ''
+              } ${!hasChildren ? 'ml-5' : ''}`}
+              style={bgColor ? { color: textColor } : undefined}
+            >
+              {item.icon && <span className="mr-2">{item.icon}</span>}
+              {item.name}
+            </div>
+          )}
+        </div>
+      </div>
+      {hasChildren && (
+        <div
+          className="overflow-hidden transition-all duration-[120ms]"
+          style={{
+            maxHeight: isExpanded ? '1000px' : '0',
+            transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            ...getBgStyle(false),
+          }}
+        >
+          {item.children!.map((child, index) => {
+            const newParentLines = [...parentLines, true];
+
+            return (
+              <NavigationItemComponent
+                key={`${child.name}-${index}`}
+                item={child}
+                level={level + 1}
+                parentLines={newParentLines}
+                backgroundColor={bgColor}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Desktop sidebar component displaying hierarchical navigation
+ *
+ * Renders a fixed sidebar on the left side of the page with the full
+ * navigation tree. Supports unlimited nesting with expand/collapse
+ * functionality. Automatically highlights the active page.
+ *
+ * Hidden on mobile viewports (< 768px), where the MobileMenu component
+ * is used instead.
+ *
+ * @param props - Component props
+ * @param props.navigation - Array of top-level navigation items to display
+ *
+ */
+export function Sidebar({ navigation }: SidebarProps) {
+  const { sidebarWidth, sidebarCollapsed, setSidebarWidth, setSidebarCollapsed } = useTabStore();
+
+  const visibleNavigation = filterHiddenItems(navigation);
+
+  const openSearch = useSearchStore((state) => state.open);
+  const sidebarRef = useRef<HTMLDivElement>(null);
+  const [isResizing, setIsResizing] = useState(false);
+
+  const MIN_WIDTH = 200;
+  const MAX_WIDTH = 600;
+  const COLLAPSE_THRESHOLD = 150; // Auto-collapse when dragged below this width
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isResizing) return;
+
+      const newWidth = e.clientX;
+
+      if (newWidth < COLLAPSE_THRESHOLD) {
+        setSidebarCollapsed(true);
+        setIsResizing(false);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        return;
+      }
+
+      if (newWidth >= MIN_WIDTH && newWidth <= MAX_WIDTH) {
+        setSidebarWidth(newWidth);
+        setSidebarCollapsed(false);
+      }
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+
+    if (isResizing) {
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+  }, [isResizing, setSidebarWidth, setSidebarCollapsed]);
+
+  const handleToggle = () => {
+    setSidebarCollapsed(!sidebarCollapsed);
+  };
+
+  const handleResizeStart = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsResizing(true);
+  };
+
+  return (
+    <aside
+      ref={sidebarRef}
+      className="hidden md:block h-screen sticky top-0 bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 overflow-y-auto relative"
+      style={{
+        width: sidebarCollapsed ? '64px' : `${sidebarWidth}px`,
+        transition: isResizing ? 'none' : 'width 0.3s ease',
+      }}
+    >
+      <div className="flex items-center gap-2 px-2 py-1 border-b border-gray-200 dark:border-gray-800">
+        {!sidebarCollapsed ? (
+          <>
+            <SearchTrigger className="min-w-0 flex-1" />
+            <ThemeToggle className="w-4 h-4" />
+            <button
+              onClick={handleToggle}
+              className="p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-md transition-colors flex-shrink-0"
+              aria-label="Collapse sidebar"
+              title="Collapse sidebar"
+            >
+              <ChevronsLeft className="w-4 h-4" />
+            </button>
+          </>
+        ) : (
+          <div className="mx-auto flex flex-col items-center gap-1">
+            <button
+              onClick={openSearch}
+              className="rounded-md p-2 text-gray-600 transition-colors hover:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-800"
+              aria-label="Search documentation"
+              title="Search documentation"
+            >
+              <Search className="h-4 w-4" />
+            </button>
+            <button
+              onClick={handleToggle}
+              className="rounded-md p-2 text-gray-600 transition-colors hover:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-800"
+              aria-label="Expand sidebar"
+              title="Expand sidebar"
+            >
+              <ChevronsRight className="h-4 w-4" />
+            </button>
+          </div>
+        )}
+      </div>
+
+      {!sidebarCollapsed && (
+        <nav className="p-2 space-y-1">
+          {visibleNavigation.map((item, index) => (
+            <div key={`${item.name}-${index}`} className="rounded-md overflow-hidden">
+              <NavigationItemComponent item={item} level={0} parentLines={[]} />
+            </div>
+          ))}
+
+          <Link
+            href="/graph"
+            className="mt-2 flex items-center gap-2 rounded-md px-2 py-1 text-sm text-gray-600 transition-colors hover:bg-black/5 dark:text-gray-400 dark:hover:bg-white/10"
+          >
+            <Share2 className="h-4 w-4 flex-shrink-0" />
+            Graph
+          </Link>
+        </nav>
+      )}
+
+      {!sidebarCollapsed && (
+        <div
+          className="absolute top-0 right-0 w-1 h-full bg-transparent hover:bg-blue-500 transition-colors cursor-col-resize z-50"
+          onMouseDown={handleResizeStart}
+          style={{
+            right: '-2px',
+            width: '5px',
+          }}
+        />
+      )}
+    </aside>
+  );
+}

package/template/components/layout/TabBar.tsx

@@ -0,0 +1,312 @@
+'use client';
+
+import React, { useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useTabStore } from '@/lib/store/tabStore';
+import { TabBarSkeleton } from './TabBarSkeleton';
+import { useUrlMap } from '@/components/providers/UrlMapProvider';
+
+export function TabBar() {
+  const router = useRouter();
+  const { href: urlFor } = useUrlMap();
+  const {
+    tabs,
+    activeTabId,
+    addTab,
+    setActiveTab,
+    removeTab,
+    closeOtherTabs,
+    closeTabsToRight,
+    reorderTabs,
+    hasHydrated,
+  } = useTabStore();
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; tabId: string } | null>(
+    null,
+  );
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+  const [dropPosition, setDropPosition] = useState<'before' | 'after' | null>(null);
+  const [dragPosition, setDragPosition] = useState<{ x: number; y: number } | null>(null);
+  const tabBarRef = useRef<HTMLDivElement>(null);
+
+  const handleNewTab = () => {
+    addTab({ title: 'New Tab', path: '' });
+    router.replace('/');
+  };
+
+  const handleTabClick = (tabId: string, path: string) => {
+    setActiveTab(tabId);
+
+    router.replace(path ? urlFor(path) : '/');
+  };
+
+  const closeTab = (tabId: string) => {
+    const wasClosingActiveTab = tabId === activeTabId;
+    const remainingTabs = tabs.filter((t) => t.id !== tabId);
+
+    if (remainingTabs.length === 0) {
+      removeTab(tabId);
+      addTab({ title: 'New Tab', path: '' });
+
+      router.replace('/');
+    } else {
+      removeTab(tabId);
+
+      if (wasClosingActiveTab && remainingTabs.length > 0) {
+        const index = tabs.findIndex((t) => t.id === tabId);
+        const newActiveTab = remainingTabs[Math.min(index, remainingTabs.length - 1)];
+
+        if (newActiveTab) {
+          router.replace(newActiveTab.path ? urlFor(newActiveTab.path) : '/');
+        }
+      }
+    }
+  };
+
+  const handleTabClose = (e: React.MouseEvent, tabId: string) => {
+    e.stopPropagation();
+    closeTab(tabId);
+  };
+
+  const handleContextMenu = (e: React.MouseEvent, tabId: string) => {
+    e.preventDefault();
+    setContextMenu({ x: e.clientX, y: e.clientY, tabId });
+  };
+
+  const handleCloseContextMenu = () => {
+    setContextMenu(null);
+  };
+
+  const handleDragStart = (e: React.DragEvent, index: number) => {
+    setDraggedIndex(index);
+    setDragPosition({ x: e.clientX, y: e.clientY });
+    e.dataTransfer.effectAllowed = 'move';
+    // Create a custom drag image that's invisible
+    const img = new Image();
+    img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+    e.dataTransfer.setDragImage(img, 0, 0);
+  };
+
+  const handleDrag = (e: React.DragEvent) => {
+    if (e.clientX !== 0 && e.clientY !== 0) {
+      setDragPosition({ x: e.clientX, y: e.clientY });
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+
+    if (draggedIndex === null || draggedIndex === index) {
+      setDragOverIndex(null);
+      setDropPosition(null);
+      return;
+    }
+
+    const rect = e.currentTarget.getBoundingClientRect();
+    const midPoint = rect.left + rect.width / 2;
+    const position = e.clientX < midPoint ? 'before' : 'after';
+
+    setDragOverIndex(index);
+    setDropPosition(position);
+  };
+
+  const handleDragLeave = () => {
+    setDragOverIndex(null);
+    setDropPosition(null);
+  };
+
+  const handleDrop = (e: React.DragEvent, dropIndex: number) => {
+    e.preventDefault();
+
+    if (draggedIndex === null || draggedIndex === dropIndex) {
+      setDraggedIndex(null);
+      setDragOverIndex(null);
+      setDropPosition(null);
+      setDragPosition(null);
+      return;
+    }
+
+    let targetIndex = dropIndex;
+
+    if (dropPosition === 'after') {
+      targetIndex = dropIndex + 1;
+    }
+
+    if (draggedIndex < targetIndex) {
+      targetIndex -= 1;
+    }
+
+    reorderTabs(draggedIndex, targetIndex);
+    setDraggedIndex(null);
+    setDragOverIndex(null);
+    setDropPosition(null);
+    setDragPosition(null);
+  };
+
+  const handleDragEnd = () => {
+    setDraggedIndex(null);
+    setDragOverIndex(null);
+    setDropPosition(null);
+    setDragPosition(null);
+  };
+
+  React.useEffect(() => {
+    if (contextMenu) {
+      document.addEventListener('click', handleCloseContextMenu);
+      return () => document.removeEventListener('click', handleCloseContextMenu);
+    }
+  }, [contextMenu]);
+
+  // Show skeleton while hydrating
+  if (!hasHydrated) {
+    return <TabBarSkeleton />;
+  }
+
+  return (
+    <div
+      ref={tabBarRef}
+      className="flex items-center gap-1 bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 overflow-x-auto px-2 py-1 h-9 md:h-auto"
+      style={{ scrollbarWidth: 'thin' }}
+    >
+      {tabs.map((tab, index) => {
+        const isActive = tab.id === activeTabId;
+        const isDragging = draggedIndex === index;
+        const showDropIndicator = dragOverIndex === index && !isDragging;
+
+        return (
+          <div key={tab.id} className="relative flex items-center">
+            {showDropIndicator && dropPosition === 'before' && (
+              <div className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1 w-0.5 bg-blue-500 rounded-full z-10 shadow-lg shadow-blue-500/50" />
+            )}
+
+            <div
+              draggable
+              onDragStart={(e) => handleDragStart(e, index)}
+              onDrag={handleDrag}
+              onDragOver={(e) => handleDragOver(e, index)}
+              onDragLeave={handleDragLeave}
+              onDrop={(e) => handleDrop(e, index)}
+              onDragEnd={handleDragEnd}
+              onClick={() => handleTabClick(tab.id, tab.path)}
+              onContextMenu={(e) => handleContextMenu(e, tab.id)}
+              style={{
+                cursor: isDragging ? 'grabbing' : 'grab',
+              }}
+              className={`
+                group flex items-center gap-3 px-3 py-1.5 rounded-md
+                transition-all duration-150 w-[180px] flex-shrink-0 relative h-8 md:h-auto
+                ${
+                  isActive
+                    ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
+                    : 'bg-gray-50 dark:bg-gray-800/50 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
+                }
+                ${isDragging ? 'opacity-20' : 'opacity-100'}
+              `}
+            >
+              <span className="flex-1 truncate text-sm font-medium min-w-0 pointer-events-none select-none pr-2">
+                {tab.title}
+              </span>
+              <button
+                onClick={(e) => handleTabClose(e, tab.id)}
+                className={`
+                  flex-shrink-0 w-5 h-5 min-w-[20px] min-h-[20px] flex items-center justify-center rounded hover:bg-gray-200 dark:hover:bg-gray-600
+                  transition-opacity
+                  ${isActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}
+                `}
+                aria-label="Close tab"
+              >
+                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2.5}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
+
+            {showDropIndicator && dropPosition === 'after' && (
+              <div className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1 w-0.5 bg-blue-500 rounded-full z-10 shadow-lg shadow-blue-500/50" />
+            )}
+          </div>
+        );
+      })}
+
+      {draggedIndex !== null && dragPosition && (
+        <div
+          className="fixed pointer-events-none z-50"
+          style={{
+            left: dragPosition.x,
+            top: dragPosition.y,
+            transform: 'translate(-50%, -50%)',
+          }}
+        >
+          <div
+            className={`
+              flex items-center gap-2 px-3 py-1.5 rounded-md w-[180px]
+              shadow-2xl scale-105 opacity-80
+              ${
+                tabs[draggedIndex]?.id === activeTabId
+                  ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
+                  : 'bg-gray-50 dark:bg-gray-800/50 text-gray-600 dark:text-gray-400'
+              }
+            `}
+          >
+            <span className="flex-1 truncate text-sm font-medium min-w-0 select-none">
+              {tabs[draggedIndex]?.title}
+            </span>
+            <div className="flex-shrink-0 w-4 h-4" />
+          </div>
+        </div>
+      )}
+
+      <button
+        onClick={handleNewTab}
+        className="flex-shrink-0 p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors"
+        aria-label="New tab"
+        title="New tab"
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+        </svg>
+      </button>
+
+      {contextMenu && (
+        <div
+          className="fixed z-50 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg py-1 min-w-[160px]"
+          style={{ left: contextMenu.x, top: contextMenu.y }}
+        >
+          <button
+            onClick={() => {
+              closeTab(contextMenu.tabId);
+              handleCloseContextMenu();
+            }}
+            className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+          >
+            Close
+          </button>
+          <button
+            onClick={() => {
+              closeOtherTabs(contextMenu.tabId);
+              handleCloseContextMenu();
+            }}
+            className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+          >
+            Close Others
+          </button>
+          <button
+            onClick={() => {
+              closeTabsToRight(contextMenu.tabId);
+              handleCloseContextMenu();
+            }}
+            className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+          >
+            Close to the Right
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/template/components/layout/TabBarSkeleton.tsx

@@ -0,0 +1,12 @@
+export function TabBarSkeleton() {
+  return (
+    <div className="flex items-center gap-1 bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 overflow-x-auto px-2 py-1">
+      <div className="flex items-center gap-2 px-3 py-1.5 rounded-md w-[180px] flex-shrink-0 bg-gray-50 dark:bg-gray-800/50 animate-pulse">
+        <div className="flex-1 h-4 bg-gray-300 dark:bg-gray-700 rounded" />
+        <div className="w-3.5 h-3.5 bg-gray-300 dark:bg-gray-700 rounded" />
+      </div>
+
+      <div className="flex-shrink-0 p-2 w-8 h-8 bg-gray-200 dark:bg-gray-700 rounded-md animate-pulse" />
+    </div>
+  );
+}