Add 16x16 icons to project header

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>

src/components/Icon.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { unreachable } from "@app/lib/utils";
 
+  export let size: "small" | "regular" = "regular";
   export let name:
     | "browse"
     | "chat"
@@ -37,8 +38,8 @@
 <svg
   role="img"
   on:click
-  height="24"
-  width="24"
+  height={size === "regular" ? "24" : "16"}
+  width={size === "regular" ? "24" : "16"}
   fill="currentColor"
   viewBox="0 0 24 24">
   {#if name === "browse"}

src/components/SquareButton.svelte

@@ -1,9 +1,10 @@
 <script lang="ts" strictEvents>
   export let active: boolean = false;
-  export let hoverable: boolean = true;
   export let clickable: boolean = false;
   export let disabled: boolean = false;
+  export let hoverable: boolean = true;
   export let size: "small" | "regular" = "regular";
+  export let title: string | undefined = undefined;
 </script>
 
 <style>
@@ -19,6 +20,7 @@
     font-family: var(--font-family-monospace);
     font-size: var(--font-size-tiny);
     white-space: nowrap;
+    gap: 0.5rem;
   }
 
   .small {
@@ -62,6 +64,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
+  {title}
   on:click
   class="square-button"
   class:active
@@ -69,7 +72,8 @@
   class:disabled
   class:small={size === "small"}
   class:clickable>
-  <span>
+  <slot name="icon" />
+  <div style:display="block">
     <slot />
-  </span>
+  </div>
 </div>

src/views/projects/Header.svelte

@@ -47,11 +47,6 @@
       margin-bottom: 1.5rem;
     }
   }
-  .trackings {
-    display: flex;
-    align-items: center;
-    gap: 0.2rem;
-  }
 </style>
 
 <div class="header">
@@ -84,6 +79,9 @@
     <SquareButton
       active={activeRoute.params.view.resource === "issues" ||
         activeRoute.params.view.resource === "issue"}>
+      <svelte:fragment slot="icon">
+        <Icon size="small" name="exclamation-circle" />
+      </svelte:fragment>
       <span class="txt-bold">{openIssueCount}</span>
       {pluralize("issue", openIssueCount)}
     </SquareButton>
@@ -103,6 +101,9 @@
     <SquareButton
       active={activeRoute.params.view.resource === "patches" ||
         activeRoute.params.view.resource === "patch"}>
+      <svelte:fragment slot="icon">
+        <Icon size="small" name="patch" />
+      </svelte:fragment>
       <span class="txt-bold">{openPatchCount}</span>
       {pluralize("patch", openPatchCount)}
     </SquareButton>
@@ -124,9 +125,11 @@
       {isLocal(baseUrl.hostname) ? "radicle.local" : baseUrl.hostname}
     </SquareButton>
   </Link>
-  <SquareButton hoverable={false}>
-    <span class="trackings" title="Tracked by {trackings} nodes">
-      <Icon name="network" />{trackings} nodes
-    </span>
+  <SquareButton hoverable={false} title="Tracked by {trackings} nodes">
+    <svelte:fragment slot="icon">
+      <Icon size="small" name="network" />
+    </svelte:fragment>
+    <span class="txt-bold">{trackings}</span>
+    nodes
   </SquareButton>
 </div>

src/views/projects/PeerSelector.svelte

@@ -73,7 +73,7 @@
   <div slot="toggle" class="selector" title="Change peer">
     <div class="stat peer" class:selected={peer} class:not-allowed={!peers}>
       {#if !peer}
-        <Icon name="fork" />
+        <Icon size="small" name="fork" />
       {/if}
       {#if meta}
         <span class="avatar-id">