Extract Topbar component

Co-authored-by: Julien Donck <donckjulien@gmail.com>

src/components/Topbar.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    children: Snippet;
+  }
+
+  const { children }: Props = $props();
+</script>
+
+<style>
+  .topbar {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0 1rem;
+    height: 2.75rem;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--color-border-subtle);
+    font: var(--txt-body-m-regular);
+    color: var(--color-text-secondary);
+  }
+</style>
+
+<div class="topbar">
+  {@render children()}
+</div>

src/views/repo/Issue.svelte

@@ -36,6 +36,7 @@
   import IssueTimeline from "@app/components/IssueTimeline.svelte";
   import LabelInput from "@app/components/LabelInput.svelte";
   import ScrollArea from "@app/components/ScrollArea.svelte";
+  import Topbar from "@app/components/Topbar.svelte";
   import CreateIssueModal from "@app/modals/CreateIssue.svelte";
 
   import Layout from "./Layout.svelte";
@@ -265,18 +266,12 @@
     flex-direction: column;
     height: 100%;
   }
-  .topbar {
+  .breadcrumb {
     display: flex;
     align-items: center;
-    padding: 0 1rem;
-    height: 2.5rem;
-    flex-shrink: 0;
     gap: 0.375rem;
-    border-bottom: 1px solid var(--color-border-subtle);
-    font: var(--txt-body-m-regular);
-    color: var(--color-text-secondary);
   }
-  .topbar-link {
+  .breadcrumb-link {
     cursor: pointer;
     background: none;
     border: none;
@@ -284,7 +279,7 @@
     font: var(--txt-body-m-regular);
     color: var(--color-text-secondary);
   }
-  .topbar-link:hover {
+  .breadcrumb-link:hover {
     color: var(--color-text-primary);
   }
   .content {
@@ -345,23 +340,25 @@
 
 <Layout>
   <div class="page">
-    <div class="topbar">
-      <Icon name={issue.state.status === "open" ? "issue" : "issue-closed"} />
-      <button
-        class="topbar-link"
-        onclick={() =>
-          router.push({
-            resource: "repo.issues",
-            rid: repo.rid,
-            status: "all",
-          })}>
-        All Issues
-      </button>
-      <Icon name="chevron-right" />
-      <Id id={issue.id} clipboard={issue.id} placement="bottom-start" />
-      <ExternalLink
-        href={explorerUrl(`${repo.rid}/issues/${issue.id}`)}
-        title="Open in radicle.network" />
+    <Topbar>
+      <div class="breadcrumb">
+        <Icon name={issue.state.status === "open" ? "issue" : "issue-closed"} />
+        <button
+          class="breadcrumb-link"
+          onclick={() =>
+            router.push({
+              resource: "repo.issues",
+              rid: repo.rid,
+              status: "all",
+            })}>
+          All Issues
+        </button>
+        <Icon name="chevron-right" />
+        <Id id={issue.id} clipboard={issue.id} placement="bottom-start" />
+        <ExternalLink
+          href={explorerUrl(`${repo.rid}/issues/${issue.id}`)}
+          title="Open in radicle.network" />
+      </div>
       <div style:margin-left="auto">
         <Button
           styleHeight="2rem"
@@ -374,7 +371,7 @@
           <Icon name="plus" />New issue
         </Button>
       </div>
-    </div>
+    </Topbar>
 
     <ScrollArea style="flex: 1; min-height: 0;">
       <div class="content">

src/views/repo/Issues.svelte

@@ -23,6 +23,7 @@
   import Icon from "@app/components/Icon.svelte";
   import IssueTeaser from "@app/components/IssueTeaser.svelte";
   import ScrollArea from "@app/components/ScrollArea.svelte";
+  import Topbar from "@app/components/Topbar.svelte";
   import CreateIssueModal from "@app/modals/CreateIssue.svelte";
 
   import Layout from "./Layout.svelte";
@@ -105,15 +106,6 @@
     flex-direction: column;
     height: 100%;
   }
-  .topbar {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0 1rem;
-    height: 2.75rem;
-    flex-shrink: 0;
-    border-bottom: 1px solid var(--color-border-subtle);
-  }
   .topbar-title {
     font: var(--txt-body-m-semibold);
     color: var(--color-text-secondary);
@@ -156,7 +148,7 @@
 
 <Layout selfScroll>
   <div class="page">
-    <div class="topbar">
+    <Topbar>
       <span class="topbar-title">Issues</span>
       <div class="filters">
         <a
@@ -222,7 +214,7 @@
           <Icon name="plus" />New issue
         </Button>
       </div>
-    </div>
+    </Topbar>
 
     <ScrollArea style="height: 100%; min-width: 0;">
       {#if issueCountMismatch(status)}

src/views/repo/Patch.svelte

@@ -34,6 +34,7 @@
   import RevisionComponent from "@app/components/Revision.svelte";
   import Revisions from "@app/components/Revisions.svelte";
   import ScrollArea from "@app/components/ScrollArea.svelte";
+  import Topbar from "@app/components/Topbar.svelte";
 
   import Layout from "./Layout.svelte";
 
@@ -182,18 +183,12 @@
     flex-direction: column;
     height: 100%;
   }
-  .topbar {
+  .breadcrumb {
     display: flex;
     align-items: center;
-    padding: 0 1rem;
-    height: 2.5rem;
-    flex-shrink: 0;
     gap: 0.375rem;
-    border-bottom: 1px solid var(--color-border-subtle);
-    font: var(--txt-body-m-regular);
-    color: var(--color-text-secondary);
   }
-  .topbar-link {
+  .breadcrumb-link {
     cursor: pointer;
     background: none;
     border: none;
@@ -201,7 +196,7 @@
     font: var(--txt-body-m-regular);
     color: var(--color-text-secondary);
   }
-  .topbar-link:hover {
+  .breadcrumb-link:hover {
     color: var(--color-text-primary);
   }
   .content {
@@ -260,30 +255,32 @@
       }} />
   {:else}
     <div class="page">
-      <div class="topbar">
-        <Icon
-          name={patch.state.status === "open"
-            ? "patch"
-            : `patch-${patch.state.status}`} />
-        <button
-          class="topbar-link"
-          onclick={() =>
-            router.push({
-              resource: "repo.patches",
-              rid: repo.rid,
-              status: undefined,
-            })}>
-          All Patches
-        </button>
-        <Icon name="chevron-right" />
-        <Id id={patch.id} clipboard={patch.id} placement="bottom-start" />
-        <ExternalLink
-          href={explorerUrl(`${repo.rid}/patches/${patch.id}`)}
-          title="Open in radicle.network" />
+      <Topbar>
+        <div class="breadcrumb">
+          <Icon
+            name={patch.state.status === "open"
+              ? "patch"
+              : `patch-${patch.state.status}`} />
+          <button
+            class="breadcrumb-link"
+            onclick={() =>
+              router.push({
+                resource: "repo.patches",
+                rid: repo.rid,
+                status: undefined,
+              })}>
+            All Patches
+          </button>
+          <Icon name="chevron-right" />
+          <Id id={patch.id} clipboard={patch.id} placement="bottom-start" />
+          <ExternalLink
+            href={explorerUrl(`${repo.rid}/patches/${patch.id}`)}
+            title="Open in radicle.network" />
+        </div>
         <div style:margin-left="auto">
           <NewPatchButton rid={repo.rid} ghost />
         </div>
-      </div>
+      </Topbar>
 
       <ScrollArea style="flex: 1; min-height: 0;">
         <div class="content">

src/views/repo/Patches.svelte

@@ -25,6 +25,7 @@
   import NewPatchButton from "@app/components/NewPatchButton.svelte";
   import PatchTeaser from "@app/components/PatchTeaser.svelte";
   import ScrollArea from "@app/components/ScrollArea.svelte";
+  import Topbar from "@app/components/Topbar.svelte";
 
   import Layout from "./Layout.svelte";
 
@@ -163,15 +164,6 @@
     flex-direction: column;
     height: 100%;
   }
-  .topbar {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0 1rem;
-    height: 2.75rem;
-    flex-shrink: 0;
-    border-bottom: 1px solid var(--color-border-subtle);
-  }
   .topbar-title {
     font: var(--txt-body-m-semibold);
     color: var(--color-text-secondary);
@@ -225,7 +217,7 @@
 
 <Layout selfScroll>
   <div class="page">
-    <div class="topbar">
+    <Topbar>
       <span class="topbar-title">Patches</span>
       <div class="filters">
         <a
@@ -328,7 +320,7 @@
           bind:value={searchInput} />
         <NewPatchButton rid={repo.rid} />
       </div>
-    </div>
+    </Topbar>
 
     <ScrollArea
       style="height: 100%; min-width: 0;"