Generate username color based on hash

2025-12-10 19:07:06 +00:00 · 2024-08-16 15:17:30 -07:00
parent 0eb65be427
commit 297e69af21
19 changed files with 329 additions and 73 deletions
--- a/src/app/base.ts
+++ b/src/app/base.ts
@@ -8,7 +8,9 @@ import {Nip46Broker, Nip46Signer, Nip07Signer, Nip01Signer} from "@welshman/sign
 import {synced} from "@lib/util"
 import type {Session} from "@app/types"

-export const INDEXER_RELAYS = ["wss://purplepag.es", "wss://relay.damus.io", "wss://nos.lol"]
+export const DEFAULT_RELAYS = ["wss://groups.fiatjaf.com/"]
+
+export const INDEXER_RELAYS = ["wss://purplepag.es/", "wss://relay.damus.io/", "wss://nos.lol/"]

 export const DUFFLEPUD_URL = "https://dufflepud.onrender.com"

@@ -33,6 +35,8 @@ export const addSession = (session: Session) => {
  pk.set(session.pubkey)
 }

+export const nip46Perms = "sign_event:22242,nip04_encrypt,nip04_decrypt,nip44_encrypt,nip44_decrypt"
+
 export const getSigner = memoize((session: Session) => {
  switch (session?.method) {
    case "extension":
--- a/src/app/commands.ts
+++ b/src/app/commands.ts
@@ -1,11 +1,34 @@
 import {uniqBy, uniq, now} from "@welshman/lib"
-import {GROUPS, asDecryptedEvent, getGroupTags, getRelayTagValues, readList, editList, makeList, createList} from "@welshman/util"
+import {
+  GROUPS,
+  asDecryptedEvent,
+  getGroupTags,
+  getRelayTagValues,
+  readList,
+  editList,
+  makeList,
+  createList,
+} from "@welshman/util"
 import {pk, signer, repository, INDEXER_RELAYS} from "@app/base"
-import {getWriteRelayUrls, loadGroup, loadGroupMembership, loadProfile, loadFollows, loadMutes, loadRelaySelections, publish, ensurePlaintext} from "@app/state"
+import {
+  getWriteRelayUrls,
+  loadGroup,
+  loadGroupMembership,
+  loadProfile,
+  loadFollows,
+  loadMutes,
+  loadRelaySelections,
+  publish,
+  ensurePlaintext,
+} from "@app/state"

 export const loadUserData = async (pubkey: string, hints: string[] = []) => {
  const relaySelections = await loadRelaySelections(pubkey, INDEXER_RELAYS)
-  const relays = uniq([...getRelayTagValues(relaySelections?.tags || []), ...INDEXER_RELAYS, ...hints])
+  const relays = uniq([
+    ...getRelayTagValues(relaySelections?.tags || []),
+    ...INDEXER_RELAYS,
+    ...hints,
+  ])
  const membership = await loadGroupMembership(pubkey, relays)
  const promises = [
    loadProfile(pubkey, relays),
--- a/src/app/components/GroupNote.svelte
+++ b/src/app/components/GroupNote.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+  import twColors from "tailwindcss/colors"
  import {readable} from "svelte/store"
+  import {hash} from "@welshman/lib"
  import type {CustomEvent} from "@welshman/util"
  import {GROUP_REPLY, getAncestorTags, displayProfile, displayPubkey} from "@welshman/util"
  import {fly} from "@lib/transition"
@@ -10,10 +12,34 @@
  export let event: CustomEvent
  export let showPubkey: boolean

+  const colors = [
+    ['amber', twColors.amber[600]],
+    ['blue', twColors.blue[600]],
+    ['cyan', twColors.cyan[600]],
+    ['emerald', twColors.emerald[600]],
+    ['fuchsia', twColors.fuchsia[600]],
+    ['green', twColors.green[600]],
+    ['indigo', twColors.indigo[600]],
+    ['lightBlue', twColors.lightBlue[600]],
+    ['lime', twColors.lime[600]],
+    ['orange', twColors.orange[600]],
+    ['pink', twColors.pink[600]],
+    ['purple', twColors.purple[600]],
+    ['red', twColors.red[600]],
+    ['rose', twColors.rose[600]],
+    ['sky', twColors.sky[600]],
+    ['teal', twColors.teal[600]],
+    ['violet', twColors.violet[600]],
+    ['yellow', twColors.yellow[600]],
+    ['zinc', twColors.zinc[600]],
+  ]
+
  const profile = deriveProfile(event.pubkey)
  const {replies} = getAncestorTags(event.tags)
-  const parentEvent =
-    replies.length > 0 ? deriveEvent(replies[0][1], [replies[0][2]]) : readable(null)
+  const parentId = replies[0]?.[1]
+  const parentHints = [replies[0]?.[2]].filter(Boolean)
+  const parentEvent = parentId ? deriveEvent(parentId, parentHints) : readable(null)
+  const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]

  $: parentPubkey = $parentEvent?.pubkey || replies[0]?.[4]
  $: parentProfile = deriveProfile(parentPubkey)
@@ -41,7 +67,7 @@
    {/if}
    <div class="-mt-1">
      {#if showPubkey}
-        <strong class="text-sm text-primary"
+        <strong class="text-sm" style="color: {colorValue}" data-color={colorName}
          >{displayProfile($profile, displayPubkey(event.pubkey))}</strong>
      {/if}
      <p class="text-sm">{event.content}</p>
--- a/src/app/components/InfoNip29.svelte
+++ b/src/app/components/InfoNip29.svelte
@@ -21,8 +21,8 @@
    >. If you do decide to join someone else's, make sure to follow their directions for registering
    as a user.
  </p>
-  <div class="alert !flex justify-between items-center">
-    <div class="flex gap-2 items-center">
+  <div class="alert !flex items-center justify-between">
+    <div class="flex items-center gap-2">
      <Icon icon="remote-controller-minimalistic" />
      groups.fiatjaf.com
    </div>
--- a/src/app/components/LogIn.svelte
+++ b/src/app/components/LogIn.svelte
@@ -4,14 +4,15 @@
  import Field from "@lib/components/Field.svelte"
  import Button from "@lib/components/Button.svelte"
  import Spinner from "@lib/components/Spinner.svelte"
+  import SignUp from "@app/components/SignUp.svelte"
  import InfoNostr from "@app/components/LogIn.svelte"
  import {pushModal, clearModal} from "@app/modal"
  import {pushToast} from "@app/toast"
-  import {addSession} from "@app/base"
+  import {addSession, nip46Perms} from "@app/base"
  import {loadHandle} from "@app/state"
  import {loadUserData} from "@app/commands"

-  const back = () => history.back()
+  const signUp = () => pushModal(SignUp)

  const tryLogin = async () => {
    const secret = makeSecret()
@@ -29,7 +30,7 @@

    loadUserData(pubkey, relays)

-    if (await broker.connect()) {
+    if (await broker.connect("", nip46Perms)) {
      addSession({method: "nip46", pubkey, secret, handler})
      pushToast({message: "Successfully logged in!"})
      clearModal()
@@ -62,14 +63,12 @@
 </script>

 <form class="column gap-4" on:submit|preventDefault={login}>
-  <div class="py-2">
-    <h1 class="heading">Log in with Nostr</h1>
-    <p class="text-center">
-      Flotilla is built using the
-      <Button class="link" on:click={() => pushModal(InfoNostr)}>nostr protocol</Button>, which
-      allows you to own your social identity.
-    </p>
-  </div>
+  <h1 class="heading">Log in with Nostr</h1>
+  <p class="m-auto max-w-sm text-center">
+    Flotilla is built using the
+    <Button class="link" on:click={() => pushModal(InfoNostr)}>nostr protocol</Button>, which allows
+    you to own your social identity.
+  </p>
  <Field>
    <div class="flex items-center gap-2" slot="input">
      <label class="input input-bordered flex w-full items-center gap-2">
@@ -80,13 +79,13 @@
    </div>
  </Field>
  <div class="flex flex-col gap-2">
-    <Button type="submit" class="btn btn-primary" disabled={loading}>
+    <Button type="submit" class="btn btn-primary" disabled={!username || loading}>
      <Spinner {loading}>Log In</Spinner>
      <Icon icon="alt-arrow-right" />
    </Button>
    <div class="text-sm">
      Need an account?
-      <Button class="link" on:click={back}>Register</Button>
+      <Button class="link" on:click={signUp}>Register instead</Button>
    </div>
  </div>
 </form>
--- a/src/app/components/LogOut.svelte
+++ b/src/app/components/LogOut.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import {clearStorage} from "@app/storage"
+
+  const back = () => history.back()
+
+  const logout = async () => {
+    loading = true
+
+    try {
+      await clearStorage()
+      localStorage.clear()
+    } finally {
+      loading = false
+    }
+
+    window.location.reload()
+  }
+
+  let loading = false
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={logout}>
+  <h1 class="heading">Are you sure you want to log out?</h1>
+  <div class="flex flex-row items-center justify-between gap-4">
+    <Button class="btn btn-link" on:click={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading}>Log Out</Spinner>
+    </Button>
+  </div>
+</form>
--- a/src/app/components/SignUp.svelte
+++ b/src/app/components/SignUp.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+  import {makeSecret, Nip46Broker} from "@welshman/signer"
+  import Icon from "@lib/components/Icon.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import LogIn from "@app/components/LogIn.svelte"
+  import InfoNostr from "@app/components/LogIn.svelte"
+  import {pushModal, clearModal} from "@app/modal"
+  import {pushToast} from "@app/toast"
+  import {addSession, nip46Perms} from "@app/base"
+  import {loadHandle} from "@app/state"
+
+  const login = () => pushModal(LogIn)
+
+  const trySignup = async () => {
+    const secret = makeSecret()
+    const handle = await loadHandle(`${username}@${handler.domain}`)
+
+    if (handle?.pubkey) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, it looks like that account already exists. Try logging in instead.",
+      })
+    }
+
+    const signupBroker = Nip46Broker.get("", secret, handler)
+    const pubkey = await signupBroker.createAccount(username, nip46Perms)
+
+    if (!pubkey) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, it looks like something went wrong. Please try again.",
+      })
+    }
+
+    const loginBroker = Nip46Broker.get(pubkey, secret, handler)
+
+    if (await loginBroker.connect("", nip46Perms)) {
+      addSession({method: "nip46", pubkey, secret, handler})
+      pushToast({message: "Successfully logged in!"})
+      clearModal()
+    } else {
+      pushToast({
+        theme: "error",
+        message: "Something went wrong! Please try again.",
+      })
+    }
+  }
+
+  const signup = async () => {
+    loading = true
+
+    try {
+      await trySignup()
+    } finally {
+      loading = false
+    }
+  }
+
+  const handler = {
+    domain: "nsec.app",
+    relays: ["wss://relay.nsec.app"],
+    pubkey: "e24a86943d37a91ab485d6f9a7c66097c25ddd67e8bd1b75ed252a3c266cf9bb",
+  }
+
+  let username = ""
+  let loading = false
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={signup}>
+  <h1 class="heading">Sign up with Nostr</h1>
+  <p class="m-auto max-w-sm text-center">
+    Flotilla is built using the
+    <Button class="link" on:click={() => pushModal(InfoNostr)}>nostr protocol</Button>, which allows
+    you to own your social identity.
+  </p>
+  <Field>
+    <div class="flex items-center gap-2" slot="input">
+      <label class="input input-bordered flex w-full items-center gap-2">
+        <Icon icon="user-rounded" />
+        <input bind:value={username} class="grow" type="text" placeholder="username" />
+      </label>
+      @{handler.domain}
+    </div>
+  </Field>
+  <div class="flex flex-col gap-2">
+    <Button type="submit" class="btn btn-primary" disabled={!username || loading}>
+      <Spinner {loading}>Sign Up</Spinner>
+      <Icon icon="alt-arrow-right" />
+    </Button>
+    <div class="text-sm">
+      Already have an account?
+      <Button class="link" on:click={login}>Log in instead</Button>
+    </div>
+  </div>
+</form>
--- a/src/app/components/SpaceCreate.svelte
+++ b/src/app/components/SpaceCreate.svelte
@@ -39,7 +39,7 @@
    </label>
    <p slot="info">
      This should be a NIP-29 compatible nostr relay where you'd like to host your space.
-      <Button class="link" on:click={() => pushModal(InfoNip29)}>More information</Button>
+      <Button class="link" on:click={() => pushModal(InfoNip29)}>What is a relay?</Button>
    </p>
  </Field>
  <div class="flex flex-row items-center justify-between gap-4">
--- a/src/app/components/SpaceJoin.svelte
+++ b/src/app/components/SpaceJoin.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-  import {append, remove} from '@welshman/lib'
-  import {displayRelayUrl} from '@welshman/util'
+  import {append, remove} from "@welshman/lib"
+  import {displayRelayUrl} from "@welshman/util"
  import {goto} from "$app/navigation"
-  import CardButton from "@lib/components/CardButton.svelte"
  import Spinner from "@lib/components/Spinner.svelte"
  import Button from "@lib/components/Button.svelte"
-  import Field from "@lib/components/Field.svelte"
  import Icon from "@lib/components/Icon.svelte"
-  import InfoNip29 from '@app/components/InfoNip29.svelte'
-  import {pushToast} from "@app/toast"
+  import InfoNip29 from "@app/components/InfoNip29.svelte"
  import {pushModal} from "@app/modal"
  import {deriveGroup, displayGroup, relayUrlsByNom} from "@app/state"
  import {addGroupMemberships} from "@app/commands"
@@ -20,7 +17,9 @@
  const back = () => history.back()

  const onUrlChange = (e: any) => {
-    urls = urls.includes(e.target.value) ? remove(e.target.value, urls) : append(e.target.value, urls)
+    urls = urls.includes(e.target.value)
+      ? remove(e.target.value, urls)
+      : append(e.target.value, urls)
  }

  const join = async () => {
@@ -48,15 +47,20 @@
  </h1>
  <p class="text-center">
    Please select which relays you'd like to use for this group.
-    <Button class="link" on:click={() => pushModal(InfoNip29)}>More information</Button>
+    <Button class="link" on:click={() => pushModal(InfoNip29)}>What is a relay?</Button>
  </p>
  {#each urlOptions as url}
-    <div class="alert !flex justify-between items-center">
-      <div class="flex gap-2 items-center">
+    <div class="alert !flex items-center justify-between">
+      <div class="flex items-center gap-2">
        <Icon icon="remote-controller-minimalistic" />
        {displayRelayUrl(url)}
      </div>
-      <input type="checkbox" value={url} class="toggle toggle-primary" checked={urls.includes(url)} on:change={onUrlChange} />
+      <input
+        type="checkbox"
+        value={url}
+        class="toggle toggle-primary"
+        checked={urls.includes(url)}
+        on:change={onUrlChange} />
    </div>
  {/each}
  <div class="flex flex-row items-center justify-between gap-4">
--- a/src/app/state.ts
+++ b/src/app/state.ts
@@ -36,7 +36,7 @@ import {
 } from "@welshman/util"
 import type {SignedEvent, CustomEvent, PublishedProfile, PublishedList} from "@welshman/util"
 import type {SubscribeRequest, PublishRequest} from "@welshman/net"
-import {publish as basePublish, subscribe} from "@welshman/net"
+import {publish as basePublish, subscribe as baseSubscribe} from "@welshman/net"
 import {decrypt} from "@welshman/signer"
 import {deriveEvents, deriveEventsMapped, getter, withGetter} from "@welshman/store"
 import {createSearch} from "@lib/util"
@@ -123,9 +123,17 @@ export const publish = (request: PublishRequest) => {
  return basePublish(request)
 }

+export const subscribe = (request: SubscribeRequest) => {
+  const sub = baseSubscribe({delay: 50, ...request})
+
+  sub.emitter.on("event", (url: string, e: SignedEvent) => repository.publish(e))
+
+  return sub
+}
+
 export const load = (request: SubscribeRequest) =>
  new Promise<CustomEvent[]>(resolve => {
-    const sub = subscribe({closeOnEose: true, timeout: 3000, delay: 50, ...request})
+    const sub = subscribe({closeOnEose: true, timeout: 3000, ...request})
    const events: CustomEvent[] = []

    sub.emitter.on("event", (url: string, e: SignedEvent) => {
--- a/src/lib/components/SecondaryNavItem.svelte
+++ b/src/lib/components/SecondaryNavItem.svelte
@@ -48,7 +48,7 @@
    on:click
    class={cx(
      $$props.class,
-      "flex items-center gap-3 transition-all hover:bg-base-100 hover:text-base-content",
+      "flex w-full items-center gap-3 transition-all hover:bg-base-100 hover:text-base-content",
    )}
    class:text-base-content={active}
    class:bg-base-100={active}>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,6 +2,8 @@
  import "@src/app.css"
  import {onMount} from "svelte"
  import {page} from "$app/stores"
+  import {goto} from "$app/navigation"
+  import {browser} from "$app/environment"
  import {createEventStore} from "@welshman/store"
  import ModalBox from "@lib/components/ModalBox.svelte"
  import Toast from "@app/components/Toast.svelte"
@@ -9,8 +11,8 @@
  import PrimaryNav from "@app/components/PrimaryNav.svelte"
  import {modals, clearModal} from "@app/modal"
  import {theme} from "@app/theme"
-  import {pk, session, repository} from "@app/base"
-  import {relays, handles} from "@app/state"
+  import {pk, session, repository, DEFAULT_RELAYS} from "@app/base"
+  import {relays, handles, loadRelay} from "@app/state"
  import {initStorage} from "@app/storage"
  import {loadUserData} from "@app/commands"

@@ -24,6 +26,10 @@
  $: {
    if (!modal && !$session) {
      modal = {component: Landing}
+
+      if (browser && $page.route?.id !== "/home") {
+        goto("/home")
+      }
    }

    if (modal) {
@@ -35,6 +41,10 @@
  }

  onMount(() => {
+    for (const url of DEFAULT_RELAYS) {
+      loadRelay(url)
+    }
+
    if ($pk) {
      loadUserData($pk)
    }
--- a/src/routes/discover/+page.svelte
+++ b/src/routes/discover/+page.svelte
@@ -4,7 +4,15 @@
  import {GROUP_META, displayRelayUrl} from "@welshman/util"
  import Icon from "@lib/components/Icon.svelte"
  import {makeSpacePath} from "@app/routes"
-  import {load, displayGroup, relays, searchGroups, relayUrlsByNom, userMembership} from "@app/state"
+  import {DEFAULT_RELAYS} from "@app/base"
+  import {
+    load,
+    displayGroup,
+    relays,
+    searchGroups,
+    relayUrlsByNom,
+    userMembership,
+  } from "@app/state"

  const getRelayUrls = (nom: string): string[] => $relayUrlsByNom.get(nom) || []

@@ -12,7 +20,7 @@

  onMount(() => {
    load({
-      relays: $relays.map(r => r.url),
+      relays: [...DEFAULT_RELAYS, ...$relays.map(r => r.url)],
      filters: [{kinds: [GROUP_META]}],
    })
  })
--- a/src/routes/settings/+layout.svelte
+++ b/src/routes/settings/+layout.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import {fly} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"
+  import Page from "@lib/components/Page.svelte"
+  import SecondaryNav from "@lib/components/SecondaryNav.svelte"
+  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
+  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
+  import LogOut from "@app/components/LogOut.svelte"
+  import {pushModal} from "@app/modal"
+
+  const logout = () => pushModal(LogOut)
+</script>
+
+<SecondaryNav>
+  <SecondaryNavSection>
+    <div in:fly|local>
+      <SecondaryNavItem href="/settings">
+        <Icon icon="settings" /> Settings
+      </SecondaryNavItem>
+    </div>
+    <div in:fly|local={{delay: 50}}>
+      <SecondaryNavItem class="text-error hover:text-error" on:click={logout}>
+        <Icon icon="exit" /> Log Out
+      </SecondaryNavItem>
+    </div>
+  </SecondaryNavSection>
+</SecondaryNav>
+
+<Page>
+  <slot />
+</Page>
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -0,0 +1 @@
+Settings: who needs em?
--- a/src/routes/spaces/[nom]/+layout.svelte
+++ b/src/routes/spaces/[nom]/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {page} from '$app/stores'
+  import {page} from "$app/stores"
  import {fly} from "@lib/transition"
  import Icon from "@lib/components/Icon.svelte"
  import Page from "@lib/components/Page.svelte"
@@ -67,18 +67,13 @@
      <div class="h-2" />
      <SecondaryNavHeader>
        Rooms
-        <div class="cursor-pointer">
+        <Button on:click={() => alert("Uh, I don't know how to do rooms on NIP 29")}>
          <Icon icon="add-circle" />
-        </div>
+        </Button>
      </SecondaryNavHeader>
      <div in:fly|local>
-        <SecondaryNavItem href="/invalid">
-          <Icon icon="hashtag" /> Spaces
-        </SecondaryNavItem>
-      </div>
-      <div in:fly|local={{delay: 50}}>
-        <SecondaryNavItem href="/invalid">
-          <Icon icon="hashtag" /> Themes
+        <SecondaryNavItem href="/spaces/{nom}/general">
+          <Icon icon="hashtag" /> General
        </SecondaryNavItem>
      </div>
    </SecondaryNavSection>
--- a/src/routes/spaces/[nom]/[[room]]/+page.svelte
+++ b/src/routes/spaces/[nom]/[[room]]/+page.svelte
@@ -1,22 +1,26 @@
-<script lang="ts">
-  import {sortBy} from "@welshman/lib"
-  import type {CustomEvent} from "@welshman/util"
-  import {page} from "$app/stores"
-  import {formatTimestampAsDate} from "@lib/util"
-  import Spinner from "@lib/components/Spinner.svelte"
-  import GroupNote from "@app/components/GroupNote.svelte"
-  import {deriveGroupConversation} from "@app/state"
-
-  $: conversation = deriveGroupConversation($page.params.nom)
-
-  const assertEvent = (e: any) => e as CustomEvent
-
+<script lang="ts" context="module">
  type Element = {
    id: string
    type: "date" | "note"
    value: string | CustomEvent
    showPubkey: boolean
  }
+</script>
+
+<script lang="ts">
+  import {sortBy} from "@welshman/lib"
+  import type {CustomEvent} from "@welshman/util"
+  import {page} from "$app/stores"
+  import {formatTimestampAsDate} from "@lib/util"
+  import Icon from "@lib/components/Icon.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import GroupNote from "@app/components/GroupNote.svelte"
+  import {deriveGroupConversation} from "@app/state"
+
+  const {nom} = $page.params
+  const conversation = deriveGroupConversation(nom)
+
+  const assertEvent = (e: any) => e as CustomEvent

  let loading = true
  let elements: Element[] = []
@@ -54,15 +58,22 @@
  }, 3000)
 </script>

-<div class="flex h-screen flex-col">
-  <div class="min-h-24 bg-base-100 shadow-xl"></div>
+<div class="relative flex h-screen flex-col">
+  <div class="relative z-feature px-2 pt-4">
+    <div class="flex min-h-12 items-center gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
+      <div class="flex items-center gap-2">
+        <Icon icon="hashtag" />
+        <strong>General</strong>
+      </div>
+    </div>
+  </div>
  <div class="flex flex-grow flex-col-reverse overflow-auto">
    {#each elements as { type, id, value, showPubkey } (id)}
      {#if type === "date"}
-        <div class="flex items-center gap-2 py-2 text-xs opacity-50">
-          <div class="h-px flex-grow bg-base-content" />
+        <div class="flex items-center gap-2 p-2 text-xs opacity-50">
+          <div class="h-px flex-grow bg-base-content opacity-25" />
          <p>{value}</p>
-          <div class="h-px flex-grow bg-base-content" />
+          <div class="h-px flex-grow bg-base-content opacity-25" />
        </div>
      {:else}
        <GroupNote event={assertEvent(value)} {showPubkey} />
@@ -78,5 +89,7 @@
      </Spinner>
    </p>
  </div>
-  <div class="shadow-top-xl min-h-32 bg-base-100"></div>
+  <div class="relative z-feature border-t border-solid border-base-100 px-2 py-2">
+    <div class="shadow-top-xl flex min-h-12 items-center gap-4 rounded-xl bg-base-100 px-4"></div>
+  </div>
 </div>
--- a/src/routes/spaces/[nom]/[[room]]/+page.ts
+++ b/src/routes/spaces/[nom]/[[room]]/+page.ts
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,9 +9,10 @@ export default {
      none: 0,
      "nav-active": 1,
      "nav-item": 2,
-      popover: 3,
-      modal: 4,
-      toast: 5,
+      feature: 3,
+      popover: 4,
+      modal: 5,
+      toast: 6,
    },
  },
  plugins: [daisyui],