From c4934db5ffad083e751deb953168e612a67d579d Mon Sep 17 00:00:00 2001 From: Coracle-Bot Date: Tue, 8 Sep 2026 23:30:23 +0000 Subject: [PATCH] Lay the home dashboard out as full-width sections --- src/app/components/HealthCheckItem.svelte | 15 ++-- src/app/components/HomeHealthChecks.svelte | 37 ++++----- src/app/components/HomeHosting.svelte | 47 ++++++------ src/app/components/HomeInbox.svelte | 35 ++++----- src/app/components/HomeInboxItem.svelte | 75 ++++++++++--------- src/app/components/HomeNetwork.svelte | 22 +++--- src/app/components/HomeSection.svelte | 24 ++++++ src/app/components/NoteItem.svelte | 11 ++- .../components/hosting/RelayListItem.svelte | 5 +- src/routes/home/+page.svelte | 37 +++++---- 10 files changed, 178 insertions(+), 130 deletions(-) create mode 100644 src/app/components/HomeSection.svelte diff --git a/src/app/components/HealthCheckItem.svelte b/src/app/components/HealthCheckItem.svelte index 627e03b3..c1956444 100644 --- a/src/app/components/HealthCheckItem.svelte +++ b/src/app/components/HealthCheckItem.svelte @@ -2,7 +2,6 @@ import Stars from "@assets/icons/stars.svg?dataurl" import Icon from "@lib/components/Icon.svelte" import Button from "@lib/components/Button.svelte" - import Card from "@lib/components/Card.svelte" import type {HealthCheck} from "@app/healthChecks" import {healthChecks} from "@app/healthChecks" @@ -15,13 +14,13 @@ const apply = () => $healthChecks.apply(healthCheck) - -
- {healthCheck.title} -

{healthCheck.description}

+
+
+ {healthCheck.title} +

{healthCheck.description}

- - +
diff --git a/src/app/components/HomeHealthChecks.svelte b/src/app/components/HomeHealthChecks.svelte index 51096bf1..f138a3a1 100644 --- a/src/app/components/HomeHealthChecks.svelte +++ b/src/app/components/HomeHealthChecks.svelte @@ -5,6 +5,7 @@ import Icon from "@lib/components/Icon.svelte" import Badge from "@lib/components/Badge.svelte" import Button from "@lib/components/Button.svelte" + import HomeSection from "@app/components/HomeSection.svelte" import HealthCheckItem from "@app/components/HealthCheckItem.svelte" import {healthChecks} from "@app/healthChecks" @@ -17,30 +18,30 @@ } -
-
- - - Health checks - + + {#snippet action()} {#if $pending.length > 0} {$pending.length} open {/if} -
+ {/snippet} {#if $pending.length === 0} -

+

Your connection to the network looks healthy.

{:else} - {#each $pending as healthCheck (healthCheck.title)} - - {/each} - {#if $pending.length > 1} - - {/if} +
+ {#each $pending as healthCheck (healthCheck.title)} + + {/each} + {#if $pending.length > 1} +
+ +
+ {/if} +
{/if} -
+ diff --git a/src/app/components/HomeHosting.svelte b/src/app/components/HomeHosting.svelte index d5883290..6661070d 100644 --- a/src/app/components/HomeHosting.svelte +++ b/src/app/components/HomeHosting.svelte @@ -5,6 +5,7 @@ import Icon from "@lib/components/Icon.svelte" import Link from "@lib/components/Link.svelte" import Button from "@lib/components/Button.svelte" + import HomeSection from "@app/components/HomeSection.svelte" import RelayListItem from "@app/components/hosting/RelayListItem.svelte" import RelayCreate from "@app/components/hosting/RelayCreate.svelte" import {user} from "@app/core" @@ -31,30 +32,32 @@ {#if loaded} -
-
- - - Hosting - + + {#snippet action()} {#if relays.length > 0} Manage {/if} + {/snippet} + {#if relays.length > 0} +
+ {#each relays as relay (relay.id)} + + {/each} +
+ {/if} +
+

+ {#if relays.length > 0} + Spin up another hosted space — rooms, calendar and moderation included. + {:else} + Don't wait for an invite. Flotilla Hosting sets up a space with rooms, calendar and + moderation in about a minute. + {/if} +

+
- {#each relays as relay (relay.id)} - - {/each} -

- {#if relays.length > 0} - Spin up another hosted space — rooms, calendar and moderation included. - {:else} - Don't wait for an invite. Flotilla Hosting sets up a space with rooms, calendar and - moderation in about a minute. - {/if} -

- -
+ {/if} diff --git a/src/app/components/HomeInbox.svelte b/src/app/components/HomeInbox.svelte index e69cc710..2e933c1a 100644 --- a/src/app/components/HomeInbox.svelte +++ b/src/app/components/HomeInbox.svelte @@ -5,7 +5,9 @@ import Icon from "@lib/components/Icon.svelte" import Link from "@lib/components/Link.svelte" import Button from "@lib/components/Button.svelte" + import HomeSection from "@app/components/HomeSection.svelte" import HomeInboxItem from "@app/components/HomeInboxItem.svelte" + import RelayIcon from "@app/components/RelayIcon.svelte" import RelayName from "@app/components/RelayName.svelte" import {displayContentCount} from "@app/content" import {inboxConversations, inboxSpaceContent} from "@app/inbox" @@ -27,18 +29,14 @@ const startChat = () => navigate("/chat") -
-
- - - Inbox - + + {#snippet action()} {#if hasUnread} {/if} -
- {#if conversations.length === 0} -
+ {/snippet} + {#if conversations.length === 0 && $inboxSpaceContent.length === 0} +

Nothing in your inbox yet

Rooms and spaces you belong to report their activity here — messages, threads, classifieds, @@ -56,16 +54,19 @@

{:else} -
+
{#each conversations as conversation (conversation.path)} {/each} + {#each $inboxSpaceContent as { url, countsByKind } (url)} + + + + {displayContent(countsByKind)} + + {/each}
{/if} - {#each $inboxSpaceContent as { url, countsByKind } (url)} - - - {displayContent(countsByKind)} - - {/each} -
+ diff --git a/src/app/components/HomeInboxItem.svelte b/src/app/components/HomeInboxItem.svelte index 00d211e9..a3b6f2d3 100644 --- a/src/app/components/HomeInboxItem.svelte +++ b/src/app/components/HomeInboxItem.svelte @@ -1,10 +1,9 @@ - -
- {#if url} + + {#if url} + + {:else} + + {/if} +
+
- {#if h} - - {:else} - Chat - {/if} - - - - - {:else} - - - {#if others.length === 0} + {#if url} + {#if h} + + {:else} + Chat + {/if} + {:else if others.length === 0} Note to self {:else} @@ -50,24 +48,29 @@ {/if} {/if} - direct message - {/if} - - {formatTimestamp(event.created_at)} - - -
-
- - - {#if event.pubkey === $user.pubkey} - You: - {:else} - : - {/if} - -
- + + {#if url} + + {:else} + direct message + {/if} + +
+
+ + {#if event.pubkey === $user.pubkey} + You: + {:else} + : + {/if} + +
+ +
+
+ {formatTimestamp(event.created_at)} + +
diff --git a/src/app/components/HomeNetwork.svelte b/src/app/components/HomeNetwork.svelte index 6d021a81..fb8c233a 100644 --- a/src/app/components/HomeNetwork.svelte +++ b/src/app/components/HomeNetwork.svelte @@ -7,10 +7,10 @@ import {Feeds} from "@welshman/app" import {Scope, feedFromFilter, makeIntersectionFeed, makeScopeFeed} from "@welshman/feeds" import Planet from "@assets/icons/planet.svg?dataurl" - import Icon from "@lib/components/Icon.svelte" import Link from "@lib/components/Link.svelte" import Button from "@lib/components/Button.svelte" import Spinner from "@lib/components/Spinner.svelte" + import HomeSection from "@app/components/HomeSection.svelte" import NoteItem from "@app/components/NoteItem.svelte" import {app, relayLists, user} from "@app/core" import {makeFeedContext} from "@app/feeds" @@ -60,18 +60,14 @@ onMount(load) -
- - - Network - + {#if events.length === 0} {#if loading} -
+
Looking for notes from people you follow…
{:else} -
+

Follow a few people to fill this out

Notes from the people you follow collect here. Spaces are a good place to find some. @@ -80,11 +76,13 @@

{/if} {:else} -
+
{#each events.slice(0, limit) as event (event.id)} - + {/each}
- +
+ +
{/if} -
+ diff --git a/src/app/components/HomeSection.svelte b/src/app/components/HomeSection.svelte new file mode 100644 index 00000000..28c76ff1 --- /dev/null +++ b/src/app/components/HomeSection.svelte @@ -0,0 +1,24 @@ + + +
+
+

+ + {title} +

+ {@render action?.()} +
+ {@render children()} +
diff --git a/src/app/components/NoteItem.svelte b/src/app/components/NoteItem.svelte index 10bd4248..f38a7044 100644 --- a/src/app/components/NoteItem.svelte +++ b/src/app/components/NoteItem.svelte @@ -19,9 +19,16 @@ children?: Snippet context: FeedContext url?: string + class?: string } - const {url, event, children, context}: Props = $props() + const { + url, + event, + children, + context, + class: className = "card card-interactive", + }: Props = $props() const getRelays = () => (url ? [url] : $router.resolver.relays([seen(event)])) @@ -34,7 +41,7 @@ const onEmoji = (emoji: NativeEmoji) => createReaction({content: emoji.unicode, tags: []}) - +
-
+

{name}

diff --git a/src/routes/home/+page.svelte b/src/routes/home/+page.svelte index 5c371a3e..5ce1ce63 100644 --- a/src/routes/home/+page.svelte +++ b/src/routes/home/+page.svelte @@ -13,6 +13,12 @@ import {HOSTING_ENABLED} from "@app/hosting" import {PLATFORM_RELAYS} from "@app/env" + const today = new Date().toLocaleDateString(undefined, { + weekday: "long", + month: "short", + day: "numeric", + }) + // A single-space build has no dashboard to show - everything on it is scoped to the one space. onMount(() => { if (PLATFORM_RELAYS.length > 0) { @@ -23,21 +29,26 @@ -
- - Home +
+
+ + Home +
+
- -
- - -
-
- - {#if HOSTING_ENABLED} - - {/if} + +
+
+ + +
+
+ + {#if HOSTING_ENABLED} + + {/if} +