Tighten toolbar and tab controls

Author: acoyfellow

src/lib/components/cloudshell/app-toolbar.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import FolderOpen from '@lucide/svelte/icons/folder-open';
   import Search from '@lucide/svelte/icons/search';
   import SlidersHorizontal from '@lucide/svelte/icons/sliders-horizontal';
   import { Button } from '$lib/components/ui/button';
@@ -27,20 +26,6 @@
   <SidebarTrigger class="thumb-icon-target hit-area-2 shrink-0 rounded-lg" />
 {/snippet}
 
-{#snippet FilesButton()}
-  <Button
-    size="icon"
-    variant={controller.filesDrawerOpen ? 'default' : 'ghost'}
-    class="thumb-icon-target hit-area-2 rounded-xl"
-    aria-label={controller.filesDrawerOpen ? 'Close files' : 'Open files'}
-    title={controller.filesDrawerOpen ? 'Close files' : 'Open files'}
-    onclick={() => void controller.toggleFilesDrawer()}
-  >
-    <FolderOpen />
-    <span class="sr-only">{controller.filesDrawerOpen ? 'Close files' : 'Open files'}</span>
-  </Button>
-{/snippet}
-
 {#snippet ToolbarActions()}
   <Button
     size="icon"
@@ -56,7 +41,7 @@
 
   <Button
     size="icon"
-    variant={controller.utilityPaneOpen ? 'default' : 'outline'}
+    variant="ghost"
     class="thumb-icon-target hit-area-2 rounded-xl"
     aria-label={controller.utilityPaneOpen ? 'Close settings' : 'Open settings'}
     title={controller.utilityPaneOpen ? 'Close settings' : 'Open settings'}
@@ -85,7 +70,6 @@
     <div class="flex min-h-16 items-center justify-between gap-3 border-b border-border/40 px-3">
       <div class="flex items-center gap-2">
         {@render SidebarToggle()}
-        {@render FilesButton()}
       </div>
 
       <div class="flex shrink-0 items-center justify-end gap-2">
@@ -107,10 +91,6 @@
           {@render SidebarToggle()}
         </div>
 
-        <div class="mb-px">
-          {@render FilesButton()}
-        </div>
-
         {#if controller.sessions.length > 0}
           {@render InlineTabStrip()}
         {/if}

src/lib/components/cloudshell/session-sidebar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { base } from '$app/paths';
   import ArrowUpRight from '@lucide/svelte/icons/arrow-up-right';
+  import FolderOpen from '@lucide/svelte/icons/folder-open';
   import Info from '@lucide/svelte/icons/info';
   import LogOut from '@lucide/svelte/icons/log-out';
   import MoreHorizontal from '@lucide/svelte/icons/ellipsis';
@@ -46,13 +46,17 @@
 >
   <Sidebar.Header class="border-b border-border/40 p-0">
     <div class="flex h-16 items-center gap-1 px-2">
-      <a
-        href={`${base}/`}
-        class="text-foreground flex shrink-0 items-center justify-center rounded-md p-1.5 outline-none ring-offset-background hover:bg-sidebar-accent focus-visible:ring-2 focus-visible:ring-ring"
-        aria-label="cloudshell home"
+      <Button
+        size="icon"
+        variant={controller.filesDrawerOpen ? 'default' : 'ghost'}
+        class="thumb-icon-target hit-area-2 shrink-0 rounded-xl"
+        aria-label={controller.filesDrawerOpen ? 'Close files' : 'Open files'}
+        title={controller.filesDrawerOpen ? 'Close files' : 'Open files'}
+        onclick={() => void controller.toggleFilesDrawer()}
       >
-        <img src={`${base}/logo.svg`} alt="" class="size-8 hit-area-2" width="32" height="32" />
-      </a>
+        <FolderOpen />
+        <span class="sr-only">{controller.filesDrawerOpen ? 'Close files' : 'Open files'}</span>
+      </Button>
       <Button
         variant="ghost"
         class="h-16 min-w-0 flex-1 justify-center rounded-none border-0 px-0"

src/lib/components/cloudshell/tab-strip.svelte

@@ -28,12 +28,11 @@
 <div class:bg-background={!inline} class={`flex items-end gap-2 ${inline ? 'min-w-0 flex-1 overflow-visible' : 'border-b px-1 pt-2'}`}>
   <div class="shrink-0 pb-px">
     <Button
-      size="icon"
-      variant="outline"
-      class="thumb-icon-target hit-area-2 rounded-t-md rounded-b-none border-b-0"
+      variant="ghost"
+      class="tab-new-button hit-area-y-1 min-w-12 rounded-t-md rounded-b-none px-4 text-muted-foreground hover:text-foreground"
       onclick={onCreateTab}
     >
-      <Plus />
+      <Plus class="size-4" />
       <span class="sr-only">New tab</span>
     </Button>
   </div>
@@ -112,6 +111,19 @@
     display: none;
   }
 
+  .tab-new-button {
+    height: calc(1rem + 2.5rem);
+    border-left: 1px solid rgba(255, 255, 255, 0.035);
+    border-right: 1px solid rgba(255, 255, 255, 0.035);
+    border-top: 1px solid rgba(255, 255, 255, 0.035);
+    border-bottom: 0;
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .tab-new-button:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+
   .tab-shell {
     position: relative;
     display: flex;