Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Commits › c0b1e41
Extract Topbar component
Rūdolfs Ošiņš committed 2 days ago
commit c0b1e41aef4d087bb3105a645db230a3d6af6aa8
parent 0bd6f6b
5 files changed +84 -79
added 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>
modified 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">
modified 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)}
modified 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">
modified 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;"