1 files changed, 73 insertions, 49 deletions

diff --git a/source/library/components/TabBar.svelte b/source/library/components/TabBar.svelte
index 0bfec02..547fa44 100644
--- a/source/library/components/TabBar.svelte
+++ b/source/library/components/TabBar.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
+  /*** IMPORT ------------------------------------------- ***/
   import { tick, type Snippet } from "svelte";
+
+  /*** UTILITY ------------------------------------------ ***/
   import type { Tab } from "../state/session.svelte.ts";
 
   type Props = {
@@ -12,29 +15,38 @@
     tabs: Tab[];
   };
 
-  let { activeId, extras, onAdd, onClose, onRename, onSelect, tabs }: Props = $props();
+  let {
+    activeId,
+    extras,
+    onAdd,
+    onClose,
+    onRename,
+    onSelect,
+    tabs
+  }: Props = $props();
 
-  let editingId = $state<string | null>(null);
   let draft = $state<string>("");
+  let editingId = $state<string | null>(null);
   let inputEl = $state<HTMLInputElement | null>(null);
 
-  async function startEditing(tab: Tab) {
-    editingId = tab.id;
-    draft = tab.title;
-    await tick();
-    inputEl?.select();
+  /*** HELPER ------------------------------------------- ***/
+  function cancel() {
+    editingId = null;
+    draft = "";
   }
 
   function commit() {
-    if (editingId === null) return;
+    if (editingId === null)
+      return;
+
     onRename(editingId, draft);
     editingId = null;
     draft = "";
   }
 
-  function cancel() {
-    editingId = null;
-    draft = "";
+  function handleClose(event: MouseEvent, id: string) {
+    event.stopPropagation();
+    onClose(id);
   }
 
   function onKeydown(event: KeyboardEvent) {
@@ -47,41 +59,47 @@
     }
   }
 
-  function handleClose(event: MouseEvent, id: string) {
-    event.stopPropagation();
-    onClose(id);
+  async function startEditing(tab: Tab) {
+    editingId = tab.id;
+    draft = tab.title;
+    await tick();
+    inputEl?.select();
   }
 </script>
 
 <style lang="scss">
   .tabbar {
     align-items: stretch;
-    background: var(--graphiql-panel, #252526);
-    border-bottom: 1px solid var(--graphiql-border, #333);
+    background-color: var(--uchu-gray-2);
     display: flex;
-    font-size: 0.8125rem;
+    font-size: 0.8rem;
     min-height: 2rem;
     overflow-x: auto;
-  }
-
-  .tab {
-    align-items: center;
-    background: transparent;
-    border: none;
-    border-right: 1px solid var(--graphiql-border, #333);
-    color: var(--graphiql-muted, #858585);
-    cursor: pointer;
-    display: flex;
-    gap: 0.5rem;
-    padding: 0 0.75rem;
-
-    &.active {
-      background: var(--graphiql-bg, #1e1e1e);
-      color: var(--graphiql-fg, #d4d4d4);
-    }
 
-    &:hover:not(.active) {
-      color: var(--graphiql-fg, #d4d4d4);
+    .tab {
+      align-items: center;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      gap: 0.5rem;
+      padding: 0 0.75rem;
+
+      &:not(:hover):not(.active) {
+        color: var(--uchu-yin-5);
+      }
+
+      &:hover:not(.active) {
+        color: var(--uchu-yin-8);
+      }
+
+      &:not(.active) {
+        background-color: transparent;
+      }
+
+      &.active {
+        background-color: var(--uchu-gray-3);
+        color: var(--uchu-yin-8);
+      }
     }
   }
 
@@ -90,10 +108,9 @@
   }
 
   .edit {
-    background: var(--graphiql-bg, #1e1e1e);
-    border: 1px solid var(--graphiql-accent, #0e639c);
-    border-radius: 2px;
-    color: var(--graphiql-fg, #d4d4d4);
+    background-color: var(--uchu-orange-5);
+    border: 1px solid var(--uchu-orange-5);
+    color: var(--uchu-yang);
     font-family: inherit;
     font-size: inherit;
     min-width: 6rem;
@@ -108,9 +125,12 @@
     cursor: pointer;
     font-size: 1rem;
     line-height: 1;
-    opacity: 0.6;
     padding: 0;
 
+    &:not(:hover) {
+      opacity: 0.6;
+    }
+
     &:hover {
       opacity: 1;
     }
@@ -119,13 +139,17 @@
   .add {
     background: none;
     border: none;
-    color: var(--graphiql-muted, #858585);
+    border-left: 1px solid var(--uchu-gray-3);
     cursor: pointer;
     font-size: 1rem;
     padding: 0 0.75rem;
 
+    &:not(:hover) {
+      color: var(--uchu-yin-5);
+    }
+
     &:hover {
-      color: var(--graphiql-fg, #d4d4d4);
+      color: var(--uchu-yin-8);
     }
   }
 </style>
@@ -145,8 +169,7 @@
         }
       }}
       role="tab"
-      tabindex="0"
-    >
+      tabindex="0">
       {#if editingId === tab.id}
         <input
           bind:this={inputEl}
@@ -155,18 +178,19 @@
           onblur={commit}
           onclick={(e) => e.stopPropagation()}
           onkeydown={onKeydown}
-          type="text"
-        />
+          type="text"/>
       {:else}
         <span class="title">{tab.title}</span>
       {/if}
+
       {#if extras}{@render extras({ tab })}{/if}
+
       <button
         aria-label="Close tab"
         class="close"
-        onclick={(e) => handleClose(e, tab.id)}
-      >×</button>
+        onclick={(e) => handleClose(e, tab.id)}>&times;</button>
     </div>
   {/each}
+
   <button aria-label="New tab" class="add" onclick={onAdd}>+</button>
 </div>