Browse Source

Stacking layouts

master
Nuša Pukšič 6 months ago committed by buttercat1791
parent
commit
4a3b217caf
  1. 2
      src/app.css
  2. 8
      src/lib/components/EventDetails.svelte
  3. 18
      src/lib/components/RelayStatus.svelte
  4. 10
      src/lib/components/util/Profile.svelte
  5. 4
      src/routes/+layout.svelte
  6. 6
      src/routes/about/+page.svelte
  7. 2
      src/routes/about/relay-stats/+page.svelte
  8. 2
      src/routes/contact/+page.svelte
  9. 64
      src/routes/profile/+page.svelte
  10. 2
      src/routes/profile/my-notes/+page.svelte
  11. 4
      src/routes/publication/[type]/[identifier]/+page.svelte
  12. 2
      src/routes/start/+page.svelte

2
src/app.css

@ -707,7 +707,7 @@ @@ -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;
}

8
src/lib/components/EventDetails.svelte

@ -6,7 +6,7 @@ @@ -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 @@ @@ -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 -->

18
src/lib/components/RelayStatus.svelte

@ -1,5 +1,5 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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>

10
src/lib/components/util/Profile.svelte

@ -8,7 +8,7 @@ @@ -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 @@ @@ -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 @@ @@ -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

4
src/routes/+layout.svelte

@ -185,9 +185,9 @@ @@ -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>

6
src/routes/about/+page.svelte

@ -12,8 +12,8 @@ @@ -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 @@ @@ -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

2
src/routes/about/relay-stats/+page.svelte

@ -2,6 +2,6 @@ @@ -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>

2
src/routes/contact/+page.svelte

@ -290,7 +290,7 @@ @@ -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">

64
src/routes/profile/+page.svelte

@ -1,14 +1,11 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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">

2
src/routes/profile/my-notes/+page.svelte

@ -1,5 +1,6 @@ @@ -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 @@ @@ -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}

4
src/routes/publication/[type]/[identifier]/+page.svelte

@ -186,7 +186,7 @@ @@ -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 @@ @@ -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">

2
src/routes/start/+page.svelte

@ -7,7 +7,7 @@ @@ -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
>

Loading…
Cancel
Save