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.
+  <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>
-  <CardButton icon="add-circle" title="Create an account" on:click={signUp}>
-    Just a few questions and you'll be on your way.
+  </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.
+  <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>
-  <CardButton icon="login-2" title="Join a space" on:click={startJoin}>
-    Enter an invite code or url to join an existing space.
+  </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.
+  <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" />

src/lib/components/CardButton.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
-  import cx from "classnames"
   import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-
-  export let icon
-  export let title
 </script>
 
-<Button on:click class={cx($$props.class, "btn btn-neutral btn-lg h-24 text-left")}>
-  <div class="flex flex-grow items-center gap-6 py-4">
-    <Icon class="bg-accent" size={7} {icon} />
-    <div class="flex flex-grow flex-col gap-1">
-      <p class="text-bold">{title}</p>
-      <p class="text-xs"><slot /></p>
+<div class="btn btn-neutral btn-lg h-24 text-left w-full">
+  <div class="flex gap-6 flex-row justify-between items-center w-full {$$props.class}">
+    <div class="flex gap-6 items-center">
+      <div class="w-12 center">
+        <slot name="icon" />
       </div>
+      <div class="flex flex-grow flex-col gap-1">
+        <p class="text-bold"><slot name="title" /></p>
+        <p class="text-xs"><slot name="info" /></p>
+      </div>
+    </div>
+    <div class="w-12 center">
       <Icon size={7} icon="alt-arrow-right" />
     </div>
-</Button>
+  </div>
+</div>

src/lib/components/Page.svelte

@@ -1,3 +1,3 @@
-<div class="max-h-screen flex-grow overflow-auto bg-base-200">
+<div class="max-h-screen flex-grow overflow-auto bg-base-200 pb-12 sm:pb-0">
   <slot />
 </div>

src/lib/components/PrimaryNavItem.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
+  import {page} from '$app/stores'
   import Button from "@lib/components/Button.svelte"
 
   export let title = ""
   export let href = ""
+
+  $: active = href && $page.route?.id?.startsWith(href)
 </script>
 
 {#if href}
   <a {href} class="relative z-nav-item flex h-14 w-14 items-center justify-center">
     <div
-      class="avatar tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
+      class="avatar cursor-pointer rounded-full p-1 {$$props.class} hover:bg-base-300 transition-colors"
+      class:bg-base-300={active}
       class:tooltip={title}
       data-tip={title}>
       <slot />
@@ -17,7 +21,8 @@
 {:else}
   <Button on:click class="relative z-nav-item flex h-14 w-14 items-center justify-center">
     <div
-      class="avatar tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
+      class="avatar cursor-pointer rounded-full p-1 {$$props.class} hover:bg-base-300 transition-colors"
+      class:bg-base-300={active}
       class:tooltip={title}
       data-tip={title}>
       <slot />

src/routes/+layout.svelte

@@ -110,10 +110,11 @@
 {:then}
   <div data-theme={$theme}>
     <div class="flex h-screen overflow-hidden">
-      <PrimaryNav />
+      <PrimaryNav>
         {#key JSON.stringify($page.params)}
           <slot />
         {/key}
+      </PrimaryNav>
     </div>
     <dialog bind:this={dialog} class="modal modal-bottom !z-modal sm:modal-middle">
       {#if prev && !prev.options?.drawer}

src/routes/discover/+page.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import Masonry from "svelte-bricks"
-  import {displayRelayUrl} from "@welshman/util"
   import {relaySearch} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
+  import RelayName from "@app/components/RelayName.svelte"
+  import RelayDescription from "@app/components/RelayDescription.svelte"
   import {makeSpacePath} from "@app/routes"
   import {userMembership, discoverRelays, getMembershipUrls} from "@app/state"
 
@@ -47,7 +48,7 @@
     let:item={relay}>
     <a
       href={makeSpacePath(relay.url)}
-      class="flex flex-col gap-2 card2 bg-alt shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]">
+      class="flex flex-col gap-2 card2 text-center bg-alt shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]">
       <div class="center avatar mt-8">
         <div
           class="center relative !flex w-20 rounded-full border-2 border-solid border-base-300 bg-base-300">
@@ -69,10 +70,13 @@
           </div>
         </div>
       {/if}
-      <h2 class="text-center">{displayRelayUrl(relay.url)}</h2>
-      {#if relay.profile?.description}
-        <p class="py-4 text-center text-sm">{relay.profile.description}</p>
-      {/if}
+      <div>
+        <h2 class="text-center text-xl">
+          <RelayName url={relay.url} />
+        </h2>
+        <p class="opacity-75 text-sm">{relay.url}</p>
+      </div>
+      <RelayDescription url={relay.url} />
     </a>
   </Masonry>
 </div>

src/routes/home/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import {goto} from "$app/navigation"
+  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 {pushModal} from "@app/modal"
@@ -20,18 +22,34 @@
       <h1 class="text-center text-5xl">Welcome to</h1>
       <h1 class="mb-4 text-center text-5xl font-bold uppercase">Flotilla</h1>
       <div class="grid gap-3 lg:grid-cols-2">
-        <CardButton icon="add-circle" title="Create a space" class="h-24" on:click={createSpace}>
-          Invite all your friends, do life together.
+        <Button on:click={createSpace}>
+          <CardButton>
+            <div slot="icon"><Icon icon="add-circle" size={7} /></div>
+            <div slot="title">Create a space</div>
+            <div slot="info">Invite all your friends, do life together.</div>
           </CardButton>
-        <CardButton icon="compass" title="Discover spaces" class="h-24" on:click={browseSpaces}>
-          Find a community based on your hobbies or interests.
+        </Button>
+        <Button on:click={browseSpaces}>
+          <CardButton>
+            <div slot="icon"><Icon icon="compass" size={7} /></div>
+            <div slot="title">Discover spaces</div>
+            <div slot="info">Find a community based on your hobbies or interests.</div>
           </CardButton>
-        <CardButton icon="plain" title="Leave feedback" class="h-24" on:click={leaveFeedback}>
-          Let us know how we can improve by giving us feedback.
+        </Button>
+        <Button on:click={leaveFeedback}>
+          <CardButton>
+            <div slot="icon"><Icon icon="plain" size={7} /></div>
+            <div slot="title">Leave feedback</div>
+            <div slot="info">Let us know how we can improve by giving us feedback.</div>
           </CardButton>
-        <CardButton icon="hand-pills" title="Donate to Flotilla" class="h-24" on:click={donate}>
-          Support the project by donating to the developer.
+        </Button>
+        <Button on:click={donate}>
+          <CardButton>
+            <div slot="icon"><Icon icon="hand-pills" size={7} /></div>
+            <div slot="title">Donate to Flotilla</div>
+            <div slot="info">Support the project by donating to the developer.</div>
           </CardButton>
+        </Button>
       </div>
     </div>
   </div>

src/routes/spaces/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import {goto} from '$app/navigation'
+  import Icon from '@lib/components/Icon.svelte'
+  import Page from '@lib/components/Page.svelte'
+  import Link from '@lib/components/Link.svelte'
+  import Button from '@lib/components/Button.svelte'
+  import Divider from '@lib/components/Divider.svelte'
+  import CardButton from '@lib/components/CardButton.svelte'
+  import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
+  import RelayName from "@app/components/RelayName.svelte"
+  import RelayDescription from "@app/components/RelayDescription.svelte"
+  import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
+  import {userMembership, getMembershipUrls} from "@app/state"
+  import {makeSpacePath} from "@app/routes"
+  import {pushModal} from "@app/modal"
+
+  const createSpace = () => pushModal(SpaceCreateExternal)
+
+  const browseSpaces = () => goto("/discover")
+</script>
+
+<Page>
+  <div class="content column gap-4">
+    <h1 class="superheading mt-20">Spaces</h1>
+    <p class="text-center">Jump back in to your community, or find a new one</p>
+    <div class="flex flex-col gap-2">
+      {#each getMembershipUrls($userMembership) as url (url)}
+        <Link href={makeSpacePath(url)}>
+          <CardButton>
+            <div slot="icon"><SpaceAvatar {url} /></div>
+            <div slot="title"><RelayName {url} /></div>
+            <div slot="info"><RelayDescription {url} /></div>
+          </CardButton>
+        </Link>
+      {/each}
+      <Divider />
+      <Button on:click={createSpace}>
+        <CardButton>
+          <div slot="icon"><Icon icon="add-circle" size={7} /></div>
+          <div slot="title">Create a space</div>
+          <div slot="info">Invite all your friends, do life together.</div>
+        </CardButton>
+      </Button>
+      <Button on:click={browseSpaces}>
+        <CardButton>
+          <div slot="icon"><Icon icon="compass" size={7} /></div>
+          <div slot="title">Discover spaces</div>
+          <div slot="info">Find a community based on your hobbies or interests.</div>
+        </CardButton>
+      </Button>
+    </div>
+  </div>
+</Page>

src/routes/spaces/[nrelay]/[[room]]/+page.svelte

@@ -80,7 +80,7 @@
   }, 3000)
 </script>
 
-<div class="relative flex h-screen flex-col">
+<div class="relative flex h-full flex-col">
   <div class="relative z-feature mx-2 rounded-xl pt-4">
     <div
       class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">

tailwind.config.js

@@ -10,10 +10,11 @@ export default {
       "nav-active": 1,
       "nav-item": 2,
       feature: 3,
-      popover: 4,
-      modal: 5,
-      "modal-feature": 6,
-      toast: 7,
+      nav: 4,
+      popover: 5,
+      modal: 6,
+      "modal-feature": 7,
+      toast: 8,
     },
   },
   plugins: [daisyui],