snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Link } from "react-router";
+import { DefaultTabOutline, MoreHorizontalOutline, PinOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Menu } from "@plane/propel/menu";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { cn } from "@plane/utils";
+// local imports
+import type { TNavigationItem } from "./tab-navigation-root";
+import type { TTabPreferences } from "./tab-navigation-utils";
+
+type Props = {
+  overflowItems: TNavigationItem[];
+  isActive: (item: TNavigationItem) => boolean;
+  tabPreferences: TTabPreferences;
+  onToggleDefault: (tabKey: string) => void;
+  onShow: (tabKey: string) => void;
+};
+
+/**
+ * Overflow menu for tab navigation items
+ * Displays items that don't fit in the visible area, with action icons
+ * Shows "Eye" icon for user-hidden items, "Set as default" icon for all items
+ */
+export function TabNavigationOverflowMenu({ overflowItems, isActive, tabPreferences, onToggleDefault, onShow }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <Menu
+      ellipsis
+      buttonClassName="!p-1.5"
+      optionsClassName="min-w-[200px] space-y-1"
+      customButton={
+        <div className="flex items-center justify-center rounded-md p-1 transition-colors hover:bg-layer-1">
+          <MoreHorizontalOutline className="h-4 w-4 text-secondary" />
+        </div>
+      }
+    >
+      {overflowItems.map((item) => {
+        const itemIsActive = isActive(item);
+        // isHidden = true only for user-hidden items (not space-constrained overflow)
+        const isHidden = tabPreferences.hiddenTabs.includes(item.key);
+        const isDefault = item.key === tabPreferences.defaultTab;
+
+        return (
+          <Menu.MenuItem key={`${item.key}-overflow-${itemIsActive ? "active" : "inactive"}`} className="w-full p-0">
+            <div className="group/menu-item flex w-full items-center justify-between">
+              <Link to={item.href} className="w-full min-w-0 flex-1 p-1">
+                <span className="text-11">{t(item.i18n_key)}</span>
+              </Link>
+              <div className="flex items-center">
+                {/* Show Eye icon ONLY for user-hidden items */}
+                {isHidden && (
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      onShow(item.key);
+                    }}
+                    className="invisible rounded-sm p-1 text-tertiary transition-colors group-hover/menu-item:visible hover:text-primary"
+                    title="Show"
+                  >
+                    <PinOutline className="size-3" />
+                  </button>
+                )}
+                <Tooltip label={isDefault ? "Clear default" : "Set as default"}>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      onToggleDefault(item.key);
+                    }}
+                    className={cn(
+                      "invisible rounded-sm p-1 text-tertiary transition-colors group-hover/menu-item:visible hover:text-primary",
+                      {
+                        visible: isDefault,
+                      }
+                    )}
+                    title={isDefault ? "Clear default" : "Set as default"}
+                  >
+                    <DefaultTabOutline className="size-3" />
+                  </button>
+                </Tooltip>
+              </div>
+            </div>
+          </Menu.MenuItem>
+        );
+      })}
+    </Menu>
+  );
+}