5832be5 Move breadcrumbs to second column — radicle-desktop

modified 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>

modified 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">

modified 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>

modified 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} />

modified src/views/repo/Patch.svelte

@@ -20,6 +20,7 @@

   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";

@@ -27,12 +28,9 @@

   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;

@@ -273,17 +271,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}>

@@ -297,9 +284,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">

@@ -320,30 +309,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>

modified 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} />