Move breadcrumbs to second column

radicle-dev · Jan 7, 2025 · e41d761 · e41d761
1 parent 6b336b0
commit e41d761
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 148 deletions.
diff --git a/src/components/IssueSecondColumn.svelte b/src/components/IssueSecondColumn.svelte
@@ -16,10 +16,11 @@
     selectedIssueId?: string;
     issues: Issue[];
     status: IssueStatus;
+    title: string;
   }
 
   /* eslint-disable prefer-const */
-  let { repo, selectedIssueId, issues, status }: Props = $props();
+  let { repo, selectedIssueId, issues, status, title }: Props = $props();
   /* eslint-enable prefer-const */
 </script>
 
@@ -34,7 +35,9 @@
 </style>
 
 <div class="global-flex" style:justify-content="space-between">
-  <div class="txt-medium" style:font-weight="var(--font-weight-medium)">
+  <div class="txt-regular txt-semibold global-flex" style:gap="4px">
+    {title}
+    <Icon name="chevron-right" />
     Issues
   </div>
 

diff --git a/src/views/repo/CreateIssue.svelte b/src/views/repo/CreateIssue.svelte
@@ -33,6 +33,8 @@
 
   const { repo, issues, config, status }: Props = $props();
 
+  const project = $derived(repo.payloads["xyz.radicle.project"]!);
+
   let preview: boolean = $state(false);
   let title: string = $state("");
 
@@ -95,7 +97,7 @@
   {/snippet}
 
   {#snippet secondColumn()}
-    <IssueSecondColumn {repo} {issues} {status} />
+    <IssueSecondColumn {repo} {issues} {status} title={project.data.name} />
   {/snippet}
 
   <div class="content">

diff --git a/src/views/repo/Issue.svelte b/src/views/repo/Issue.svelte
@@ -29,8 +29,6 @@
   import IssueStateButton from "@app/components/IssueStateButton.svelte";
   import IssueTimelineLifecycleAction from "@app/components/IssueTimelineLifecycleAction.svelte";
   import LabelInput from "@app/components/LabelInput.svelte";
-  import Link from "@app/components/Link.svelte";
-  import NodeId from "@app/components/NodeId.svelte";
   import TextInput from "@app/components/TextInput.svelte";
   import ThreadComponent from "@app/components/Thread.svelte";
 
@@ -365,17 +363,6 @@
     margin-bottom: 0.5rem;
     color: var(--color-foreground-dim);
   }
-  .breadcrumbs {
-    display: flex;
-    gap: 0.5rem;
-    font-size: var(--font-size-tiny);
-    font-weight: var(--font-weight-semibold);
-    align-items: center;
-    min-height: 1.5rem;
-    width: 100%;
-    margin-bottom: 1rem;
-    color: var(--color-foreground-dim);
-  }
 </style>
 
 <Layout publicKey={config.publicKey}>
@@ -388,7 +375,12 @@
   {/snippet}
 
   {#snippet secondColumn()}
-    <IssueSecondColumn {repo} selectedIssueId={issue.id} {issues} {status} />
+    <IssueSecondColumn
+      {repo}
+      selectedIssueId={issue.id}
+      {issues}
+      {status}
+      title={project.data.name} />
   {/snippet}
 
   <div class="content">
@@ -438,32 +430,6 @@
       {/if}
     </div>
 
-    <div class="breadcrumbs txt-overflow">
-      <Link route={{ resource: "home" }}>
-        <NodeId
-          publicKey={config.publicKey}
-          alias={config.alias}
-          styleFontFamily="var(--font-family-sans-serif)"
-          styleFontSize="var(--font-size-tiny)" />
-      </Link>
-      <Icon name="chevron-right" />
-      <Link
-        route={{ resource: "repo.issues", rid: repo.rid, status: "open" }}
-        styleColor="var(--color-foreground-dim)">
-        {project.data.name}
-      </Link>
-      <Icon name="chevron-right" />
-      <Link
-        route={{ resource: "repo.issues", rid: repo.rid, status: "open" }}
-        styleColor="var(--color-foreground-dim)">
-        Issues
-      </Link>
-      <Icon name="chevron-right" />
-      <div class="txt-overflow">
-        {issue.title}
-      </div>
-    </div>
-
     <Border variant="ghost" styleGap="0">
       <div class="metadata-section" style:min-width="8rem">
         <div class="metadata-section-title">Status</div>

diff --git a/src/views/repo/Issues.svelte b/src/views/repo/Issues.svelte
@@ -13,8 +13,6 @@
   import Icon from "@app/components/Icon.svelte";
   import IssueTeaser from "@app/components/IssueTeaser.svelte";
   import IssuesSecondColumn from "@app/components/IssuesSecondColumn.svelte";
-  import Link from "@app/components/Link.svelte";
-  import NodeId from "@app/components/NodeId.svelte";
   import Sidebar from "@app/components/Sidebar.svelte";
 
   interface Props {
@@ -44,18 +42,6 @@
     align-items: center;
     justify-content: space-between;
   }
-  .breadcrumbs {
-    display: flex;
-    gap: 0.5rem;
-    font-size: var(--font-size-tiny);
-    font-weight: var(--font-weight-semibold);
-    align-items: center;
-    min-height: 1.5rem;
-    width: 100%;
-    margin-bottom: 1rem;
-    padding-left: 1rem;
-    color: var(--color-foreground-dim);
-  }
 </style>
 
 <Layout
@@ -93,24 +79,6 @@
     </div>
   </div>
 
-  <div class="breadcrumbs">
-    <Link route={{ resource: "home" }}>
-      <NodeId
-        publicKey={config.publicKey}
-        alias={config.alias}
-        styleFontFamily="var(--font-family-sans-serif)"
-        styleFontSize="var(--font-size-tiny)" />
-    </Link>
-    <Icon name="chevron-right" />
-    <Link
-      route={{ resource: "repo.issues", rid: repo.rid, status: "open" }}
-      styleColor="var(--color-foreground-dim)">
-      {project.data.name}
-    </Link>
-    <Icon name="chevron-right" />
-    Issues
-  </div>
-
   <div class="list">
     {#each issues as issue}
       <IssueTeaser {issue} rid={repo.rid} {status} />

diff --git a/src/views/repo/Patch.svelte b/src/views/repo/Patch.svelte
@@ -17,19 +17,17 @@
 
   import AssigneeInput from "@app/components/AssigneeInput.svelte";
   import Border from "@app/components/Border.svelte";
+  import Button from "@app/components/Button.svelte";
   import Changeset from "@app/components/Changeset.svelte";
   import CommentComponent from "@app/components/Comment.svelte";
   import CopyableId from "@app/components/CopyableId.svelte";
   import Icon from "@app/components/Icon.svelte";
   import InlineTitle from "@app/components/InlineTitle.svelte";
   import LabelInput from "@app/components/LabelInput.svelte";
   import Layout from "./Layout.svelte";
-  import Link from "@app/components/Link.svelte";
-  import NodeId from "@app/components/NodeId.svelte";
   import PatchStateBadge from "@app/components/PatchStateBadge.svelte";
   import PatchTeaser from "@app/components/PatchTeaser.svelte";
   import Sidebar from "@app/components/Sidebar.svelte";
-  import Button from "@app/components/Button.svelte";
 
   interface Props {
     repo: RepoInfo;
@@ -219,17 +217,6 @@
     margin-bottom: 0.5rem;
     color: var(--color-foreground-dim);
   }
-  .breadcrumbs {
-    display: flex;
-    gap: 0.5rem;
-    font-size: var(--font-size-tiny);
-    font-weight: var(--font-weight-semibold);
-    align-items: center;
-    min-height: 1.5rem;
-    width: 100%;
-    margin-bottom: 1rem;
-    color: var(--color-foreground-dim);
-  }
 </style>
 
 <Layout {loadMoreSecondColumn} publicKey={config.publicKey}>
@@ -243,9 +230,11 @@
 
   {#snippet secondColumn()}
     <div
-      style:height="34px"
-      class="global-flex txt-medium"
-      style:font-weight="var(--font-weight-medium)">
+      class="txt-regular txt-semibold global-flex"
+      style:gap="4px"
+      style:min-height="34px">
+      {project.data.name}
+      <Icon name="chevron-right" />
       Patches
     </div>
     <div class="patch-list">
@@ -266,30 +255,6 @@
       <InlineTitle content={patch.title} fontSize="medium" />
     </div>
 
-    <div class="breadcrumbs">
-      <Link route={{ resource: "home" }}>
-        <NodeId
-          publicKey={config.publicKey}
-          alias={config.alias}
-          styleFontFamily="var(--font-family-sans-serif)"
-          styleFontSize="var(--font-size-tiny)" />
-      </Link>
-      <Icon name="chevron-right" />
-      <Link
-        route={{ resource: "repo.patches", rid: repo.rid, status: "open" }}
-        styleColor="var(--color-foreground-dim)">
-        {project.data.name}
-      </Link>
-      <Icon name="chevron-right" />
-      <Link
-        route={{ resource: "repo.patches", rid: repo.rid, status: "open" }}
-        styleColor="var(--color-foreground-dim)">
-        Patches
-      </Link>
-      <Icon name="chevron-right" />
-      {patch.title}
-    </div>
-
     <Border variant="ghost" styleGap="0">
       <div class="metadata-section" style:min-width="8rem">
         <div class="metadata-section-title">Status</div>

diff --git a/src/views/repo/Patches.svelte b/src/views/repo/Patches.svelte
@@ -8,10 +8,7 @@
   import { invoke } from "@app/lib/invoke";
 
   import CopyableId from "@app/components/CopyableId.svelte";
-  import Icon from "@app/components/Icon.svelte";
   import Layout from "./Layout.svelte";
-  import Link from "@app/components/Link.svelte";
-  import NodeId from "@app/components/NodeId.svelte";
   import PatchTeaser from "@app/components/PatchTeaser.svelte";
   import PatchesSecondColumn from "@app/components/PatchesSecondColumn.svelte";
   import Sidebar from "@app/components/Sidebar.svelte";
@@ -68,18 +65,6 @@
     align-items: center;
     height: 58px;
   }
-  .breadcrumbs {
-    display: flex;
-    gap: 0.5rem;
-    font-size: var(--font-size-tiny);
-    font-weight: var(--font-weight-semibold);
-    align-items: center;
-    min-height: 1.5rem;
-    width: 100%;
-    margin-bottom: 1rem;
-    padding-left: 1rem;
-    color: var(--color-foreground-dim);
-  }
 </style>
 
 <Layout
@@ -103,23 +88,6 @@
 
   <div class="header">Patches</div>
 
-  <div class="breadcrumbs">
-    <Link route={{ resource: "home" }}>
-      <NodeId
-        publicKey={config.publicKey}
-        alias={config.alias}
-        styleFontFamily="var(--font-family-sans-serif)"
-        styleFontSize="var(--font-size-tiny)" />
-    </Link>
-    <Icon name="chevron-right" />
-    <Link
-      route={{ resource: "repo.issues", rid: repo.rid, status: "open" }}
-      styleColor="var(--color-foreground-dim)">
-      {project.data.name}
-    </Link>
-    <Icon name="chevron-right" />
-    Patches
-  </div>
   <div class="list">
     {#each items as patch}
       <PatchTeaser rid={repo.rid} {patch} {status} />