feat: issue #1218 (#1218)

https://github.com/Termix-SSH/Support/issues/1218

src/ui/AppShell.tsx

@@ -641,6 +641,9 @@ export function AppShell({
       const v = localStorage.getItem("commandPaletteShortcutEnabled");
       return v !== null ? v === "true" : true;
     });
+  const [showTabNumbers, setShowTabNumbers] = useState<boolean>(
+    () => localStorage.getItem("showTabNumbers") === "true",
+  );
   const terminalRefs = useRef<Map<string, ReturnType<typeof createRef>>>(
     new Map(),
   );
@@ -931,6 +934,14 @@ export function AppShell({
       );
   }, []);
 
+  useEffect(() => {
+    const handler = () => {
+      setShowTabNumbers(localStorage.getItem("showTabNumbers") === "true");
+    };
+    window.addEventListener("showTabNumbersChanged", handler);
+    return () => window.removeEventListener("showTabNumbersChanged", handler);
+  }, []);
+
   useEffect(() => {
     const handle = (event: Event) => {
       const manual =
@@ -3081,6 +3092,7 @@ export function AppShell({
                 onToggleAppFullscreen={toggleAppFullscreen}
                 rightDockOpen={rightRailView !== null}
                 onToggleRightDock={isMobile ? undefined : toggleRightDock}
+                showTabNumbers={showTabNumbers}
               />
               <div className="relative flex flex-col flex-1 min-h-0 overflow-hidden">
                 {/* Split view — always mounted when not mobile, hidden via CSS when inactive */}

src/ui/locales/en.json

@@ -4567,6 +4567,8 @@
         "reopenTabsOnLoginDesc": "Restore your open tabs when you log in or refresh the page, even from another device",
         "confirmTabClose": "Confirm Tab Close",
         "confirmTabCloseDesc": "Ask before closing terminal tabs",
+        "showTabNumbers": "Show Tab Numbers",
+        "showTabNumbersDesc": "Display a number on each tab to help tell them apart",
         "transferConcurrency": "Simultaneous File Transfers",
         "transferConcurrencyDesc": "How many files the side by side local/remote manager uploads or downloads at the same time. Lower this if your server limits SFTP channels.",
         "settingsAppRail": "App Rail",

src/ui/shell/TabBar.tsx

@@ -62,6 +62,7 @@ export function TabBar({
   onToggleAppFullscreen,
   rightDockOpen,
   onToggleRightDock,
+  showTabNumbers,
 }: {
   tabs: Tab[];
   activeTabId: string;
@@ -82,6 +83,7 @@ export function TabBar({
   onToggleAppFullscreen: () => void;
   rightDockOpen?: boolean;
   onToggleRightDock?: () => void;
+  showTabNumbers?: boolean;
 }) {
   const { t } = useTranslation();
   const reduceMotion = useReducedMotion();
@@ -422,6 +424,12 @@ export function TabBar({
                 {showInPaneIndicator && (
                   <span className="absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1 rounded-full bg-muted-foreground/40 z-10" />
                 )}
+                {showTabNumbers && tab.type !== "dashboard" && (
+                  <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground/70">
+                    {tabs.slice(0, index).filter((t) => t.type !== "dashboard")
+                      .length + 1}
+                  </span>
+                )}
                 {tabIcon(tab.type)}
                 {tab.type !== "dashboard" && renamingTabId === tab.id ? (
                   <input
@@ -543,13 +551,20 @@ export function TabBar({
               sideOffset={1}
               className="w-56 border-t-0 [clip-path:inset(0px_-4px_-4px_-4px)] p-0"
             >
-              {tabs.map((tab) => (
+              {tabs.map((tab, index) => (
                 <div
                   key={tab.id}
                   onClick={() => onSetActiveTab(tab.id)}
                   className={`flex items-center justify-between px-2 py-2 text-xs cursor-default hover:bg-accent hover:text-accent-foreground ${tab.id === activeTabId ? "text-foreground" : "text-muted-foreground"}`}
                 >
                   <div className="flex items-center gap-2 flex-1 min-w-0">
+                    {showTabNumbers && tab.type !== "dashboard" && (
+                      <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground/70">
+                        {tabs
+                          .slice(0, index)
+                          .filter((t) => t.type !== "dashboard").length + 1}
+                      </span>
+                    )}
                     {tabIcon(tab.type)}
                     <span className="truncate">
                       {tab.type === "dashboard"

src/ui/sidebar/UserProfilePanel.tsx

@@ -768,6 +768,9 @@ export function UserProfilePanel({
   const [confirmTabClose, setConfirmTabClose] = useState(
     () => localStorage.getItem("confirmTabClose") === "true",
   );
+  const [showTabNumbers, setShowTabNumbers] = useState(
+    () => localStorage.getItem("showTabNumbers") === "true",
+  );
   const [hiddenRailTabs, setHiddenRailTabs] = useState<Set<string>>(() => {
     try {
       const stored = localStorage.getItem("hiddenRailTabs");
@@ -2122,6 +2125,19 @@ export function UserProfilePanel({
                 }}
               />
             </SettingRow>
+            <SettingRow
+              label={t("newUi.sidebar.userProfile.showTabNumbers")}
+              description={t("newUi.sidebar.userProfile.showTabNumbersDesc")}
+            >
+              <FakeSwitch
+                checked={showTabNumbers}
+                onChange={(v) => {
+                  setShowTabNumbers(v);
+                  localStorage.setItem("showTabNumbers", v.toString());
+                  window.dispatchEvent(new Event("showTabNumbersChanged"));
+                }}
+              />
+            </SettingRow>
           </div>
 
           <div className="flex flex-col gap-1 border-t border-border pt-3">