Change tab styles

Author: pomber

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

@@ -183,7 +183,7 @@ function TabsContainer({
           }}
           onClick={onTabClick && (() => onTabClick(title))}
         >
-          <div>{title}</div>
+          <TabTitle title={title} />
         </div>
       ))}
       <div style={{ flex: 1 }} />
@@ -192,6 +192,23 @@ function TabsContainer({
   )
 }
 
+function TabTitle({ title }: { title: string }) {
+  if (!title) {
+    return <div />
+  }
+
+  const separatorIndex = title.lastIndexOf("/") + 1
+  const filename = title.substring(separatorIndex)
+  const folder = title.substring(0, separatorIndex)
+
+  return (
+    <div>
+      <span style={{ opacity: 0.5 }}>{folder}</span>
+      {filename}
+    </div>
+  )
+}
+
 type TabsSnapshot = Record<
   string,
   { left: number; active: boolean; width: number }