Work on mobile layout

src/app/components/Landing.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
   import CardButton from "@lib/components/CardButton.svelte"
   import LogIn from "@app/components/LogIn.svelte"
   import SignUp from "@app/components/SignUp.svelte"
@@ -14,10 +16,18 @@
     <h1 class="heading">Welcome to Flotilla!</h1>
     <p class="text-center">The chat app built for sovereign communities.</p>
   </div>
-  <CardButton icon="login-2" title="Log in" on:click={logIn}>
-    If you've been here before, you know the drill.
-  </CardButton>
-  <CardButton icon="add-circle" title="Create an account" on:click={signUp}>
-    Just a few questions and you'll be on your way.
-  </CardButton>
+  <Button on:click={logIn}>
+    <CardButton>
+      <div slot="icon"><Icon icon="login-2" size={7} /></div>
+      <div slot="title">Log in</div>
+      <div slot="info">If you've been here before, you know the drill.</div>
+    </CardButton>
+  </Button>
+  <Button on:click={signUp}>
+    <CardButton>
+      <div slot="icon"><Icon icon="add-circle" size={7} /></div>
+      <div slot="title">Create an account</div>
+      <div slot="info">Just a few questions and you'll be on your way.</div>
+    </CardButton>
+  </Button>
 </div>

src/app/components/PrimaryNav.svelte

@@ -1,14 +1,5 @@
-<style>
-  .z-nav-active {
-    -webkit-mask-image: url("/nav-active.svg");
-    mask-image: url("/nav-active.svg");
-  }
-</style>
-
 <script lang="ts">
   import {page} from "$app/stores"
-  import {tweened} from "svelte/motion"
-  import {quintOut} from "svelte/easing"
   import {displayRelayUrl} from "@welshman/util"
   import {userProfile} from "@welshman/app"
   import Avatar from "@lib/components/Avatar.svelte"
@@ -19,53 +10,47 @@
   import {pushModal} from "@app/modal"
   import {makeSpacePath, getPrimaryNavItemIndex} from "@app/routes"
 
-  const activeOffset = tweened(-44, {
-    duration: 300,
-    easing: quintOut,
-  })
-
   const addSpace = () => pushModal(SpaceAdd)
-
-  let element: HTMLElement
-
-  // Set the active highlight element to the offset of the nav item we're focused on
-  $: {
-    if (element) {
-      const index = getPrimaryNavItemIndex($page)
-      const navItems: any = Array.from(element.querySelectorAll(".z-nav-item") || [])
-
-      activeOffset.set(navItems[index].offsetTop - 44)
-    }
-  }
 </script>
 
-<div class="relative w-14 flex-shrink-0 bg-base-100 pt-4" bind:this={element}>
-  <div
-    class="absolute z-nav-active ml-2 h-[144px] w-12 bg-base-300"
-    style={`top: ${$activeOffset}px`} />
+<div class="relative w-14 flex-shrink-0 bg-base-100 pt-4 hidden sm:block">
   <div class="flex h-full flex-col justify-between">
     <div>
-      <PrimaryNavItem href="/home">
-        <Avatar
-          src={$userProfile?.picture}
-          class="!h-10 !w-10 border border-solid border-base-300" />
+      <PrimaryNavItem href="/home" class="tooltip-right">
+        <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
       </PrimaryNavItem>
       {#each getMembershipUrls($userMembership) as url (url)}
-        <PrimaryNavItem title={displayRelayUrl(url)} href={makeSpacePath(url)}>
+        <PrimaryNavItem title={displayRelayUrl(url)} href={makeSpacePath(url)} class="tooltip-right">
           <SpaceAvatar {url} />
         </PrimaryNavItem>
       {/each}
-      <PrimaryNavItem title="Add Space" on:click={addSpace}>
-        <Avatar icon="add-circle" class="!h-10 !w-10 border border-solid border-base-300" />
+      <PrimaryNavItem title="Add Space" on:click={addSpace} class="tooltip-right">
+        <Avatar icon="add-circle" class="!h-10 !w-10" />
       </PrimaryNavItem>
-      <PrimaryNavItem title="Discover Spaces" href="/discover">
-        <Avatar icon="compass-big" class="!h-10 !w-10 border border-solid border-base-300" />
+      <PrimaryNavItem title="Discover Spaces" href="/discover" class="tooltip-right">
+        <Avatar icon="compass-big" class="!h-10 !w-10" />
       </PrimaryNavItem>
     </div>
     <div>
-      <PrimaryNavItem title="Settings" href="/settings/profile">
-        <Avatar icon="settings" class="!h-10 !w-10 border border-solid border-base-300" />
+      <PrimaryNavItem title="Settings" href="/settings/profile" class="tooltip-right">
+        <Avatar icon="settings" class="!h-10 !w-10" />
       </PrimaryNavItem>
     </div>
   </div>
 </div>
+
+<slot />
+
+<div class="fixed bottom-0 left-0 right-0 h-14 bg-base-100 sm:hidden z-nav">
+  <div class="flex justify-between max-w-sm m-auto px-2">
+    <PrimaryNavItem title="Home" href="/home">
+      <Avatar icon="home-smile" class="!h-10 !w-10" />
+    </PrimaryNavItem>
+    <PrimaryNavItem title="Spaces" href="/spaces">
+      <SpaceAvatar />
+    </PrimaryNavItem>
+    <PrimaryNavItem title="Settings" href="/settings/profile">
+      <Avatar icon="settings" class="!h-10 !w-10" />
+    </PrimaryNavItem>
+  </div>
+</div>

src/app/components/RelayDescription.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import {deriveRelay} from '@welshman/app'
+
+  export let url
+
+  const relay = deriveRelay(url)
+</script>
+
+{#if $relay?.profile?.description}
+  <p>{$relay?.profile.description}</p>
+{/if}

src/app/components/RelayName.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import {deriveRelayDisplay} from '@welshman/app'
+
+  export let url
+
+  const display = deriveRelayDisplay(url)
+</script>
+
+{$display}

src/app/components/SpaceAdd.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
   import CardButton from "@lib/components/CardButton.svelte"
   import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
@@ -16,10 +18,18 @@
       Spaces are places where communities come together to work, play, and hang out.
     </p>
   </div>
-  <CardButton icon="add-circle" title="Create a space" on:click={startCreate}>
-    Just a few questions and you'll be on your way.
-  </CardButton>
-  <CardButton icon="login-2" title="Join a space" on:click={startJoin}>
-    Enter an invite code or url to join an existing space.
-  </CardButton>
+  <Button on:click={startCreate}>
+    <CardButton>
+      <div slot="icon"><Icon icon="add-circle" size={7} /></div>
+      <div slot="title">Create a space</div>
+      <div slot="info">Just a few questions and you'll be on your way.</div>
+    </CardButton>
+  </Button>
+  <Button on:click={startJoin}>
+    <CardButton>
+      <div slot="icon"><Icon icon="login-2" size={7} /></div>
+      <div slot="title">Join a space</div>
+      <div slot="info">Enter an invite code or url to join an existing space.</div>
+    </CardButton>
+  </Button>
 </div>

src/app/components/SpaceAvatar.svelte

@@ -3,13 +3,13 @@
   import Avatar from "@lib/components/Avatar.svelte"
   import {deriveRelay} from "@welshman/app"
 
-  export let url
+  export let url = ""
 
   const relay = deriveRelay(url)
 </script>
 
 <Avatar
   icon="remote-controller-minimalistic"
-  class="!h-10 !w-10 border border-solid border-base-300"
+  class="!h-10 !w-10"
   alt={displayRelayUrl(url)}
   src={$relay?.profile?.icon} />

src/app/components/SpaceInviteAccept.svelte

@@ -70,9 +70,13 @@
       <Button class="link" on:click={() => pushModal(InfoRelay)}>What is a relay?</Button>
     </p>
   </Field>
-  <CardButton icon="compass" title="Don't have an invite?" on:click={browse}>
-    Browse other spaces on the discover page.
-  </CardButton>
+  <Button on:click={browse}>
+    <CardButton>
+      <div slot="icon"><Icon icon="compass" size={7} /></div>
+      <div slot="title">Don't have an invite?</div>
+      <div slot="info">Browse other spaces on the discover page.</div>
+    </CardButton>
+  </Button>
   <div class="flex flex-row items-center justify-between gap-4">
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />