From 2b5783487f449c7934e02830111a027ff7f0b6f1 Mon Sep 17 00:00:00 2001 From: Silberengel Date: Tue, 10 Feb 2026 14:52:10 +0100 Subject: [PATCH] fix cards and consolidate headers --- public/healthz.json | 4 +- .../find/SearchAddressableEvents.svelte | 57 +-- src/lib/components/layout/CardHeader.svelte | 373 ++++++++++++++++++ src/lib/components/layout/ProfileBadge.svelte | 77 ++-- src/lib/modules/comments/Comment.svelte | 110 ++---- .../modules/discussions/DiscussionCard.svelte | 158 +++----- .../modules/discussions/DiscussionList.svelte | 81 ++-- .../discussions/DiscussionVoteButtons.svelte | 109 +++-- src/lib/modules/feed/FeedPage.svelte | 105 ++++- src/lib/modules/feed/FeedPost.svelte | 301 +++----------- src/lib/modules/feed/HighlightCard.svelte | 123 ++---- .../reactions/FeedReactionButtons.svelte | 88 ++++- src/lib/services/auth/anonymous-signer.ts | 6 +- src/lib/services/cache/event-cache.ts | 43 ++ src/lib/services/nostr/auth-handler.ts | 5 +- src/routes/login/+page.svelte | 9 +- 16 files changed, 954 insertions(+), 695 deletions(-) create mode 100644 src/lib/components/layout/CardHeader.svelte diff --git a/public/healthz.json b/public/healthz.json index 983010e..58cf9ca 100644 --- a/public/healthz.json +++ b/public/healthz.json @@ -2,7 +2,7 @@ "status": "ok", "service": "aitherboard", "version": "0.2.0", - "buildTime": "2026-02-07T09:22:55.996Z", + "buildTime": "2026-02-10T11:19:46.024Z", "gitCommit": "unknown", - "timestamp": 1770456175996 + "timestamp": 1770722386024 } \ No newline at end of file diff --git a/src/lib/components/find/SearchAddressableEvents.svelte b/src/lib/components/find/SearchAddressableEvents.svelte index d60e5e2..838a7ae 100644 --- a/src/lib/components/find/SearchAddressableEvents.svelte +++ b/src/lib/components/find/SearchAddressableEvents.svelte @@ -2,7 +2,7 @@ import { nostrClient } from '../../services/nostr/nostr-client.js'; import { relayManager } from '../../services/nostr/relay-manager.js'; import { getEventsByKind } from '../../services/cache/event-cache.js'; - import ProfileBadge from '../layout/ProfileBadge.svelte'; + import CardHeader from '../layout/CardHeader.svelte'; import RelayBadge from '../layout/RelayBadge.svelte'; import CacheBadge from '../layout/CacheBadge.svelte'; import { getKindInfo, KIND_LOOKUP, isParameterizedReplaceableKind } from '../../types/kind-lookup.js'; @@ -486,13 +486,15 @@ {/if}
-
-
- + + {#snippet badges()} -
- {getKindInfo(event.kind).description} -
+ {/snippet} +
{#if getTagValue(event, 'd')} @@ -586,9 +588,12 @@ {/if}
-
-
- + + {#snippet badges()} {#if relay} {#if relay === 'cache'} @@ -596,9 +601,8 @@ {/if} {/if} -
- {getKindInfo(event.kind).description} -
+ {/snippet} +
{#if getTagValue(event, 'd')} @@ -877,33 +881,6 @@ padding: 1rem; } - .card-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 1rem; - gap: 0.5rem; - } - - .card-header-left { - display: flex; - align-items: center; - gap: 0.5rem; - flex-wrap: wrap; - } - - .kind-label { - font-size: 0.75rem; - color: var(--fog-text-light, #52667a); - padding: 0.25rem 0.5rem; - background: var(--fog-highlight, #f3f4f6); - border-radius: 0.25rem; - } - - :global(.dark) .kind-label { - color: var(--fog-dark-text-light, #a8b8d0); - background: var(--fog-dark-highlight, #374151); - } .card-metadata { display: flex; diff --git a/src/lib/components/layout/CardHeader.svelte b/src/lib/components/layout/CardHeader.svelte new file mode 100644 index 0000000..b5e03f7 --- /dev/null +++ b/src/lib/components/layout/CardHeader.svelte @@ -0,0 +1,373 @@ + + +
+
+
+ +
+ {#if shouldShowNip05 && profile?.nip05} + + {profile.nip05[0]} + + {/if} + {#if badges} + {@render badges()} + {/if} + {#if relativeTime} + {relativeTime} + {/if} + {#if clientName} + via {clientName} + {/if} + {#if topics && topics.length > 0} + {#each topics.slice(0, 3) as topic} + {topic} + {/each} + {/if} + {#if left} + {@render left()} + {/if} +
+
+ {#if actions} + {@render actions()} + {/if} + {#if kindLabel} + {kindLabel} + {/if} +
+ {#if showDivider} +
+ {/if} +
+ + diff --git a/src/lib/components/layout/ProfileBadge.svelte b/src/lib/components/layout/ProfileBadge.svelte index 1a40567..bcf2287 100644 --- a/src/lib/components/layout/ProfileBadge.svelte +++ b/src/lib/components/layout/ProfileBadge.svelte @@ -7,9 +7,10 @@ pubkey: string; inline?: boolean; // If true, show only handle/name (no picture, status, etc.) pictureOnly?: boolean; // If true, show only the profile picture/avatar + hideNip05?: boolean; // If true, don't show NIP-05 inside the badge } - let { pubkey, inline = false, pictureOnly = false }: Props = $props(); + let { pubkey, inline = false, pictureOnly = false, hideNip05 = false }: Props = $props(); let profile = $state<{ name?: string; picture?: string; nip05?: string[] } | null>(null); let activityStatus = $state<'red' | 'yellow' | 'green' | null>(null); @@ -135,6 +136,15 @@ return pubkey.slice(0, 8) + '...'; } }); + + // Check if nip05 handle matches the name to avoid duplicate display + let shouldShowNip05 = $derived.by(() => { + if (!profile?.nip05 || profile.nip05.length === 0) return false; + if (!profile?.name) return true; // Show nip05 if no name + + const nip05Handle = profile.nip05[0].split('@')[0]; // Extract handle part before @ + return nip05Handle.toLowerCase() !== profile.name.toLowerCase(); + }); @@ -192,11 +202,11 @@ {/if} {#if !pictureOnly}
-
- +
+ {profile?.name || shortenedNpub} - {#if profile?.nip05 && profile.nip05.length > 0} + {#if !hideNip05 && shouldShowNip05 && profile?.nip05} {profile.nip05[0]} @@ -234,6 +244,16 @@ max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; + flex-wrap: nowrap !important; + overflow: hidden !important; + } + + .profile-name { + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + flex-shrink: 1 !important; + min-width: 0 !important; } .profile-badge:hover { @@ -315,18 +335,20 @@ /* Base styles for NIP-05 text that apply on all screen sizes */ .nip05-text { font-size: 0.875em; - max-width: 100% !important; flex-shrink: 1 !important; min-width: 0 !important; - display: inline-block !important; - width: auto !important; + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; box-sizing: border-box !important; - hyphens: auto; } .break-nip05 { - max-width: 100% !important; - display: inline-block !important; + flex-shrink: 1 !important; + min-width: 0 !important; + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; } @media (max-width: 640px) { @@ -336,33 +358,28 @@ } .nip05-container { - flex-direction: column !important; - align-items: flex-start !important; + flex-wrap: nowrap !important; width: 100% !important; } - /* Truncate handle/name to 10 characters on narrow screens */ - .profile-badge-content .truncate { - max-width: 10ch !important; - overflow: hidden !important; - text-overflow: ellipsis !important; - white-space: nowrap !important; - display: inline-block !important; + /* On narrow screens, allow wrapping if content is too long */ + .nip05-container { + flex-wrap: wrap !important; + } + + /* Only truncate if it would wrap - let it wrap first */ + .profile-name { + max-width: none !important; } - /* Truncate NIP-05 to 10 characters on narrow screens */ - /* Override both the class selectors and Tailwind's break-all utility */ .nip05-text, .break-nip05 { - max-width: 10ch !important; - overflow: hidden !important; - text-overflow: ellipsis !important; - white-space: nowrap !important; - display: inline-block !important; - word-break: normal !important; - overflow-wrap: normal !important; - word-wrap: normal !important; - box-sizing: border-box !important; + max-width: none !important; + word-break: break-word !important; + overflow-wrap: anywhere !important; + white-space: normal !important; + overflow: visible !important; + text-overflow: clip !important; } } diff --git a/src/lib/modules/comments/Comment.svelte b/src/lib/modules/comments/Comment.svelte index a067cd8..09f0205 100644 --- a/src/lib/modules/comments/Comment.svelte +++ b/src/lib/modules/comments/Comment.svelte @@ -1,5 +1,5 @@