From 4a3b217cafeccaafdb261b5428623078b3f7af0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= <nusa.puksic@gmail.com>
Date: Wed, 3 Sep 2025 20:09:57 +0200
Subject: [PATCH] Stacking layouts

---
 src/app.css                                   |  2 +-
 src/lib/components/EventDetails.svelte        |  8 +--
 src/lib/components/RelayStatus.svelte         | 18 +++---
 src/lib/components/util/Profile.svelte        | 10 +--
 src/routes/+layout.svelte                     |  4 +-
 src/routes/about/+page.svelte                 |  6 +-
 src/routes/about/relay-stats/+page.svelte     |  2 +-
 src/routes/contact/+page.svelte               |  2 +-
 src/routes/profile/+page.svelte               | 64 +------------------
 src/routes/profile/my-notes/+page.svelte      |  2 +
 .../[type]/[identifier]/+page.svelte          |  4 +-
 src/routes/start/+page.svelte                 |  2 +-
 12 files changed, 32 insertions(+), 92 deletions(-)

diff --git a/src/app.css b/src/app.css
index 5385791..cbcaed0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -707,7 +707,7 @@
 
   /* Table of Contents highlighting */
   .toc-highlight {
-    @apply bg-primary-200 dark:bg-primary-700 border-l-4 border-primary-600
+    @apply bg-primary-200 dark:bg-primary-700 border-s-4 border-primary-600 rounded
     dark:border-primary-400 font-medium;
     transition: all 0.2s ease-in-out;
   }
diff --git a/src/lib/components/EventDetails.svelte b/src/lib/components/EventDetails.svelte
index 4fb72e7..8d44bf1 100644
--- a/src/lib/components/EventDetails.svelte
+++ b/src/lib/components/EventDetails.svelte
@@ -6,7 +6,7 @@
   import { activeInboxRelays } from "$lib/ndk";
   import type { NDKEvent } from "$lib/utils/nostrUtils";
   import { getMatchingTags } from "$lib/utils/nostrUtils";
-  import ProfileHeader from "$components/cards/ProfileHeader.svelte";
+  import { AProfilePreview } from "$lib/a";
   import { goto } from "$app/navigation";
   import { onMount } from "svelte";
   import { getUserMetadata } from "$lib/utils/nostrUtils";
@@ -423,11 +423,7 @@
 
   <!-- If event is profile -->
   {#if event.kind === 0}
-    <ProfileHeader
-      {event}
-      {profile}
-      {communityStatusMap}
-    />
+    <AProfilePreview event={event} profile={profile} communityStatusMap={communityStatusMap} />
   {/if}
 
   <!-- Raw Event JSON -->
diff --git a/src/lib/components/RelayStatus.svelte b/src/lib/components/RelayStatus.svelte
index 9f26cb4..7a7b37c 100644
--- a/src/lib/components/RelayStatus.svelte
+++ b/src/lib/components/RelayStatus.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button, Alert, Heading } from "flowbite-svelte";
+  import { Button, P, Heading } from "flowbite-svelte";
   import {
     ndkSignedIn,
     testRelayConnection,
@@ -117,8 +117,8 @@
   }
 </script>
 
-<div class="space-y-4 w-full max-w-3xl flex self-center">
-  <div class="flex items-center justify-between">
+<div class="space-y-4 w-full max-w-3xl flex flex-col self-center p-4">
+  <div class="flex flex-col gap-3 items-center justify-between">
     <Heading tag="h1">Relay Connection Status</Heading>
     <Button size="sm" onclick={runRelayTests} disabled={testing}>
       {testing ? "Testing..." : "Refresh"}
@@ -139,10 +139,10 @@
     {#each relayStatuses as status}
       <div class="flex flex-row items-center justify-between p-3">
         <div class="flex-1">
-          <div class="font-medium">{status.url}</div>
-          <div class="text-sm {getStatusColor(status)}">
+          <P class="font-medium">{status.url}</P>
+          <P class="text-sm {getStatusColor(status)}">
             {getStatusText(status)}
-          </div>
+          </P>
         </div>
         <div
           class="w-3 h-3 rounded-full {getStatusColor(status).replace(
@@ -156,10 +156,10 @@
 
   {#if relayStatuses.some((s) => s.requiresAuth && !$ndkSignedIn)}
     <AAlert color="orange">
-      <span class="font-medium">Authentication Required</span>
-      <p class="mt-1 text-sm">
+      <P class="font-medium">Authentication Required</P>
+      <P class="mt-1 text-sm">
         Some relays require authentication. Sign in to access these relays.
-      </p>
+      </P>
     </AAlert>
   {/if}
 </div>
diff --git a/src/lib/components/util/Profile.svelte b/src/lib/components/util/Profile.svelte
index f02d900..d7965fa 100644
--- a/src/lib/components/util/Profile.svelte
+++ b/src/lib/components/util/Profile.svelte
@@ -8,7 +8,7 @@
     loginWithAmber,
     loginWithNpub
   } from "$lib/stores/userStore";
-  import { Avatar, Popover, Dropdown, DropdownGroup, DropdownItem, DropdownHeader } from "flowbite-svelte";
+  import { Avatar, Dropdown, DropdownGroup, DropdownItem, DropdownHeader } from "flowbite-svelte";
   import { Globe, Loader, Book, Smartphone } from "@lucide/svelte";
   import { get } from "svelte/store";
   import { goto } from "$app/navigation";
@@ -468,19 +468,19 @@
       </DropdownGroup>
       <DropdownGroup>
         <DropdownItem
-          class="w-full items-start"
+          class="w-full flex items-center justify-start"
           onclick={() => goto('/profile')}
         >
           View profile
         </DropdownItem>
         <DropdownItem
-          class="w-full"
+          class="w-full flex items-center justify-start "
           onclick={() => goto('/profile/my-notes')}
         >
           My notes
         </DropdownItem>
         <DropdownItem
-          class="w-full"
+          class="w-full flex items-center justify-start"
           onclick={() => goto('/profile/notifications')}
         >
           Notifications
@@ -503,7 +503,7 @@
       <DropdownGroup>
         <DropdownItem
           id="sign-out-button"
-          class="w-full"
+          class="w-full flex items-center justify-start "
           onclick={handleSignOutClick}
           >
           Sign out
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6c28f63..54fd21c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -185,9 +185,9 @@
 <div class="min-h-screen flex flex-col">
   <ANavbar />
 
-  <main class="flex-1 flex-col w-full mt-[75px] self-center">
+  <div class="flex flex-1 flex-col w-full mt-[100px] self-center">
     {@render children()}
-  </main>
+  </div>
 
   <AFooter />
 </div>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 104eb80..ccfcb66 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -12,8 +12,8 @@
   const ndk = getNdkContext();
 </script>
 
-<div class="w-full max-w-3xl flex self-center">
-    <div class="flex justify-between items-center mb-4">
+<div class="w-full max-w-3xl flex flex-col self-center mb-3">
+    <div class="flex flex-col justify-between items-center mb-4">
       <Heading tag="h1" class="h-leather mb-2"
         >About the Library of Alexandria</Heading
       >
@@ -24,7 +24,7 @@
         >
       {/if}
     </div>
-    <Img src="./screenshots/old_books.jpg" alt="Alexandria icon" />
+    <Img src="./screenshots/old_books.jpg" alt="Alexandria icon" class="my-3"/>
 
     <P class="mb-3">
       Alexandria is a reader and writer for <A
diff --git a/src/routes/about/relay-stats/+page.svelte b/src/routes/about/relay-stats/+page.svelte
index 355188b..cb2dbc2 100644
--- a/src/routes/about/relay-stats/+page.svelte
+++ b/src/routes/about/relay-stats/+page.svelte
@@ -2,6 +2,6 @@
   import RelayStatus from "$lib/components/RelayStatus.svelte";
 </script>
 
-<div class="w-full flex justify-center">
+<div class="w-full flex flex-col justify-center">
     <RelayStatus />
 </div>
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 73060d3..340e63f 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -290,7 +290,7 @@
   });
 </script>
 
-<div class="w-full max-w-3xl flex self-center">
+<div class="w-full max-w-3xl flex flex-col self-center">
     <Heading tag="h1" class="h-leather mb-2">Contact GitCitadel</Heading>
 
     <P class="my-3">
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 726e4ef..863512f 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-  import { Heading, P, Button } from "flowbite-svelte";
-  import { AAlert } from "$lib/a";
+  import { AAlert, AProfilePreview } from "$lib/a";
   import CommentBox from "$lib/components/CommentBox.svelte";
   import CommentViewer from "$lib/components/CommentViewer.svelte";
-  import CopyToClipboard from "$lib/components/util/CopyToClipboard.svelte";
   import { userStore } from "$lib/stores/userStore";
   import { getUserMetadata } from "$lib/utils/nostrUtils";
   import type { NDKEvent } from "$lib/utils/nostrUtils";
   import { getNdkContext } from "$lib/ndk.ts";
-  import { goto } from "$app/navigation";
 
   // State
   let user = $state($userStore);
@@ -49,7 +46,7 @@
       }
       // Fallback: ensure we have metadata via helper (will cache)
       if (!profile && user.npub) {
-        const meta = await getUserMetadata(user.npub, true);
+        const meta = await getUserMetadata(user.npub, ndk, true);
         profile = {
           name: meta.name,
           display_name: meta.displayName,
@@ -74,15 +71,6 @@
   $effect(() => {
     if (user?.pubkey) fetchProfileEvent(user.pubkey);
   });
-
-  function displayName() {
-    return profile?.display_name || profile?.name || (user?.npub ? user.npub.slice(0, 10) + '…' : '');
-  }
-
-  function shortNpub() {
-    if (!user?.npub) return '';
-    return user.npub.slice(0, 12) + '…' + user.npub.slice(-8);
-  }
 </script>
 
 {#if !user || !user.signedIn}
@@ -92,53 +80,7 @@
 {:else}
   <div class="w-full flex justify-center">
     <div class="flex flex-col w-full max-w-5xl my-6 px-4 mx-auto gap-6">
-      <div class="main-leather p-0 overflow-hidden rounded-lg border border-primary-200 dark:border-primary-700">
-        {#if profile?.banner}
-          <div class="w-full h-40 bg-primary-200 dark:bg-primary-800 relative">
-            <img src={profile.banner} alt="Banner" class="w-full h-full object-cover" loading="lazy" onerror={(e) => (e.target as HTMLImageElement).style.display='none'} />
-            {#if profile?.picture}
-              <img src={profile.picture} alt="Avatar" class="absolute -bottom-10 left-6 w-24 h-24 object-cover rounded-full border-4 border-white dark:border-gray-900 bg-gray-100" onerror={(e) => (e.target as HTMLImageElement).style.display='none'} />
-            {/if}
-          </div>
-        {/if}
-        <div class={`p-6 ${profile?.banner ? 'pt-16' : 'pt-6'} flex flex-col gap-4`}>
-          {#if !profile?.banner && profile?.picture}
-            <img src={profile.picture} alt="Avatar" class="w-32 h-32 object-cover rounded-full border border-gray-300 dark:border-gray-600 bg-gray-100" loading="lazy" onerror={(e) => (e.target as HTMLImageElement).style.display='none'} />
-          {/if}
-          <div>
-            <Heading tag="h1" class="h-leather mb-2">{displayName()}</Heading>
-            <div class="flex flex-row flex-wrap items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
-              {#if user.npub}
-                <CopyToClipboard displayText={shortNpub()} copyText={user.npub} />
-              {/if}
-              {#if profile?.nip05}
-                <span class="px-2 py-0.5 !mb-0 rounded bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 text-xs">{profile.nip05}</span>
-              {/if}
-              {#if profile?.lud16}
-                <span class="px-2 py-0.5 !mb-0 rounded bg-amber-100 dark:bg-amber-900 text-amber-700 dark:text-amber-300 text-xs">⚡ {profile.lud16}</span>
-              {/if}
-            </div>
-          </div>
-          {#if profile?.about}
-            <P class="whitespace-pre-wrap break-words leading-relaxed">{profile.about}</P>
-          {/if}
-          <div class="flex flex-wrap gap-4 text-sm">
-            {#if profile?.website}
-              <a href={profile.website} rel="noopener" class="text-primary-600 dark:text-primary-400 hover:underline break-all" target="_blank">{profile.website}</a>
-            {/if}
-          </div>
-          <div class="flex flex-row justify-end gap-4 text-sm">
-            <Button class="!mb-0" size="xs" onclick={() => goto('/profile/notifications')}>Notifications</Button>
-            <Button class="!mb-0" size="xs" onclick={() => goto('/profile/my-notes')}>My notes</Button>
-          </div>
-          {#if loading}
-            <AAlert color="primary">Loading profile…</AAlert>
-          {/if}
-          {#if error}
-            <AAlert color="red">Error loading profile: {error}</AAlert>
-          {/if}
-        </div>
-      </div>
+      <AProfilePreview user={user} profile={profile} loading={loading} error={error} isOwn={!!user?.signedIn && (!profileEvent?.pubkey || profileEvent.pubkey === user.pubkey)} />
 
       {#if profileEvent}
         <div class="main-leather flex flex-col space-y-6">
diff --git a/src/routes/profile/my-notes/+page.svelte b/src/routes/profile/my-notes/+page.svelte
index 589907f..586a993 100644
--- a/src/routes/profile/my-notes/+page.svelte
+++ b/src/routes/profile/my-notes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
+  import { Button } from "flowbite-svelte";
   import { userStore } from "$lib/stores/userStore.ts";
   import type { NDKEvent } from "@nostr-dev-kit/ndk";
   import { get } from "svelte/store";
@@ -222,6 +223,7 @@
 >
   <!-- Tag Filter Sidebar -->
   <aside class="w-full lg:w-80 flex-shrink-0 self-start">
+    <Button size="sm" class="mb-3" onclick={() => goto('/new/compose')}>Create new</Button>
     <h2 class="text-lg font-bold mb-4">Tag Type</h2>
     <div class="flex flex-wrap gap-2 mb-6">
       {#each tagTypes as type}
diff --git a/src/routes/publication/[type]/[identifier]/+page.svelte b/src/routes/publication/[type]/[identifier]/+page.svelte
index 2b888cd..7bea434 100644
--- a/src/routes/publication/[type]/[identifier]/+page.svelte
+++ b/src/routes/publication/[type]/[identifier]/+page.svelte
@@ -186,7 +186,7 @@
     indexEvent={indexEvent}
   />
 
-  <main class="publication {data.publicationType}">
+  <div class="publication {data.publicationType} p-4 space-y-4 overflow-auto  flex-grow-2 mt-[100px]">
     <Publication
       rootAddress={indexEvent.tagAddress()}
       publicationType={data.publicationType}
@@ -194,7 +194,7 @@
       publicationTree={publicationTree}
       toc={toc}
     />
-  </main>
+  </div>
 {:else if loading}
   <main class="publication">
     <div class="flex items-center justify-center min-h-screen">
diff --git a/src/routes/start/+page.svelte b/src/routes/start/+page.svelte
index e3d0a0c..75a5805 100644
--- a/src/routes/start/+page.svelte
+++ b/src/routes/start/+page.svelte
@@ -7,7 +7,7 @@
   const isVersionKnown = appVersion !== "development";
 </script>
 
-<div class="w-full max-w-2xl flex self-center">
+<div class="w-full max-w-2xl flex flex-col self-center">
     <Heading tag="h1" class="h-leather mb-2"
       >Getting Started with Alexandria</Heading
     >