Extract header from repo card

This will be reused in the repo sidebar.
radicle-dev · Sep 13, 2024 · a5601e7 · a5601e7
1 parent 4f63f9e
commit a5601e7
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 35 deletions.
diff --git a/src/components/Border.svelte b/src/components/Border.svelte
@@ -7,6 +7,7 @@
   export let styleHeight: string | undefined = undefined;
   export let styleMinHeight: string | undefined = undefined;
   export let styleWidth: string | undefined = undefined;
+  export let styleCursor: "default" | "pointer" = "default";
 
   $: style =
     `--local-button-color-1: var(--color-fill-${variant});` +
@@ -110,7 +111,6 @@
   }
 
   .container {
-    cursor: pointer;
     white-space: nowrap;
 
     -webkit-touch-callout: none;
@@ -150,6 +150,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   style:width={styleWidth}
+  style:cursor={styleCursor}
   class="container"
   {onclick}
   role="button"

diff --git a/src/components/Fill.svelte b/src/components/Fill.svelte
@@ -9,6 +9,7 @@
   export let stylePadding: string | undefined = undefined;
   export let styleHeight: string | undefined = undefined;
   export let styleWidth: string | undefined = undefined;
+  export let styleCursor: "inherit" | "pointer" = "inherit";
   export let onclick: (() => void) | undefined = undefined;
 
   $: style =
@@ -61,7 +62,6 @@
   }
 
   .container {
-    cursor: pointer;
     white-space: nowrap;
 
     -webkit-touch-callout: none;
@@ -88,6 +88,7 @@
   {onclick}
   {style}
   style:width={styleWidth}
+  style:cursor={styleCursor}
   style:height={styleHeight}>
   <div class="pixel p1-1"></div>
   <div class="pixel p1-2"></div>

diff --git a/src/components/RepoCard.svelte b/src/components/RepoCard.svelte
@@ -4,8 +4,8 @@
   import { formatRepositoryId, formatTimestamp } from "@app/lib/utils";
 
   import Border from "./Border.svelte";
-  import Fill from "./Fill.svelte";
   import Icon from "./Icon.svelte";
+  import RepoHeader from "./RepoHeader.svelte";
 
   export let repo: RepoInfo;
   export let selfDid: string;
@@ -15,9 +15,6 @@
 </script>
 
 <style>
-  .header {
-    justify-content: space-between;
-  }
   .footer {
     margin-top: 1rem;
     justify-content: space-between;
@@ -34,40 +31,13 @@
 
 <Border
   variant="ghost"
+  styleCursor="pointer"
   styleWidth="100%"
   stylePadding="8px 12px"
   hoverable
   {onclick}>
   <div class="container txt-small">
-    <div class="global-flex header">
-      <div class="global-flex">
-        <Fill styleWidth="1.5rem" styleHeight="24px" variant="ghost">
-          {project.data.name[0]}
-        </Fill>{project.data.name}
-      </div>
-      <div class="global-flex">
-        {#if repo.visibility.type === "private"}
-          <Fill variant="private" styleWidth="24px" styleHeight="24px">
-            <div style:color="var(--color-foreground-yellow)">
-              <Icon name="lock" />
-            </div>
-          </Fill>
-        {/if}
-        {#if repo.delegates.find(x => x.did === selfDid)}
-          <Fill variant="delegate" styleWidth="24px" styleHeight="24px">
-            <div style:color="var(--color-fill-primary)">
-              <Icon name="delegate" />
-            </div>
-          </Fill>
-        {/if}
-        <div class="global-flex">
-          <Fill variant="ghost" styleHeight="24px" stylePadding="0 4px">
-            <Icon name="seedling" />
-            {repo.seeding}
-          </Fill>
-        </div>
-      </div>
-    </div>
+    <RepoHeader {repo} {selfDid} />
 
     <div class="title">
       {#if project.data.description}

diff --git a/src/components/RepoHeader.svelte b/src/components/RepoHeader.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { RepoInfo } from "@bindings/RepoInfo";
+
+  import Fill from "./Fill.svelte";
+  import Icon from "./Icon.svelte";
+
+  export let repo: RepoInfo;
+  export let selfDid: string;
+  export let emphasizedTitle: boolean = true;
+
+  $: project = repo.payloads["xyz.radicle.project"]!;
+</script>
+
+<style>
+  .header {
+    justify-content: space-between;
+    width: 100%;
+  }
+</style>
+
+<div class="global-flex header txt-small">
+  <div class="global-flex">
+    <Fill styleWidth="1.5rem" styleHeight="24px" variant="ghost">
+      {project.data.name[0]}
+    </Fill>
+    {#if emphasizedTitle}
+      <span class="txt-regular txt-semibold">{project.data.name}</span>
+    {:else}
+      <span class="txt-small txt-semibold">{project.data.name}</span>
+    {/if}
+  </div>
+  <div class="global-flex">
+    {#if repo.visibility.type === "private"}
+      <Fill variant="private" styleWidth="24px" styleHeight="24px">
+        <div style:color="var(--color-foreground-yellow)">
+          <Icon name="lock" />
+        </div>
+      </Fill>
+    {/if}
+    {#if repo.delegates.find(x => x.did === selfDid)}
+      <Fill variant="delegate" styleWidth="24px" styleHeight="24px">
+        <div style:color="var(--color-fill-primary)">
+          <Icon name="delegate" />
+        </div>
+      </Fill>
+    {/if}
+    <div class="global-flex">
+      <Fill variant="ghost" styleHeight="24px" stylePadding="0 4px">
+        <Icon name="seedling" />
+        <span style:line-height="16px">{repo.seeding}</span>
+      </Fill>
+    </div>
+  </div>
+</div>
diff --git a/src/components/ThemeSwitch.svelte b/src/components/ThemeSwitch.svelte
@@ -37,6 +37,7 @@
 <div style="display: flex; gap: 1rem;">
   <Border variant="secondary">
     <Fill
+      styleCursor="pointer"
       stylePadding="0 0.5rem"
       variant={$theme === "dark" ? "secondary" : "transparent"}
       onclick={() => {
@@ -47,6 +48,7 @@
     </Fill>
 
     <Fill
+      styleCursor="pointer"
       stylePadding="0 0.5rem"
       variant={$theme === "light" ? "secondary" : "transparent"}
       onclick={() => {