refactor: improve tab layout sizing and always show close buttons

packages/app/src/components/draggable-list.web.tsx

@@ -139,15 +139,11 @@ export function DraggableList<T>({
   nestable: _nestable = false,
 }: DraggableListProps<T>) {
   const [activeId, setActiveId] = useState<string | null>(null);
-  const [items, setItems] = useState(data);
+  const [dragItems, setDragItems] = useState<T[] | null>(null);
+  const items = dragItems ?? data;
   const scrollViewRef = useRef<ScrollView>(null);
   const scrollbarMetrics = useWebDesktopScrollbarMetrics();
 
-  // Sync items with data prop
-  if (data !== items && !activeId) {
-    setItems(data);
-  }
-
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -159,16 +155,21 @@ export function DraggableList<T>({
     })
   );
 
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    setActiveId(String(event.active.id));
-    onDragBegin?.();
-  }, [onDragBegin]);
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      setDragItems(data);
+      setActiveId(String(event.active.id));
+      onDragBegin?.();
+    },
+    [data, onDragBegin]
+  );
 
   const handleDragEnd = useCallback(
     (event: DragEndEvent) => {
       const { active, over } = event;
 
       setActiveId(null);
+      setDragItems(null);
 
       if (over && active.id !== over.id) {
         const oldIndex = items.findIndex(
@@ -178,9 +179,10 @@ export function DraggableList<T>({
           (item, i) => keyExtractor(item, i) === over.id
         );
 
-        const newItems = arrayMove(items, oldIndex, newIndex);
-        setItems(newItems);
-        onDragEnd(newItems);
+        if (oldIndex >= 0 && newIndex >= 0 && oldIndex !== newIndex) {
+          const newItems = arrayMove(items, oldIndex, newIndex);
+          onDragEnd(newItems);
+        }
       }
     },
     [items, keyExtractor, onDragEnd]

packages/app/src/components/sidebar-workspace-list.tsx

@@ -20,7 +20,7 @@ import {
   type ReactElement,
   type MutableRefObject,
 } from 'react'
-import { router, usePathname, useSegments } from 'expo-router'
+import { router, usePathname } from 'expo-router'
 import { StyleSheet, UnistylesRuntime, useUnistyles } from 'react-native-unistyles'
 import { type GestureType } from 'react-native-gesture-handler'
 import { ChevronDown, ChevronRight } from 'lucide-react-native'
@@ -736,7 +736,6 @@ function ProjectBlock({
   iconDataUri,
   serverId,
   activeWorkspaceSelection,
-  shouldReplaceWorkspaceNavigation,
   showShortcutBadges,
   shortcutIndexByWorkspaceKey,
   parentGestureRef,
@@ -756,7 +755,6 @@ function ProjectBlock({
   iconDataUri: string | null
   serverId: string | null
   activeWorkspaceSelection: { serverId: string; workspaceId: string } | null
-  shouldReplaceWorkspaceNavigation: boolean
   showShortcutBadges: boolean
   shortcutIndexByWorkspaceKey: Map<string, number>
   parentGestureRef?: MutableRefObject<GestureType | undefined>
@@ -778,7 +776,6 @@ function ProjectBlock({
       dragHandleProps: workspaceDragHandleProps,
     }: DraggableRenderItemInfo<SidebarWorkspaceEntry>) => {
       const workspaceRoute = buildHostWorkspaceRoute(serverId ?? '', item.workspaceId)
-      const navigate = shouldReplaceWorkspaceNavigation ? router.replace : router.push
       const isSelected =
         Boolean(serverId) &&
         activeWorkspaceSelection?.serverId === serverId &&
@@ -795,7 +792,7 @@ function ProjectBlock({
               return
             }
             onWorkspacePress?.()
-            navigate(workspaceRoute as any)
+            router.push(workspaceRoute as any)
           }}
           drag={workspaceDrag}
           isDragging={isActive}
@@ -807,7 +804,6 @@ function ProjectBlock({
       activeWorkspaceSelection,
       onWorkspacePress,
       serverId,
-      shouldReplaceWorkspaceNavigation,
       shortcutIndexByWorkspaceKey,
       showShortcutBadges,
     ]
@@ -861,9 +857,7 @@ export function SidebarWorkspaceList({
   parentGestureRef,
 }: SidebarWorkspaceListProps) {
   const isMobile = UnistylesRuntime.breakpoint === 'xs' || UnistylesRuntime.breakpoint === 'sm'
-  const segments = useSegments()
   const pathname = usePathname()
-  const shouldReplaceWorkspaceNavigation = segments[0] === 'h'
   const [collapsedProjectKeys, setCollapsedProjectKeys] = useState<Set<string>>(new Set())
   const [outerScrollEnabled, setOuterScrollEnabled] = useState(true)
   const isTauri = getIsTauri()
@@ -1081,7 +1075,6 @@ export function SidebarWorkspaceList({
           iconDataUri={projectIconByProjectKey.get(item.projectKey) ?? null}
           serverId={serverId}
           activeWorkspaceSelection={activeWorkspaceSelection}
-          shouldReplaceWorkspaceNavigation={shouldReplaceWorkspaceNavigation}
           showShortcutBadges={showShortcutBadges}
           shortcutIndexByWorkspaceKey={shortcutModel.shortcutIndexByWorkspaceKey}
           parentGestureRef={parentGestureRef}
@@ -1106,7 +1099,6 @@ export function SidebarWorkspaceList({
       projectIconByProjectKey,
       serverId,
       shortcutModel.shortcutIndexByWorkspaceKey,
-      shouldReplaceWorkspaceNavigation,
       showShortcutBadges,
       toggleProjectCollapsed,
       lockOuterScrollForDrag,

packages/app/src/components/sortable-inline-list.web.tsx

@@ -165,7 +165,6 @@ export function SortableInlineList<T>({
 
         if (oldIndex >= 0 && newIndex >= 0 && oldIndex !== newIndex) {
           const newItems = arrayMove(items, oldIndex, newIndex);
-          setDragItems(newItems);
           onDragEnd?.(newItems);
         }
       }