diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte index 98cafef..1ff1271 100644 --- a/src/app/components/PrimaryNav.svelte +++ b/src/app/components/PrimaryNav.svelte @@ -6,52 +6,56 @@ -
-
+
+
- +
- {#if $profile?.picture} - + {#if $userProfile?.picture} + {:else} {/if} @@ -59,7 +63,7 @@ {#each $userGroupsByNom.entries() as [nom, qualifiedGroups] (nom)} {@const qualifiedGroup = qualifiedGroups[0]} - + gotoSpace(nom)}>
{qualifiedGroup?.group.name}
@@ -70,14 +74,14 @@
- +
- +
diff --git a/src/app/components/SecondaryNav.svelte b/src/app/components/SecondaryNav.svelte index f452274..433bf61 100644 --- a/src/app/components/SecondaryNav.svelte +++ b/src/app/components/SecondaryNav.svelte @@ -1,23 +1,50 @@
- - Home - - - People - - - Saved Notes - -
- Conversations -
- + {#if getPrimaryNavItem($page) === 'discover'} +
+ + Spaces +
-
+
+ + Themes + +
+ {:else if getPrimaryNavItem($page) === 'space'} + + {:else if getPrimaryNavItem($page) === 'settings'} + + {:else} +
+ + Home + +
+
+ + People + +
+
+ + Saved Notes + +
+
+ Conversations +
+ +
+
+ {/if}
diff --git a/src/app/routes.ts b/src/app/routes.ts new file mode 100644 index 0000000..5819e3e --- /dev/null +++ b/src/app/routes.ts @@ -0,0 +1,22 @@ +import type {Page} from '@sveltejs/kit' +import {userGroupsByNom} from '@app/state' + +export const getPrimaryNavItem = ($page: Page) => { + if ($page.route?.id?.match('^/(spaces|themes)$')) return 'discover' + if ($page.route?.id?.startsWith('/spaces')) return 'space' + if ($page.route?.id?.startsWith('/settings')) return 'settings' + return 'home' +} + +export const getPrimaryNavItemIndex = ($page: Page) => { + switch (getPrimaryNavItem($page)) { + case 'discover': + return userGroupsByNom.get().size + 2 + case 'space': + return Array.from(userGroupsByNom.get().keys()).findIndex(nom => nom === $page.params.nom) + 1 + case 'settings': + return userGroupsByNom.get().size + 3 + default: + return 0 + } +} diff --git a/src/app/state.ts b/src/app/state.ts index 8409bb0..fa9796a 100644 --- a/src/app/state.ts +++ b/src/app/state.ts @@ -454,8 +454,8 @@ export const groupMemberships = deriveEventsMapped({ }) export const { - indexStore: groupMembershipsByPubkey, - getIndex: getGroupMembersipsByPubkey, + indexStore: groupMembershipByPubkey, + getIndex: getGroupMembersipByPubkey, deriveItem: deriveGroupMembership, loadItem: loadGroupMembership, // getItem: getGroupMembership, @@ -470,3 +470,41 @@ export const { filters: [{kinds: [GROUPS], authors: [pubkey]}], }) }) + +// User stuff + +export const userProfile = derived([pk, profilesByPubkey], ([$pk, $profilesByPubkey]) => { + if (!$pk) return null + + loadProfile($pk) + + return $profilesByPubkey.get($pk) +}) + +export const userMembership = derived([pk, groupMembershipByPubkey], ([$pk, $groupMembershipByPubkey]) => { + if (!$pk) return null + + loadGroupMembership($pk) + + return $groupMembershipByPubkey.get($pk) +}) + +export const userGroupsByNom = withGetter(derived([userMembership, qualifiedGroupsById], ([$userMembership, $qualifiedGroupsById]) => { + const $userGroupsByNom = new Map() + + for (const id of $userMembership?.ids || []) { + const [url, nom] = splitGroupId(id) + const group = $qualifiedGroupsById.get(id) + const groups = $userGroupsByNom.get(nom) || [] + + loadGroup(nom, [url]) + + if (group) { + groups.push(group) + } + + $userGroupsByNom.set(nom, groups) + } + + return $userGroupsByNom +})) diff --git a/src/assets/icons/Pallete 2.svg b/src/assets/icons/Pallete 2.svg new file mode 100644 index 0000000..fe35734 --- /dev/null +++ b/src/assets/icons/Pallete 2.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/icons/Widget.svg b/src/assets/icons/Widget.svg new file mode 100644 index 0000000..3b4de2e --- /dev/null +++ b/src/assets/icons/Widget.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte index e645963..7446761 100644 --- a/src/lib/components/Icon.svelte +++ b/src/lib/components/Icon.svelte @@ -25,12 +25,14 @@ import LinkRound from "@assets/icons/Link Round.svg?dataurl" import Login from "@assets/icons/Login.svg?dataurl" import Login2 from "@assets/icons/Login 2.svg?dataurl" + import Pallete2 from "@assets/icons/Pallete 2.svg?dataurl" import Plain from "@assets/icons/Plain.svg?dataurl" import RemoteControllerMinimalistic from "@assets/icons/Remote Controller Minimalistic.svg?dataurl" import Settings from "@assets/icons/Settings.svg?dataurl" import UFO3 from "@assets/icons/UFO 3.svg?dataurl" import UserHeart from "@assets/icons/User Heart.svg?dataurl" import UserRounded from "@assets/icons/User Rounded.svg?dataurl" + import Widget from "@assets/icons/Widget.svg?dataurl" import WiFiRouterRound from "@assets/icons/Wi-Fi Router Round.svg?dataurl" export let icon @@ -56,12 +58,14 @@ "link-round": LinkRound, "login": Login, "login-2": Login2, + 'pallete-2': Pallete2, plain: Plain, 'remote-controller-minimalistic': RemoteControllerMinimalistic, settings: Settings, "ufo-3": UFO3, "user-heart": UserHeart, "user-rounded": UserRounded, + "widget": Widget, "wifi-router-round": WiFiRouterRound, })