Style patch tabs

src/components/Border.svelte

@@ -11,10 +11,12 @@
     styleHeight?: string;
     styleMinHeight?: string;
     styleWidth?: string;
+    styleDisplay?: string;
     styleCursor?: "default" | "pointer" | "text";
     styleGap?: string;
     styleOverflow?: string;
     flatTop?: boolean;
+    flatBottom?: boolean;
     styleBackgroundColor?: string;
     styleFlexDirection?: string;
     styleAlignItems?: string;
@@ -31,10 +33,12 @@
     styleMinHeight,
     stylePosition,
     styleWidth,
+    styleDisplay = "flex",
     styleCursor = "default",
     styleGap = "0.5rem",
     styleOverflow,
     flatTop = false,
+    flatBottom = false,
     styleBackgroundColor = "var(--color-background-default)",
     styleFlexDirection = "row",
     styleAlignItems = "center",
@@ -130,7 +134,6 @@
   }
   .p3-3 {
     grid-area: p3-3;
-    display: flex;
     background-color: var(--local-background-color);
   }
   .p3-4 {
@@ -196,6 +199,21 @@
   .flat-top > .p2-5 {
     background-color: var(--local-button-color-1);
   }
+
+  .flat-bottom > .p4-2,
+  .flat-bottom > .p4-4 {
+    background-color: transparent;
+  }
+
+  .flat-bottom > .p4-1,
+  .flat-bottom > .p4-5,
+  .flat-bottom > .p5-3,
+  .flat-bottom > .p5-1,
+  .flat-bottom > .p5-2,
+  .flat-bottom > .p5-4,
+  .flat-bottom > .p5-5 {
+    background-color: var(--local-button-color-1);
+  }
 </style>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -204,6 +222,7 @@
   style:cursor={styleCursor}
   class="container"
   class:flat-top={flatTop}
+  class:flat-bottom={flatBottom}
   {onclick}
   role="button"
   tabindex={onclick !== undefined ? 0 : -1}
@@ -226,6 +245,7 @@
   <div class="p3-2"></div>
   <div
     class="p3-3"
+    style:display={styleDisplay}
     style:position={stylePosition}
     style:padding={stylePadding}
     style:gap={styleGap}

src/components/Changeset.svelte

@@ -16,11 +16,15 @@
     display: flex;
     flex-direction: column;
   }
+
+  .diff:not(:last-of-type) {
+    margin-bottom: 1rem;
+  }
 </style>
 
 <div class="diff-list">
   {#each diff.files as file}
-    <div style:margin-bottom="1rem">
+    <div class="diff">
       <FileDiff
         filePath={"path" in file ? file.path : file.newPath}
         oldFilePath={"oldPath" in file ? file.oldPath : undefined}

src/components/File.svelte

@@ -13,9 +13,9 @@
 <style>
   .header {
     display: flex;
-    height: 3rem;
     align-items: center;
-    padding: 0 0.5rem 0 1rem;
+    height: 2.5rem;
+    padding-left: 1rem;
     z-index: 2;
     font-size: var(--font-size-small);
   }
@@ -46,6 +46,7 @@
   .container {
     position: relative;
     overflow-x: auto;
+    z-index: 1;
   }
   .container::after {
     position: absolute;

src/components/Tab.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    children: Snippet;
+    onclick?: () => void;
+    disabled?: boolean;
+    active?: boolean;
+    flatLeft?: boolean;
+    flatRight?: boolean;
+  }
+
+  const {
+    children,
+    onclick = undefined,
+    disabled = false,
+    active = false,
+    flatLeft = false,
+    flatRight = false,
+  }: Props = $props();
+</script>
+
+<style>
+  .container {
+    white-space: nowrap;
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+    display: flex;
+    flex-direction: row;
+    font-size: var(--font-size-small);
+  }
+
+  .wrapper {
+    position: relative;
+    display: flex;
+    gap: 0.5rem;
+    padding: 5px 0;
+  }
+
+  .active {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .wrapper.active::after {
+    position: absolute;
+    z-index: 1;
+    content: " ";
+    background-color: var(--color-fill-secondary);
+    height: 2px;
+    bottom: -4px;
+    width: 100%;
+  }
+
+  .container.disabled {
+    color: var(--color-foreground-disabled);
+  }
+</style>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
+  class="container"
+  style:cursor={!disabled ? "pointer" : "default"}
+  class:disabled
+  class:flat-right={flatRight}
+  class:flat-left={flatLeft}
+  onclick={!disabled ? onclick : undefined}
+  role="button"
+  tabindex="0">
+  <div class="wrapper" class:active>
+    {@render children()}
+  </div>
+</div>