Add seed count badge to project cards — radicle-explorer

rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5

Radicle web interface

Add seed count badge to project cards

Merged rudolfs opened 1 year ago

3 files changed +10 -45 77cc3ce0 → bd551911

modified src/components/ProjectCard.svelte

@@ -1,4 +1,6 @@

 <script lang="ts">
   import type { ProjectInfo } from "./ProjectCard";
   import {
     absoluteTimestamp,
     formatTimestamp,

@@ -7,17 +9,15 @@

   } from "@app/lib/utils";
   import ActivityDiagram from "@app/components/ActivityDiagram.svelte";
   import Badge from "@app/components/Badge.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import Link from "@app/components/Link.svelte";
   import type { ProjectInfo } from "./ProjectCard";
   export let compact = false;
   export let projectInfo: ProjectInfo;
   export let isDelegate: boolean;
   export let isSeeding: boolean;
   $: project = projectInfo.project;
   $: baseUrl = projectInfo.baseUrl;

@@ -165,14 +165,13 @@

               <IconSmall name="badge" />
             </div>
           {/if}
           {#if isSeeding}
             <div
               title="Seeding"
               class="badge"
               style="background-color: var(--color-fill-counter-emphasized); color: var(--color-foreground-emphasized)">
               <IconSmall name="seedling" />
             </div>
           {/if}
           <Badge
             variant="neutral"
             size="tiny"
             style="padding: 0 0.372rem; gap: 0.125rem;">
             <IconSmall name="seedling" />
             {projectInfo.project.seeding}
           </Badge>
         </div>
       </div>
       <p class="txt-small" use:twemoji>{project.description}</p>

modified src/views/home/Index.svelte

@@ -78,11 +78,6 @@

     }).catch(error => error);
   }
   function isSeeding(projectId: string) {
     if (localProjects instanceof Error) return false;
     return localProjects?.some(p => p.project.id === projectId) ?? false;
   }
   $: nodeId = $httpdStore.state !== "stopped" ? $httpdStore.node.id : undefined;
   $: nodeId && void loadLocalProjects();
   $: $selectedSeed && void loadPreferredSeedProjects();

@@ -208,7 +203,6 @@

                 )}
                 <ProjectCard
                   {projectInfo}
                   isSeeding={true}
                   isDelegate={isDelegate(nodeId, delegates) ?? false} />
               {/each}
             {/if}

@@ -284,7 +278,6 @@

             {@const delegates = projectInfo.project.delegates.map(d => d.id)}
             <ProjectCard
               {projectInfo}
               isSeeding={isSeeding(projectInfo.project.id)}
               isDelegate={isDelegate(nodeId, delegates) ?? false} />
           {/each}
         {/if}

modified src/views/nodes/View.svelte

@@ -1,7 +1,5 @@

 <script lang="ts">
   import type { BaseUrl, NodeStats, Policy, Scope } from "@httpd-client";
   import type { ComponentProps } from "svelte";
   import type { ProjectInfo } from "@app/components/ProjectCard";
   import * as router from "@app/lib/router";
   import { api, httpdStore } from "@app/lib/httpd";

@@ -9,11 +7,9 @@

   import { fetchProjectInfos } from "@app/components/ProjectCard";
   import { handleError } from "@app/views/nodes/error";
   import { isDelegate } from "@app/lib/roles";
   import { onMount } from "svelte";
   import AppLayout from "@app/App/AppLayout.svelte";
   import CopyableId from "@app/components/CopyableId.svelte";
   import ErrorMessage from "@app/components/ErrorMessage.svelte";
   import Loading from "@app/components/Loading.svelte";
   import ProjectCard from "@app/components/ProjectCard.svelte";
   import ScopePolicyPopover from "@app/views/nodes/ScopePolicyPopover.svelte";

@@ -26,26 +22,6 @@

   export let policy: Policy | undefined = undefined;
   export let scope: Scope | undefined = undefined;
   let localProjects:
     | ProjectInfo[]
     | ComponentProps<ErrorMessage>["error"]
     | undefined;
   onMount(async () => {
     localProjects = await fetchProjectInfos(api.baseUrl, {
       show: "all",
       perPage: stats.repos.total,
     }).catch(error => error);
   });
   function isSeeding(projectId: string) {
     if (localProjects instanceof Error) {
       console.error("Not able to fetch local projects", localProjects);
       return false;
     }
     return localProjects?.some(p => p.project.id === projectId) ?? false;
   }
   $: hostname = isLocal(baseUrl.hostname) ? "Local Node" : baseUrl.hostname;
   $: session =
     $httpdStore.state === "authenticated" && isLocal(api.baseUrl.hostname)

@@ -189,9 +165,6 @@

               {#each projectInfos as projectInfo}
                 <ProjectCard
                   {projectInfo}
                   isSeeding={isLocal(baseUrl.hostname)
                     ? true
                     : isSeeding(projectInfo.project.id)}
                   isDelegate={isDelegate(
                     session?.publicKey,
                     projectInfo.project.delegates.map(d => d.id),