From a382facc7028c876ccada2e185e4d7990f88a53f Mon Sep 17 00:00:00 2001 From: Jon Staab Date: Wed, 23 Oct 2024 09:45:06 -0700 Subject: [PATCH] Tweaks to navigation --- pwa-assets.config.js | 8 +- src/app.d.ts | 2 +- src/app.html | 1 - src/app/components/ChannelCompose.svelte | 2 +- src/app/components/Chat.svelte | 177 ++++++++++++++++++ src/app/components/ChatMessage.svelte | 6 +- src/app/components/MenuSettings.svelte | 7 + src/app/components/MenuSpaces.svelte | 33 +--- src/app/components/PrimaryNav.svelte | 11 +- src/app/components/ThunkStatus.svelte | 40 ++-- src/routes/+layout.svelte | 9 +- src/routes/chat/+layout.svelte | 6 - src/routes/chat/[chat]/+page.svelte | 175 +---------------- src/routes/home/+page.svelte | 7 - src/routes/notes/+page.svelte | 8 + src/routes/spaces/[relay]/+layout.svelte | 11 -- .../spaces/[relay]/[[room]]/+page.svelte | 9 +- .../spaces/[relay]/calendar/+page.svelte | 10 +- .../spaces/[relay]/threads/+page.svelte | 10 +- svelte.config.js | 12 +- vite.config.ts | 5 +- 21 files changed, 282 insertions(+), 267 deletions(-) create mode 100644 src/app/components/Chat.svelte create mode 100644 src/routes/notes/+page.svelte diff --git a/pwa-assets.config.js b/pwa-assets.config.js index 0e7152c0..64ac8346 100644 --- a/pwa-assets.config.js +++ b/pwa-assets.config.js @@ -1,8 +1,8 @@ -import dotenv from 'dotenv' -import {defineConfig, minimalPreset as preset} from '@vite-pwa/assets-generator/config' +import dotenv from "dotenv" +import {defineConfig, minimalPreset as preset} from "@vite-pwa/assets-generator/config" -dotenv.config({path: '.env.local'}) -dotenv.config({path: '.env'}) +dotenv.config({path: ".env.local"}) +dotenv.config({path: ".env"}) export default defineConfig({ preset, diff --git a/src/app.d.ts b/src/app.d.ts index 6fea77ab..96eadf02 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -1,5 +1,5 @@ import "@poppanator/sveltekit-svg/dist/svg" -import 'vite-plugin-pwa/pwa-assets' +import "vite-plugin-pwa/pwa-assets" // See https://kit.svelte.dev/docs/types#app // for information about these interfaces diff --git a/src/app.html b/src/app.html index 399c95eb..89c1887d 100644 --- a/src/app.html +++ b/src/app.html @@ -14,7 +14,6 @@ - diff --git a/src/app/components/ChannelCompose.svelte b/src/app/components/ChannelCompose.svelte index 8df7dc20..a7cc31fc 100644 --- a/src/app/components/ChannelCompose.svelte +++ b/src/app/components/ChannelCompose.svelte @@ -33,7 +33,7 @@
+ {:else} + +

+ + and {others.length - 1} + {others.length > 2 ? "others" : "other"} + +

+ {/if} +
+
+ {#if remove($pubkey, $missingInboxes).length > 0} + {@const count = remove($pubkey, $missingInboxes).length} + {@const label = count > 1 ? "inboxes are" : "inbox is"} +
+ + {count} +
+ {/if} +
+ + {/if} +
+ {#if $missingInboxes.includes(assertNotNil($pubkey))} +
+
+

+ + Your inbox is not configured. +

+

+ In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please visit + your relay settings page to set up your + inbox. +

+
+
+ {/if} + {#each elements as { type, id, value, showPubkey } (id)} + {#if type === "date"} + {value} + {:else} + {@const event = assertEvent(value)} + {@const thunk = $thunks[event.id]} + + {/if} + {/each} +

+ + {#if loading} + Looking for messages... + {:else} + End of message history + {/if} + +

+
+ + diff --git a/src/app/components/ChatMessage.svelte b/src/app/components/ChatMessage.svelte index ddcece14..553a6b01 100644 --- a/src/app/components/ChatMessage.svelte +++ b/src/app/components/ChatMessage.svelte @@ -51,6 +51,9 @@ let popoverIsVisible = false +{#if thunk} + +{/if}
- {#if thunk} - - {/if}
diff --git a/src/app/components/MenuSettings.svelte b/src/app/components/MenuSettings.svelte index 89a51520..43275fd8 100644 --- a/src/app/components/MenuSettings.svelte +++ b/src/app/components/MenuSettings.svelte @@ -11,6 +11,13 @@
+ + +
+
Profile
+
Customize your user profile
+ +
diff --git a/src/app/components/MenuSpaces.svelte b/src/app/components/MenuSpaces.svelte index 06848943..31544f7e 100644 --- a/src/app/components/MenuSpaces.svelte +++ b/src/app/components/MenuSpaces.svelte @@ -7,15 +7,12 @@ import SpaceAvatar from "@app/components/SpaceAvatar.svelte" import RelayName from "@app/components/RelayName.svelte" import RelayDescription from "@app/components/RelayDescription.svelte" - import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte" - import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte" + import SpaceAdd from "@app/components/SpaceAdd.svelte" import {userMembership, getMembershipUrls, PLATFORM_RELAY} from "@app/state" import {makeSpacePath} from "@app/routes" import {pushModal} from "@app/modal" - const startCreate = () => pushModal(SpaceCreateExternal) - - const startJoin = () => pushModal(SpaceInviteAccept) + const addSpace = () => pushModal(SpaceAdd)
@@ -28,7 +25,7 @@ - {:else} + {:else if getMembershipUrls($userMembership).length > 0} {#each getMembershipUrls($userMembership) as url (url)} @@ -38,29 +35,13 @@ {/each} - {#if getMembershipUrls($userMembership).length > 0} - - {/if} + {/if} - - - -
-
Find a space
-
Browse spaces on the discover page.
- - -
diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte index 47afa0a7..7abae72f 100644 --- a/src/app/components/PrimaryNav.svelte +++ b/src/app/components/PrimaryNav.svelte @@ -14,7 +14,8 @@ const addSpace = () => pushModal(SpaceAdd) - const showSpacesMenu = () => pushModal(MenuSpaces) + const showSpacesMenu = () => + getMembershipUrls($userMembership).length > 0 ? pushModal(MenuSpaces) : pushModal(SpaceAdd) const showSettingsMenu = () => pushModal(MenuSettings) @@ -58,6 +59,9 @@ class="tooltip-right"> + + + @@ -73,10 +77,13 @@
-
+
+ + + diff --git a/src/app/components/ThunkStatus.svelte b/src/app/components/ThunkStatus.svelte index 1a2d44be..031343f4 100644 --- a/src/app/components/ThunkStatus.svelte +++ b/src/app/components/ThunkStatus.svelte @@ -28,23 +28,25 @@ $: failure = Object.entries($status).find(([url, s]) => [Failure, Timeout].includes(s.status)) -{#if canCancel || isPending} - - -{:else if isFailure && failure} - {@const [url, {message, status}] = failure} - - - - Failed to send! +
+ {#if canCancel || isPending} + + - -{/if} + {:else if isFailure && failure} + {@const [url, {message, status}] = failure} + + + + Failed to send! + + + {/if} +
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 9c2b0ca2..61c7cdeb 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -2,6 +2,7 @@ import "@src/app.css" import {onMount} from "svelte" import {get} from "svelte/store" + import {dev} from "$app/environment" import {sleep, take, sortBy, ago, now, HOUR} from "@welshman/lib" import type {TrustedEvent} from "@welshman/util" import { @@ -38,7 +39,7 @@ import AppContainer from "@app/components/AppContainer.svelte" import ModalContainer from "@app/components/ModalContainer.svelte" import {theme} from "@app/theme" - import {INDEXER_RELAYS, PLATFORM_LOGO, PLATFORM_ACCENT} from "@app/state" + import {INDEXER_RELAYS} from "@app/state" import {loadUserData} from "@app/commands" import * as state from "@app/state" @@ -141,6 +142,12 @@ }) + + {#if !dev} + + {/if} + + {#await ready}
{:then} diff --git a/src/routes/chat/+layout.svelte b/src/routes/chat/+layout.svelte index 538fa2b1..d27091f8 100644 --- a/src/routes/chat/+layout.svelte +++ b/src/routes/chat/+layout.svelte @@ -8,13 +8,11 @@ import Page from "@lib/components/Page.svelte" import Button from "@lib/components/Button.svelte" import SecondaryNav from "@lib/components/SecondaryNav.svelte" - import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte" import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte" import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte" import ChatStart from "@app/components/ChatStart.svelte" import ChatItem from "@app/components/ChatItem.svelte" import {chatSearch, pullConservatively} from "@app/state" - import {makeChatPath} from "@app/routes" import {pushModal} from "@app/modal" const startChat = () => pushModal(ChatStart) @@ -22,7 +20,6 @@ let term = "" $: chats = $chatSearch.searchOptions(term).filter(c => c.pubkeys.length > 1) - $: notesPath = makeChatPath([$pubkey!]) onMount(() => { const filter = {kinds: [WRAP], "#p": [$pubkey!]} @@ -37,9 +34,6 @@ - - Your Notes - Chats - {:else} - -

- - and {others.length - 1} - {others.length > 2 ? "others" : "other"} - -

- {/if} -
-
- {#if remove($pubkey, $missingInboxes).length > 0} - {@const count = remove($pubkey, $missingInboxes).length} - {@const label = count > 1 ? "inboxes are" : "inbox is"} -
- - {count} -
- {/if} -
- - {/if} -
- {#if $missingInboxes.includes(assertNotNil($pubkey))} -
-
-

- - Your inbox is not configured. -

-

- In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please visit - your relay settings page to set up your - inbox. -

-
-
- {/if} - {#each elements as { type, id, value, showPubkey } (id)} - {#if type === "date"} - {value} - {:else} - {@const event = assertEvent(value)} - {@const thunk = $thunks[event.id]} - - {/if} - {/each} -

- - {#if loading} - Looking for messages... - {:else} - End of message history - {/if} - -

-
- -
+ diff --git a/src/routes/home/+page.svelte b/src/routes/home/+page.svelte index b705e13f..7d178312 100644 --- a/src/routes/home/+page.svelte +++ b/src/routes/home/+page.svelte @@ -36,13 +36,6 @@
Use an invite link, or create your own space.
- - -
-
Discover spaces
-
Find a community based on your hobbies or interests.
- -
diff --git a/src/routes/notes/+page.svelte b/src/routes/notes/+page.svelte new file mode 100644 index 00000000..56db421a --- /dev/null +++ b/src/routes/notes/+page.svelte @@ -0,0 +1,8 @@ + + + diff --git a/src/routes/spaces/[relay]/+layout.svelte b/src/routes/spaces/[relay]/+layout.svelte index 426752f2..76913852 100644 --- a/src/routes/spaces/[relay]/+layout.svelte +++ b/src/routes/spaces/[relay]/+layout.svelte @@ -2,16 +2,11 @@ import {onMount} from "svelte" import {page} from "$app/stores" import {load} from "@welshman/app" - import Icon from "@lib/components/Icon.svelte" import Page from "@lib/components/Page.svelte" import Delay from "@lib/components/Delay.svelte" - import Button from "@lib/components/Button.svelte" import SecondaryNav from "@lib/components/SecondaryNav.svelte" import MenuSpace from "@app/components/MenuSpace.svelte" import {decodeRelay, MEMBERSHIPS} from "@app/state" - import {pushDrawer} from "@app/modal" - - const openMenu = () => pushDrawer(MenuSpace, {url}) $: url = decodeRelay($page.params.relay) @@ -35,9 +30,3 @@ {/key} - -
- -
diff --git a/src/routes/spaces/[relay]/[[room]]/+page.svelte b/src/routes/spaces/[relay]/[[room]]/+page.svelte index 3fb13bd2..81eeb421 100644 --- a/src/routes/spaces/[relay]/[[room]]/+page.svelte +++ b/src/routes/spaces/[relay]/[[room]]/+page.svelte @@ -22,6 +22,7 @@ import Spinner from "@lib/components/Spinner.svelte" import PageBar from "@lib/components/PageBar.svelte" import Divider from "@lib/components/Divider.svelte" + import MenuSpace from "@app/components/MenuSpace.svelte" import ChannelMessage from "@app/components/ChannelMessage.svelte" import ChannelCompose from "@app/components/ChannelCompose.svelte" import { @@ -35,12 +36,15 @@ getMembershipRoomsByUrl, } from "@app/state" import {addRoomMembership, removeRoomMembership} from "@app/commands" + import {pushDrawer} from "@app/modal" const {room = GENERAL} = $page.params const url = decodeRelay($page.params.relay) const channel = deriveChannel(makeChannelId(url, room)) const thunks = writable({} as Record) + const openMenu = () => pushDrawer(MenuSpace, {url}) + const assertEvent = (e: any) => e as TrustedEvent const onSubmit = ({content, tags}: EventContent) => { @@ -96,7 +100,7 @@
{room} -
+
{#if room !== GENERAL} {#if getMembershipRoomsByUrl(url, $userMembership).includes(room)} {/if} {/if} +
diff --git a/src/routes/spaces/[relay]/calendar/+page.svelte b/src/routes/spaces/[relay]/calendar/+page.svelte index 00f40b0b..aca87fb2 100644 --- a/src/routes/spaces/[relay]/calendar/+page.svelte +++ b/src/routes/spaces/[relay]/calendar/+page.svelte @@ -10,15 +10,18 @@ import Spinner from "@lib/components/Spinner.svelte" import PageBar from "@lib/components/PageBar.svelte" import Divider from "@lib/components/Divider.svelte" + import MenuSpace from "@app/components/MenuSpace.svelte" import EventItem from "@app/components/EventItem.svelte" import EventCreate from "@app/components/EventCreate.svelte" - import {pushModal} from "@app/modal" + import {pushModal, pushDrawer} from "@app/modal" import {deriveEventsForUrl, pullConservatively, decodeRelay} from "@app/state" const url = decodeRelay($page.params.relay) const kinds = [EVENT_DATE, EVENT_TIME] const events = deriveEventsForUrl(url, kinds) + const openMenu = () => pushDrawer(MenuSpace, {url}) + const createEvent = () => pushModal(EventCreate, {url}) const getEnd = (event: TrustedEvent) => parseInt(event.tags.find(t => t[0] === "end")?.[1] || "") @@ -69,6 +72,11 @@
Calendar +
+ +
{#each items as { event, dateDisplay }, i (event.id)} diff --git a/src/routes/spaces/[relay]/threads/+page.svelte b/src/routes/spaces/[relay]/threads/+page.svelte index bb39fd28..075f11ae 100644 --- a/src/routes/spaces/[relay]/threads/+page.svelte +++ b/src/routes/spaces/[relay]/threads/+page.svelte @@ -10,10 +10,11 @@ import Button from "@lib/components/Button.svelte" import PageBar from "@lib/components/PageBar.svelte" import Spinner from "@lib/components/Spinner.svelte" + import MenuSpace from "@app/components/MenuSpace.svelte" import ThreadItem from "@app/components/ThreadItem.svelte" import ThreadCreate from "@app/components/ThreadCreate.svelte" - import {pushModal} from "@app/modal" import {deriveEventsForUrl, decodeRelay} from "@app/state" + import {pushModal, pushDrawer} from "@app/modal" const url = decodeRelay($page.params.relay) const kinds = [NOTE] @@ -21,6 +22,8 @@ const events = deriveEventsForUrl(url, kinds) const loader = feedLoader.getLoader(feed, {}) + const openMenu = () => pushDrawer(MenuSpace, {url}) + const createThread = () => pushModal(ThreadCreate, {url}) let limit = 5 @@ -52,6 +55,11 @@
Threads +
+ +
{#each $events.slice(0, limit) as event (event.id)} diff --git a/svelte.config.js b/svelte.config.js index be353a74..18351f1e 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -16,12 +16,12 @@ export default { }, csp: { directives: { - 'script-src': ['self', 'plausible.io'], - 'worker-src': ['self', 'blob:'], - 'style-src': ['self', 'unsafe-inline'], - 'frame-src': ['open.spotify.com', 'embed.tidal.com'], - 'child-src': ['none'], - 'form-action': ['none'], + "script-src": ["self", "plausible.io"], + "worker-src": ["self", "blob:"], + "style-src": ["self", "unsafe-inline"], + "frame-src": ["open.spotify.com", "embed.tidal.com"], + "child-src": ["none"], + "form-action": ["none"], }, }, }, diff --git a/vite.config.ts b/vite.config.ts index dce464d0..3eb76395 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,8 +1,6 @@ -import fs from "fs" import dotenv from "dotenv" -import * as path from "path" import {defineConfig} from "vite" -import {SvelteKitPWA} from '@vite-pwa/sveltekit' +import {SvelteKitPWA} from "@vite-pwa/sveltekit" import {sveltekit} from "@sveltejs/kit/vite" import svg from "@poppanator/sveltekit-svg" @@ -29,6 +27,7 @@ export default defineConfig({ short_name: process.env.VITE_PLATFORM_NAME, theme_color: process.env.VITE_PLATFORM_ACCENT, description: process.env.VITE_PLATFORM_DESCRIPTION, + // @ts-ignore permissions: ["clipboardRead", "clipboardWrite", "unlimitedStorage"], icons: [ {src: "pwa-64x64.png", sizes: "64x64", type: "image/png"},