Tween tab width

Author: pomber

packages/mini-editor/src/editor-frame.tsx

@@ -161,7 +161,7 @@ function TabsContainer({
 
 type TabsSnapshot = Record<
   string,
-  { left: number; active: boolean }
+  { left: number; active: boolean; width: number }
 >
 type Snapshot = {
   titleBarHeight: number

packages/mini-editor/src/tabs.tsx

@@ -110,12 +110,16 @@ function getPanelTabs(
           const dx = prev
             ? prev.left + (next.left - prev.left) * t
             : next.left
+          const width = prev
+            ? prev.width + (next.width - prev.width) * t
+            : next.width
           return {
             active: filename === active,
             title: filename,
             style: {
               position: "absolute" as const,
               transform: `translateX(${dx}px)`,
+              width,
             },
           }
         })
@@ -139,6 +143,7 @@ function getPanelTabs(
               position: "absolute" as const,
               transform: `translateX(${next.left}px)`,
               opacity: t,
+              width: next.width,
             },
           }
         })
@@ -179,6 +184,7 @@ function getPanelTabs(
               position: "absolute" as const,
               opacity: 1 - t,
               transform: `translateX(${prev.left}px)`,
+              width: prev.width,
             },
           }
         })

packages/mini-editor/src/use-snapshots.tsx

@@ -131,8 +131,10 @@ function getTabsDimensions(
   const dimensions = {} as TabsSnapshot
   tabElements.forEach(child => {
     const filename = child.getAttribute("title")!
+    const rect = child.getBoundingClientRect()
     dimensions[filename] = {
-      left: child.getBoundingClientRect().left - parentLeft,
+      left: rect.left - parentLeft,
+      width: rect.width,
       active: filename === active,
     }
   })