Improve project view

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

src/Avatar.svelte

@@ -2,7 +2,7 @@
   import { onMount } from 'svelte';
   import { createIcon } from '@app/blockies';
   import { isAddress, isRadicleId } from '@app/utils';
-  
+
   export let source: string;
   export let inline = false;
   export let glowOnHover = false;
@@ -24,6 +24,7 @@
 
 <style>
   .avatar {
+    display: block;
     border-radius: 50%;
     min-width: 1rem;
     min-height: 1rem;
@@ -36,7 +37,7 @@
     box-shadow: 0 0 3rem var(--color-secondary);
   }
   .inline {
-    display: inline-block;
+    display: inline-block !important;
     width: 1rem;
     height: 1rem;
     margin-right: 0.5rem;

src/base/projects/Browser.svelte

@@ -4,7 +4,6 @@
   import type { Profile } from '@app/profile';
   import * as proj from '@app/project';
   import Loading from '@app/Loading.svelte';
-  import Address from '@app/Address.svelte';
   import { Org } from '@app/base/orgs/Org';
   import * as utils from '@app/utils';
 
@@ -182,6 +181,23 @@
       <div class="commit">
         commit {commit}
       </div>
+      <div class="anchor">
+        {#if orgAddress}
+          {#await getAnchor}
+            <Loading small margins />
+          {:then anchor}
+            {#if anchor === commit}
+              <span class="anchor-widget">
+                <span class="anchor-label">anchored 🔒</span>
+              </span>
+            {:else}
+              <span class="anchor-widget not-anchored">
+                <span class="anchor-label">not anchored 🔓</span>
+              </span>
+            {/if}
+          {/await}
+        {/if}
+      </div>
       <div class="stat">
         <strong>{tree.stats.commits}</strong> commit(s)
       </div>
@@ -193,24 +209,6 @@
           <span>{config.seed.host}</span>
         </div>
       {/if}
-      <div class="anchor">
-        {#if orgAddress}
-          {#await getAnchor}
-            <Loading small margins />
-          {:then anchor}
-            {#if anchor === commit}
-              <span class="anchor-widget">
-                <span class="anchor-label">anchored</span>
-                <Address address={orgAddress} compact resolve noBadge profile={org} {config} />
-              </span>
-            {:else}
-              <span class="anchor-widget not-anchored">
-                <span class="anchor-label">not anchored 🔓</span>
-              </span>
-            {/if}
-          {/await}
-        {/if}
-      </div>
     </header>
     <div class="container center-content">
       {#if tree.entries.length}

src/base/projects/View.svelte

@@ -51,11 +51,21 @@
   }
 
   .title {
-    font-size: 2.25rem;
-    margin-bottom: 0.5rem;
-    display: flex;
-    justify-content: space-between;
+    display: inline-flex;
     align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+  }
+  .title .divider {
+    color: var(--color-foreground-subtle);
+    margin: 0 0.5rem;
+    font-weight: normal;
+  }
+  .org-avatar {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
   }
   .urn {
     font-family: var(--font-family-monospace);
@@ -65,17 +75,6 @@
   .description {
     margin: 1rem 0 1.5rem 0;
   }
-  .maintainers {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .maintainer {
-    display: inline-block;
-    width: 1rem;
-    height: 1rem;
-    margin-left: 0.5rem;
-  }
 </style>
 
 <main>
@@ -86,14 +85,13 @@
   {:then result}
     <header>
       <div class="title bold">
+        {#if result.org}
+          <a class="org-avatar" title={result.org.name || result.org.address} href={`/orgs/${org}`}>
+            <Avatar source={result.org.avatar || org}/>
+          </a>
+          <span class="divider">/</span>
+        {/if}
         <Link to={projectRoot}>{result.project.meta.name}</Link>
-        <span class="maintainers">
-          {#each result.project.meta.maintainers as user}
-            <span class="maintainer">
-              <Avatar source={user} />
-            </span>
-          {/each}
-        </span>
       </div>
       <div class="urn">{urn}</div>
       <div class="description">{result.project.meta.description}</div>