Show users on front page as well

Signed-off-by: Alexis Sellier <self@cloudhead.io>

src/Card.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { Link } from 'svelte-routing';
+  import Avatar from '@app/Avatar.svelte';
+  import type { Profile } from '@app/profile';
+  import type { Config } from '@app/config';
+  import { formatName, formatAddress } from '@app/utils';
+
+  export let profile: Profile;
+  export let config: Config;
+  export let path: string;
+  export let members: string[] = [];
+</script>
+
+<style>
+  .card {
+    width: 10rem;
+    height: 10rem;
+    margin-right: 3rem;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    display: inline-block;
+    text-align: center;
+    border-radius: 1rem;
+  }
+  .card::last-child {
+    margin-right: 0;
+  }
+  .card:hover  {
+    background: var(--color-foreground-background-lighter);
+  }
+  .card-avatar {
+    margin: 0 auto;
+    text-align: center;
+    width: 4rem;
+    height: 4rem;
+  }
+  .card-label {
+    color: var(--color-foreground-90);
+    display: inline-block;
+    font-weight: var(--font-weight-medium);
+    margin-top: 0.75rem;
+    border-radius: 0.75rem;
+    padding: 0rem 0.5rem;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    max-width: 8rem;
+  }
+  .card-members {
+    font-size: 0.875rem;
+    color: var(--color-foreground-faded);
+  }
+</style>
+
+<Link to={path}>
+  <div class="card">
+    <div class="card-avatar">
+      <Avatar source={profile.avatar ?? profile.address} address={profile.address} />
+    </div>
+    <div class="card-label">
+      {#if profile.name}
+        {formatName(profile.name, config)}
+      {:else}
+        {formatAddress(profile.address)}
+      {/if}
+    </div>
+    <div class="card-members">
+      {#if members.length > 0}
+        {members.length} members
+      {:else}
+        {formatAddress(profile.address)}
+      {/if}
+    </div>
+  </div>
+</Link>

src/base/home/Index.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { navigate } from 'svelte-routing';
   import type { Config } from '@app/config';
+  import { Profile } from '@app/profile';
   import { Org } from '@app/base/orgs/Org';
   import Loading from '@app/Loading.svelte';
   import Message from '@app/Message.svelte';
@@ -13,6 +14,14 @@
     ? Org.getMulti(config.orgs.pinned, config)
     : Org.getAll(config);
 
+  const getUsers = config.users.pinned.length > 0
+    ? Profile.getMulti(config.users.pinned, config)
+    : Promise.resolve([]);
+
+  const getEntities = Promise.all([getUsers, getOrgs]).then(([users, orgs]) => {
+    return { users: users, orgs: orgs };
+  });
+
   const viewMore = () => {
     navigate("/orgs");
   };
@@ -56,15 +65,15 @@
     </p>
   </div>
 
-  {#await getOrgs}
+  {#await getEntities}
     <div class="loading">
       <Loading center />
     </div>
-  {:then orgs}
+  {:then entities}
     <div class="heading">
       Explore <strong>orgs</strong> and <strong>projects</strong> on the Radicle network.
     </div>
-    <List {config} {orgs}>
+    <List {config} profiles={entities.users} orgs={entities.orgs}>
       <div class="orgs-empty">There are no orgs.</div>
     </List>
     <div class="actions">

src/base/orgs/List.svelte

@@ -1,68 +1,31 @@
 <script lang="ts">
   import { ethers } from 'ethers';
   import { onMount } from 'svelte';
-  import { Link } from 'svelte-routing';
   import type { Org } from '@app/base/orgs/Org';
-  import Avatar from '@app/Avatar.svelte';
   import { Profile } from '@app/profile';
   import type { Config } from '@app/config';
-  import { formatName, formatAddress } from '@app/utils';
   import Loading from '@app/Loading.svelte';
+  import Card from '@app/Card.svelte';
 
   export let config: Config;
-  export let orgs: Org[];
+  export let orgs: Org[] = [];
+  export let profiles: Profile[] = [];
 
   const orgMembers: Record<string, string[]> = {};
-  const getProfiles = Profile.getMulti(orgs.map(o => o.name ?? o.address), config);
+  const getOrgProfiles = Profile.getMulti(orgs.map(o => o.name ?? o.address), config);
 
   onMount(async () => {
-    const promises = orgs.map(org => org.getMembers(config).then(members => {
-      orgMembers[ethers.utils.getAddress(org.address)] = members;
-    }));
+    const promises = orgs.map(org => {
+      org.getMembers(config).then(members => {
+        orgMembers[ethers.utils.getAddress(org.address)] = members;
+      });
+    });
 
     Promise.all(promises);
   });
 </script>
 
 <style>
-  .org {
-    width: 10rem;
-    height: 10rem;
-    margin-right: 3rem;
-    margin-top: 1.5rem;
-    margin-bottom: 1.5rem;
-    padding: 1rem;
-    display: inline-block;
-    text-align: center;
-    border-radius: 1rem;
-  }
-  .org::last-child {
-    margin-right: 0;
-  }
-  .org:hover  {
-    background: var(--color-foreground-background-lighter);
-  }
-  .org-avatar {
-    margin: 0 auto;
-    text-align: center;
-    width: 4rem;
-    height: 4rem;
-  }
-  .org-label {
-    color: var(--color-foreground-90);
-    display: inline-block;
-    font-weight: var(--font-weight-medium);
-    margin-top: 0.75rem;
-    border-radius: 0.75rem;
-    padding: 0rem 0.5rem;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-    max-width: 8rem;
-  }
-  .org-members {
-    font-size: 0.875rem;
-    color: var(--color-foreground-faded);
-  }
   .list {
     display: flex;
     flex-direction: row;
@@ -73,34 +36,24 @@
   }
 </style>
 
-{#await getProfiles}
+{#await getOrgProfiles}
   <div class="loading">
     <Loading center />
   </div>
-{:then profiles}
+{:then orgProfiles}
   <div class="list">
+    {#each orgProfiles as profile}
+      {#if orgMembers[profile.address]?.length}
+        <Card {profile} {config} path={`/orgs/${profile.nameOrAddress}`} members={orgMembers[profile.address]} />
+      {:else}
+        <Card {profile} {config} path={`/orgs/${profile.nameOrAddress}`} />
+      {/if}
+    {:else}
+      <slot />
+    {/each}
+
     {#each profiles as profile}
-      <Link to={`/orgs/${profile.nameOrAddress}`}>
-        <div class="org">
-          <div class="org-avatar">
-            <Avatar source={profile.avatar ?? profile.address} address={profile.address} />
-          </div>
-          <div class="org-label">
-            {#if profile.name}
-              {formatName(profile.name, config)}
-            {:else}
-              {formatAddress(profile.address)}
-            {/if}
-          </div>
-          <div class="org-members">
-            {#if orgMembers[profile.address]?.length}
-              {orgMembers[profile.address].length} members
-            {:else}
-              {formatAddress(profile.address)}
-            {/if}
-          </div>
-        </div>
-      </Link>
+      <Card {profile} {config} path={`/users/${profile.nameOrAddress}`} />
     {:else}
       <slot />
     {/each}

src/config.json

@@ -21,6 +21,11 @@
         "dxdao.radicle.eth"
       ]
     },
+    "users": {
+      "pinned": [
+        "cloudhead.radicle.eth"
+      ]
+    },
     "safe": {
       "api": "https://safe-transaction.gnosis.io",
       "viewer": "https://gnosis-safe.io/app/#/safes"
@@ -47,6 +52,9 @@
       "contractHash": "0x5c34bb0755876de98e801805e6685456eea739ad0abba1cc450a7ee0f2a70b74",
       "pinned": []
     },
+    "users": {
+      "pinned": []
+    },
     "safe": {
       "api": "https://safe-transaction.rinkeby.gnosis.io",
       "viewer": "https://rinkeby.gnosis-safe.io/app/#/safes"

src/config.ts

@@ -32,6 +32,7 @@ export class Config {
   orgFactory: { address: string };
   reverseRegistrar: { address: string };
   orgs: { subgraph: string; contractHash: string; pinned: string[] };
+  users: { pinned: string[] };
   gasLimits: { createOrg: number };
   provider: ethers.providers.JsonRpcProvider;
   signer: ethers.Signer & TypedDataSigner | WalletConnectSigner | null;
@@ -110,6 +111,7 @@ export class Config {
     this.orgFactory = cfg.orgFactory;
     this.reverseRegistrar = cfg.reverseRegistrar;
     this.orgs = cfg.orgs;
+    this.users = cfg.users;
     this.safe = cfg.safe;
     this.safe.client = this.safe.api
       ? new SafeServiceClient(this.safe.api)