From 35f1431ae25e2c9c41ac1931612e5cc3a47e32f2 Mon Sep 17 00:00:00 2001 From: Jonathan Staab Date: Mon, 10 Apr 2023 09:36:01 -0500 Subject: [PATCH] Split app.svelte into smaller pieces, nest components under ui --- ROADMAP.md | 3 + src/App.svelte | 317 ------------------ src/app/ui.ts | 16 +- src/main.js | 2 +- src/ui/App.svelte | 175 ++++++++++ .../notes => ui}/ForegroundButtons.svelte | 14 +- src/ui/Main.svelte | 86 +++++ src/ui/Modal.svelte | 61 ++++ src/{views => ui}/SideNav.svelte | 2 +- src/{views => ui}/Toast.svelte | 0 src/{views => ui}/TopNav.svelte | 2 +- src/{ => ui}/partials/Anchor.svelte | 0 src/{ => ui}/partials/Badge.svelte | 2 +- src/{ => ui}/partials/Button.svelte | 0 src/{ => ui}/partials/Card.svelte | 0 src/{ => ui}/partials/Channel.svelte | 2 +- src/{ => ui}/partials/Compose.svelte | 6 +- src/{ => ui}/partials/Content.svelte | 0 src/{ => ui}/partials/ContentEditable.svelte | 0 src/{ => ui}/partials/CopyValue.svelte | 0 src/{ => ui}/partials/Heading.svelte | 0 src/{ => ui}/partials/ImageCircle.svelte | 2 +- src/{ => ui}/partials/ImageInput.svelte | 8 +- src/{ => ui}/partials/Input.svelte | 0 src/{ => ui}/partials/LogoSvg.svelte | 0 src/{ => ui}/partials/Media.svelte | 4 +- src/{ => ui}/partials/MediaSet.svelte | 6 +- src/{ => ui}/partials/Modal.svelte | 0 src/{ => ui}/partials/OverflowMenu.svelte | 7 +- src/{ => ui}/partials/PersonAbout.svelte | 2 +- src/{ => ui}/partials/PersonCircle.svelte | 4 +- src/{ => ui}/partials/PersonInfo.svelte | 6 +- src/{ => ui}/partials/Popover.svelte | 0 src/{ => ui}/partials/QRCode.svelte | 2 +- src/{ => ui}/partials/RelayCard.svelte | 2 +- src/{ => ui}/partials/RelayCardSimple.svelte | 0 src/{ => ui}/partials/Select.svelte | 0 src/{ => ui}/partials/SelectButton.svelte | 0 src/{ => ui}/partials/Spinner.svelte | 0 src/{ => ui}/partials/Suggestions.svelte | 2 +- src/{ => ui}/partials/Tabs.svelte | 0 src/{ => ui}/partials/Textarea.svelte | 0 src/{ => ui}/partials/Toggle.svelte | 0 src/{ => ui}/routes/Bech32Entity.svelte | 6 +- src/{ => ui}/routes/ChatDetail.svelte | 8 +- src/{ => ui}/routes/ChatList.svelte | 8 +- src/{ => ui}/routes/Debug.svelte | 2 +- src/{ => ui}/routes/Feeds.svelte | 10 +- src/{ => ui}/routes/Keys.svelte | 10 +- src/{ => ui}/routes/Login.svelte | 6 +- src/{ => ui}/routes/Logout.svelte | 4 +- src/{ => ui}/routes/MessagesDetail.svelte | 10 +- src/{ => ui}/routes/MessagesList.svelte | 6 +- src/{ => ui}/routes/NotFound.svelte | 0 src/{ => ui}/routes/Notifications.svelte | 6 +- src/{ => ui}/routes/PersonDetail.svelte | 18 +- src/{ => ui}/routes/RelayDetail.svelte | 8 +- src/{ => ui}/routes/RelayList.svelte | 8 +- src/{ => ui}/routes/Scan.svelte | 10 +- src/{ => ui}/routes/Search.svelte | 6 +- src/{ => ui}/views/EnsureData.svelte | 14 +- src/{ => ui}/views/NavItem.svelte | 0 src/{ => ui}/views/Profile.svelte | 14 +- src/{ => ui}/views/Settings.svelte | 12 +- src/{ => ui}/views/chat/ChatEdit.svelte | 8 +- src/{ => ui}/views/chat/ChatListItem.svelte | 2 +- src/{ => ui}/views/feed/Feed.svelte | 10 +- src/{ => ui}/views/feed/Follows.svelte | 2 +- src/{ => ui}/views/feed/Network.svelte | 2 +- src/{ => ui}/views/feed/RelayFeed.svelte | 10 +- src/{ => ui}/views/login/ConnectUser.svelte | 14 +- src/{ => ui}/views/login/PrivKeyLogin.svelte | 8 +- src/{ => ui}/views/login/PubKeyLogin.svelte | 8 +- .../views/messages/MessagesListItem.svelte | 4 +- src/{ => ui}/views/notes/Note.svelte | 36 +- src/{ => ui}/views/notes/NoteContent.svelte | 10 +- src/{ => ui}/views/notes/NoteCreate.svelte | 18 +- src/{ => ui}/views/notes/NoteDetail.svelte | 10 +- .../views/notifications/Notification.svelte | 10 +- .../notifications/NotificationSection.svelte | 2 +- .../views/onboarding/Onboarding.svelte | 10 +- .../onboarding/OnboardingComplete.svelte | 8 +- .../views/onboarding/OnboardingFollows.svelte | 10 +- .../views/onboarding/OnboardingIntro.svelte | 6 +- .../views/onboarding/OnboardingKey.svelte | 8 +- .../views/onboarding/OnboardingRelays.svelte | 10 +- src/{ => ui}/views/person/Likes.svelte | 2 +- src/{ => ui}/views/person/Notes.svelte | 2 +- src/{ => ui}/views/person/PersonInfo.svelte | 2 +- src/{ => ui}/views/person/PersonList.svelte | 6 +- .../views/person/PersonProfileInfo.svelte | 6 +- src/{ => ui}/views/person/PersonSearch.svelte | 6 +- src/{ => ui}/views/person/PersonShare.svelte | 4 +- .../views/person/PersonSummary.svelte | 6 +- src/{ => ui}/views/person/Relays.svelte | 4 +- src/{ => ui}/views/relays/AddRelay.svelte | 8 +- src/{ => ui}/views/relays/RelayActions.svelte | 6 +- src/{ => ui}/views/relays/RelayCard.svelte | 4 +- src/{ => ui}/views/relays/RelaySearch.svelte | 4 +- src/{ => ui}/views/relays/RelayTitle.svelte | 2 +- 100 files changed, 594 insertions(+), 573 deletions(-) delete mode 100644 src/App.svelte create mode 100644 src/ui/App.svelte rename src/{views/notes => ui}/ForegroundButtons.svelte (58%) create mode 100644 src/ui/Main.svelte create mode 100644 src/ui/Modal.svelte rename src/{views => ui}/SideNav.svelte (98%) rename src/{views => ui}/Toast.svelte (100%) rename src/{views => ui}/TopNav.svelte (95%) rename src/{ => ui}/partials/Anchor.svelte (100%) rename src/{ => ui}/partials/Badge.svelte (90%) rename src/{ => ui}/partials/Button.svelte (100%) rename src/{ => ui}/partials/Card.svelte (100%) rename src/{ => ui}/partials/Channel.svelte (98%) rename src/{ => ui}/partials/Compose.svelte (96%) rename src/{ => ui}/partials/Content.svelte (100%) rename src/{ => ui}/partials/ContentEditable.svelte (100%) rename src/{ => ui}/partials/CopyValue.svelte (100%) rename src/{ => ui}/partials/Heading.svelte (100%) rename src/{ => ui}/partials/ImageCircle.svelte (95%) rename src/{ => ui}/partials/ImageInput.svelte (91%) rename src/{ => ui}/partials/Input.svelte (100%) rename src/{ => ui}/partials/LogoSvg.svelte (100%) rename src/{ => ui}/partials/Media.svelte (95%) rename src/{ => ui}/partials/MediaSet.svelte (87%) rename src/{ => ui}/partials/Modal.svelte (100%) rename src/{ => ui}/partials/OverflowMenu.svelte (79%) rename src/{ => ui}/partials/PersonAbout.svelte (95%) rename src/{ => ui}/partials/PersonCircle.svelte (87%) rename src/{ => ui}/partials/PersonInfo.svelte (88%) rename src/{ => ui}/partials/Popover.svelte (100%) rename src/{ => ui}/partials/QRCode.svelte (92%) rename src/{ => ui}/partials/RelayCard.svelte (97%) rename src/{ => ui}/partials/RelayCardSimple.svelte (100%) rename src/{ => ui}/partials/Select.svelte (100%) rename src/{ => ui}/partials/SelectButton.svelte (100%) rename src/{ => ui}/partials/Spinner.svelte (100%) rename src/{ => ui}/partials/Suggestions.svelte (95%) rename src/{ => ui}/partials/Tabs.svelte (100%) rename src/{ => ui}/partials/Textarea.svelte (100%) rename src/{ => ui}/partials/Toggle.svelte (100%) rename src/{ => ui}/routes/Bech32Entity.svelte (84%) rename src/{ => ui}/routes/ChatDetail.svelte (92%) rename src/{ => ui}/routes/ChatList.svelte (89%) rename src/{ => ui}/routes/Debug.svelte (90%) rename src/{ => ui}/routes/Feeds.svelte (72%) rename src/{ => ui}/routes/Keys.svelte (91%) rename src/{ => ui}/routes/Login.svelte (91%) rename src/{ => ui}/routes/Logout.svelte (88%) rename src/{ => ui}/routes/MessagesDetail.svelte (93%) rename src/{ => ui}/routes/MessagesList.svelte (85%) rename src/{ => ui}/routes/NotFound.svelte (100%) rename src/{ => ui}/routes/Notifications.svelte (92%) rename src/{ => ui}/routes/PersonDetail.svelte (92%) rename src/{ => ui}/routes/RelayDetail.svelte (69%) rename src/{ => ui}/routes/RelayList.svelte (87%) rename src/{ => ui}/routes/Scan.svelte (88%) rename src/{ => ui}/routes/Search.svelte (63%) rename src/{ => ui}/views/EnsureData.svelte (86%) rename src/{ => ui}/views/NavItem.svelte (100%) rename src/{ => ui}/views/Profile.svelte (90%) rename src/{ => ui}/views/Settings.svelte (92%) rename src/{ => ui}/views/chat/ChatEdit.svelte (92%) rename src/{ => ui}/views/chat/ChatListItem.svelte (97%) rename src/{ => ui}/views/feed/Feed.svelte (94%) rename src/{ => ui}/views/feed/Follows.svelte (92%) rename src/{ => ui}/views/feed/Network.svelte (93%) rename src/{ => ui}/views/feed/RelayFeed.svelte (77%) rename src/{ => ui}/views/login/ConnectUser.svelte (92%) rename src/{ => ui}/views/login/PrivKeyLogin.svelte (85%) rename src/{ => ui}/views/login/PubKeyLogin.svelte (81%) rename src/{ => ui}/views/messages/MessagesListItem.svelte (92%) rename src/{ => ui}/views/notes/Note.svelte (95%) rename src/{ => ui}/views/notes/NoteContent.svelte (94%) rename src/{ => ui}/views/notes/NoteCreate.svelte (90%) rename src/{ => ui}/views/notes/NoteDetail.svelte (86%) rename src/{ => ui}/views/notifications/Notification.svelte (89%) rename src/{ => ui}/views/notifications/NotificationSection.svelte (85%) rename src/{ => ui}/views/onboarding/Onboarding.svelte (87%) rename src/{ => ui}/views/onboarding/OnboardingComplete.svelte (69%) rename src/{ => ui}/views/onboarding/OnboardingFollows.svelte (87%) rename src/{ => ui}/views/onboarding/OnboardingIntro.svelte (82%) rename src/{ => ui}/views/onboarding/OnboardingKey.svelte (85%) rename src/{ => ui}/views/onboarding/OnboardingRelays.svelte (89%) rename src/{ => ui}/views/person/Likes.svelte (87%) rename src/{ => ui}/views/person/Notes.svelte (82%) rename src/{ => ui}/views/person/PersonInfo.svelte (91%) rename src/{ => ui}/views/person/PersonList.svelte (87%) rename src/{ => ui}/views/person/PersonProfileInfo.svelte (93%) rename src/{ => ui}/views/person/PersonSearch.svelte (86%) rename src/{ => ui}/views/person/PersonShare.svelte (81%) rename src/{ => ui}/views/person/PersonSummary.svelte (91%) rename src/{ => ui}/views/person/Relays.svelte (81%) rename src/{ => ui}/views/relays/AddRelay.svelte (86%) rename src/{ => ui}/views/relays/RelayActions.svelte (87%) rename src/{ => ui}/views/relays/RelayCard.svelte (92%) rename src/{ => ui}/views/relays/RelaySearch.svelte (88%) rename src/{ => ui}/views/relays/RelayTitle.svelte (96%) diff --git a/ROADMAP.md b/ROADMAP.md index f7bd7261..30fb5c9a 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -1,5 +1,8 @@ # Current +- [ ] Refactor + - Move global modals to child components? + - [ ] Relays bounty - [ ] Ability to create custom feeds - [ ] Fix tag-style event mentions. Probably transform all mentions into entities in parse diff --git a/src/App.svelte b/src/App.svelte deleted file mode 100644 index b5386f63..00000000 --- a/src/App.svelte +++ /dev/null @@ -1,317 +0,0 @@ - - - -
- {#if ready} -
- - - - - - - - - - - - - - - - - - {#key params.npub} - - {/key} - - - - {#key params.entity} - - {/key} - - - - {#key params.entity} - - {/key} - - - - - {#key params.b64url} - - {/key} - - - - - - - - {#key params.entity} - - {/key} - - -
- {/if} - - {#if !url.match(/messages|chat|relays$|keys|settings|logout$/)} - - {/if} - - - - - {#if $modal} - - {#if $modal.type === "note/detail"} - {#key $modal.note.id} - - {/key} - {:else if $modal.type === "note/create"} - - {:else if $modal.type === "relay/add"} - - {:else if $modal.type === "onboarding"} - - {:else if $modal.type === "room/edit"} - - {:else if $modal.type === "login/privkey"} - - {:else if $modal.type === "login/pubkey"} - - {:else if $modal.type === "login/connect"} - - {:else if $modal.type === "person/info"} - - {:else if $modal.type === "person/share"} - - {:else if $modal.type === "person/follows"} - - {:else if $modal.type === "person/followers"} - - {:else if $modal.type === "message"} - -
{$modal.message}
- {#if $modal.spinner} - - {/if} - - {/if} - - {/if} - - -
- diff --git a/src/app/ui.ts b/src/app/ui.ts index aaec96b7..6b55872d 100644 --- a/src/app/ui.ts +++ b/src/app/ui.ts @@ -16,6 +16,14 @@ export const routes = { person: (pubkey, tab = "notes") => `/people/${nip19.npubEncode(pubkey)}/${tab}`, } +export const location = (() => { + const store = writable(window.location) + + globalHistory.listen(({location}) => store.set(location)) + + return store +})() + // Install prompt export const installPrompt = writable(null) @@ -55,10 +63,10 @@ export const modal = { set: data => { if (data) { modal.history.push(data) - navigate(location.pathname + `#m=${modal.history.length - 1}`) + navigate(window.location.pathname + `#m=${modal.history.length - 1}`) } else { modal.history = [] - navigate(location.pathname) + navigate(window.location.pathname) } }, close: () => modal.set(null), @@ -72,8 +80,8 @@ export const modal = { subscribe: cb => { cb(last(modal.history)) - return globalHistory.listen(({action}) => { - const match = location.hash.match(/\bm=(\d+)/) + return location.subscribe($location => { + const match = $location.hash.match(/\bm=(\d+)/) const i = match ? parseInt(match[1]) : null modal.history.splice(i === null ? -1 : i + 1) diff --git a/src/main.js b/src/main.js index 3d1fe965..5b10a4c8 100644 --- a/src/main.js +++ b/src/main.js @@ -1,7 +1,7 @@ import "src/app.css" import Bugsnag from "@bugsnag/js" -import App from "src/App.svelte" +import App from "src/ui/App.svelte" import {installPrompt} from "src/app/ui" Bugsnag.start({ diff --git a/src/ui/App.svelte b/src/ui/App.svelte new file mode 100644 index 00000000..65350a70 --- /dev/null +++ b/src/ui/App.svelte @@ -0,0 +1,175 @@ + + + +
+
+ + + + + +
+ diff --git a/src/views/notes/ForegroundButtons.svelte b/src/ui/ForegroundButtons.svelte similarity index 58% rename from src/views/notes/ForegroundButtons.svelte rename to src/ui/ForegroundButtons.svelte index ab56109b..0ce2257b 100644 --- a/src/views/notes/ForegroundButtons.svelte +++ b/src/ui/ForegroundButtons.svelte @@ -1,19 +1,25 @@
- {#if $canPublish} + {#if $canPublish && !showCreateNote} {/if} diff --git a/src/ui/Main.svelte b/src/ui/Main.svelte new file mode 100644 index 00000000..35b64e4b --- /dev/null +++ b/src/ui/Main.svelte @@ -0,0 +1,86 @@ + + +{#if ready} +
+ + + + + + + + + + + + + + + + + + {#key params.npub} + + {/key} + + + + {#key params.entity} + + {/key} + + + + {#key params.entity} + + {/key} + + + + + {#key params.b64url} + + {/key} + + + + + + + + {#key params.entity} + + {/key} + + +
+{/if} diff --git a/src/ui/Modal.svelte b/src/ui/Modal.svelte new file mode 100644 index 00000000..67d7fa95 --- /dev/null +++ b/src/ui/Modal.svelte @@ -0,0 +1,61 @@ + + +{#if $modal} + + {#if $modal.type === "note/detail"} + {#key $modal.note.id} + + {/key} + {:else if $modal.type === "note/create"} + + {:else if $modal.type === "relay/add"} + + {:else if $modal.type === "onboarding"} + + {:else if $modal.type === "room/edit"} + + {:else if $modal.type === "login/privkey"} + + {:else if $modal.type === "login/pubkey"} + + {:else if $modal.type === "login/connect"} + + {:else if $modal.type === "person/info"} + + {:else if $modal.type === "person/share"} + + {:else if $modal.type === "person/follows"} + + {:else if $modal.type === "person/followers"} + + {:else if $modal.type === "message"} + +
{$modal.message}
+ {#if $modal.spinner} + + {/if} + + {/if} + +{/if} diff --git a/src/views/SideNav.svelte b/src/ui/SideNav.svelte similarity index 98% rename from src/views/SideNav.svelte rename to src/ui/SideNav.svelte index a71c37de..4983b50b 100644 --- a/src/views/SideNav.svelte +++ b/src/ui/SideNav.svelte @@ -6,7 +6,7 @@ import {menuIsOpen, installPrompt, routes} from "src/app/ui" import {newNotifications, newDirectMessages, newChatMessages} from "src/app/listener" import {slowConnections} from "src/app/connection" - import PersonCircle from "src/partials/PersonCircle.svelte" + import PersonCircle from "src/ui/partials/PersonCircle.svelte" const {profile, canPublish} = user diff --git a/src/views/Toast.svelte b/src/ui/Toast.svelte similarity index 100% rename from src/views/Toast.svelte rename to src/ui/Toast.svelte diff --git a/src/views/TopNav.svelte b/src/ui/TopNav.svelte similarity index 95% rename from src/views/TopNav.svelte rename to src/ui/TopNav.svelte index a4868db4..f1aad8dd 100644 --- a/src/views/TopNav.svelte +++ b/src/ui/TopNav.svelte @@ -1,6 +1,6 @@ diff --git a/src/routes/Feeds.svelte b/src/ui/routes/Feeds.svelte similarity index 72% rename from src/routes/Feeds.svelte rename to src/ui/routes/Feeds.svelte index 667e982b..fc7a582c 100644 --- a/src/routes/Feeds.svelte +++ b/src/ui/routes/Feeds.svelte @@ -1,11 +1,11 @@ diff --git a/src/views/EnsureData.svelte b/src/ui/views/EnsureData.svelte similarity index 86% rename from src/views/EnsureData.svelte rename to src/ui/views/EnsureData.svelte index 46871ba8..995dda74 100644 --- a/src/views/EnsureData.svelte +++ b/src/ui/views/EnsureData.svelte @@ -1,11 +1,11 @@ diff --git a/src/views/relays/AddRelay.svelte b/src/ui/views/relays/AddRelay.svelte similarity index 86% rename from src/views/relays/AddRelay.svelte rename to src/ui/views/relays/AddRelay.svelte index 68e61968..3adbf898 100644 --- a/src/views/relays/AddRelay.svelte +++ b/src/ui/views/relays/AddRelay.svelte @@ -1,9 +1,9 @@