Repository: supabase/supabase
File: apps/studio/components/layouts/Tabs/Tabs.tsx (TypeScript)

Code before:
    }
  }, [])

  useEffect(() => {
    if (!tabsListRef.current) return

    const tabCountIncreased = editorTabs.length > prevTabCountRef.current

    if (tabCountIncreased) {
      tabsListRef.current.scrollLeft = tabsListRef.current.scrollWidth
    } else if (tabs.activeTab) {
      const activeTabElement = tabsListRef.current.querySelector(
        `[data-state="active"]`
      ) as HTMLElement

      if (activeTabElement) {
        activeTabElement.scrollIntoView({
          behavior: 'smooth',
          block: 'nearest',
          inline: 'nearest',
        })
      }
    }

    prevTabCountRef.current = editorTabs.length
  }, [tabs.activeTab, editorTabs.length])

  return (
    <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
      <Tabs_Shadcn_
        className="w-full flex"
        value={hasNewTab ? 'new' : tabs.activeTab ?? undefined}
        onValueChange={handleTabChange}
      >
        <CollapseButton hideTabs={false} />
        <TabsList_Shadcn_
          ref={tabsListRef}
          className={cn(
            'rounded-b-none gap-0 h-10 flex items-center w-full z-[1]',
            'bg-surface-200 dark:bg-alternative border-none overflow-clip overflow-x-auto'
          )}
        >
          <SortableContext
            items={editorTabs.map((tab) => tab.id)}
            strategy={horizontalListSortingStrategy}
          >
            {editorTabs.map((tab, index) => (
              <ContextMenu_Shadcn_ key={tab.id}>
                <ContextMenuTrigger_Shadcn_>
                  <SortableTab
                    key={tab.id}

Review comment (suggestion):
We should clean this up a bit, I think it should live in its own hook that we can reference here. Same with the `useRef` definitions IMO

Code after:
        className="w-full flex"
        value={hasNewTab ? 'new' : tabs.activeTab ?? undefined}
        onValueChange={handleTabChange}
      >
        <CollapseButton hideTabs={false} />
        <TabsList_Shadcn_
          ref={tabsListRef}
          className={cn(
            'rounded-b-none gap-0 h-10 flex items-center w-full z-[1]',
            'bg-surface-200 dark:bg-alternative border-none overflow-clip overflow-x-auto'
          )}
        >
          <SortableContext
            items={editorTabs.map((tab) => tab.id)}
            strategy={horizontalListSortingStrategy}
          >
            {editorTabs.map((tab, index) => (
              <ContextMenu_Shadcn_ key={tab.id}>
                <ContextMenuTrigger_Shadcn_>
                  <SortableTab
                    key={tab.id}
                    tab={tab}
                    index={index}
                    openTabs={openTabs}
                    onClose={() => handleClose(tab.id)}
                  />
                </ContextMenuTrigger_Shadcn_>
                <ContextMenuContent_Shadcn_>
                  <ContextMenuItem_Shadcn_ onClick={() => handleClose(tab.id)}>
                    Close
                  </ContextMenuItem_Shadcn_>
                  <ContextMenuItem_Shadcn_ onClick={() => handleCloseOthers(tab.id)}>
                    Close Others
                  </ContextMenuItem_Shadcn_>
                  <ContextMenuItem_Shadcn_ onClick={() => handleCloseRight(tab.id)}>
                    Close to the Right
                  </ContextMenuItem_Shadcn_>
                  <ContextMenuItem_Shadcn_ onClick={handleCloseAll}>
                    Close All
                  </ContextMenuItem_Shadcn_>
                </ContextMenuContent_Shadcn_>
              </ContextMenu_Shadcn_>
            ))}
          </SortableContext>

          {/* Non-draggable new tab */}
          {hasNewTab && (
            <TabsTrigger_Shadcn_
              value="new"
              className={cn(
                'flex items-center gap-2 px-3 text-xs',