Skip to content

Commit 5c4d0c5

Browse files
committed
format fix
1 parent 8c04eb3 commit 5c4d0c5

File tree

12 files changed

+65
-58
lines changed

12 files changed

+65
-58
lines changed

platforms/metagram/src/lib/fragments/RightAside/RightAside.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
<aside {...restProps} class="hidden border border-y-0 border-s-gray-200 md:block md:pt-13">
1414
<div class="mx-5">
15-
<h2 class="mb-11 text-lg font-semibold">
15+
<h2 class="mb-10 text-lg font-semibold">
1616
{@render header?.()}
1717
</h2>
1818
<div>

platforms/metagram/src/lib/fragments/SettingsPage/SettingsPage.svelte

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@
1212
import { HugeiconsIcon } from '@hugeicons/svelte';
1313
1414
let route = $derived(page.url.pathname);
15+
let { id } = page.params;
1516
</script>
1617

1718
<div class="flex flex-col gap-5 px-5 py-2 md:gap-8">
1819
<div class="bg-grey rounded-xl p-3 md:p-5">
1920
<SettingsNavigationButton
20-
onclick={() => goto('/settings/asdf/account')}
21+
onclick={() => goto(`/settings/${id}/account`)}
2122
profileSrc="https://picsum.photos/200/300"
2223
>
2324
{#snippet children()}
@@ -29,10 +30,10 @@
2930
</SettingsNavigationButton>
3031
</div>
3132
<hr class="text-grey" />
32-
<div class="flex flex-col gap-5">
33+
<div class="flex flex-col gap-3">
3334
<h3 class="text-brand-burnt-orange text-base font-semibold">Personalisation</h3>
34-
<div class="{route === '/settings/asdf/notifications' ? 'bg-grey' : ''} rounded-xl p-2">
35-
<SettingsNavigationButton onclick={() => goto('/settings/asdf/notifications')}>
35+
<div class="{route === `/settings/${id}/notifications` ? 'bg-grey' : ''} rounded-xl p-2">
36+
<SettingsNavigationButton onclick={() => goto(`/settings/${id}/notifications`)}>
3637
{#snippet leadingIcon()}
3738
<HugeiconsIcon
3839
size="24px"
@@ -45,8 +46,8 @@
4546
{/snippet}
4647
</SettingsNavigationButton>
4748
</div>
48-
<div class="{route === '/settings/asdf/direct-messages' ? 'bg-grey' : ''} rounded-xl p-2">
49-
<SettingsNavigationButton onclick={() => goto('/settings/asdf/direct-messages')}>
49+
<div class="{route === `/settings/${id}/direct-messages` ? 'bg-grey' : ''} rounded-xl p-2">
50+
<SettingsNavigationButton onclick={() => goto(`/settings/${id}/direct-messages`)}>
5051
{#snippet leadingIcon()}
5152
<HugeiconsIcon
5253
size="24px"
@@ -61,10 +62,10 @@
6162
</div>
6263
</div>
6364
<hr class="text-grey" />
64-
<div class="flex flex-col gap-5">
65+
<div class="flex flex-col gap-3">
6566
<h3 class="text-brand-burnt-orange text-base font-semibold">System</h3>
66-
<div class="{route === '/settings/asdf/data-and-storage' ? 'bg-grey' : ''} rounded-xl p-2">
67-
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
67+
<div class="{route === `/settings/${id}/data-and-storage` ? 'bg-grey' : ''} rounded-xl p-2">
68+
<SettingsNavigationButton onclick={() => goto(`/settings/${id}/data-and-storage`)}>
6869
{#snippet leadingIcon()}
6970
<HugeiconsIcon
7071
size="24px"
@@ -77,8 +78,8 @@
7778
{/snippet}
7879
</SettingsNavigationButton>
7980
</div>
80-
<div class="{route === '/settings/asdf/support' ? 'bg-grey' : ''} rounded-xl p-2">
81-
<SettingsNavigationButton onclick={() => goto('/settings/asdf/support')}>
81+
<div class="{route === `/settings/${id}/support` ? 'bg-grey' : ''} rounded-xl p-2">
82+
<SettingsNavigationButton onclick={() => goto(`/settings/${id}/support`)}>
8283
{#snippet leadingIcon()}
8384
<HugeiconsIcon
8485
size="24px"
@@ -93,9 +94,9 @@
9394
</div>
9495
</div>
9596
<hr class="text-grey" />
96-
<div class="flex flex-col gap-5">
97-
<div class="{route === '/settings/asdf/logout' ? 'bg-grey' : ''} rounded-xl p-2">
98-
<SettingsNavigationButton onclick={() => goto('/settings/asdf/logout')}>
97+
<div class="flex flex-col gap-3">
98+
<div class="{route === `/settings/${id}/logout` ? 'bg-grey' : ''} rounded-xl p-2">
99+
<SettingsNavigationButton onclick={() => goto(`/settings/${id}/logout`)}>
99100
{#snippet leadingIcon()}
100101
<HugeiconsIcon
101102
size="24px"

platforms/metagram/src/lib/fragments/SettingsRightAside/Accounts.svelte

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,31 @@
11
<script>
22
import { goto } from '$app/navigation';
3+
import { page } from '$app/state';
34
import { SettingsNavigationButton } from '..';
5+
6+
let { id } = page.params;
47
</script>
58

69
<div class="flex flex-col gap-3">
7-
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
10+
<SettingsNavigationButton onclick={() => goto(`/settings/${id}/data-and-storage`)}>
811
{#snippet children()}
912
Username
1013
{/snippet}
1114
</SettingsNavigationButton>
1215
<hr class="text-grey" />
13-
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
16+
<SettingsNavigationButton onclick={() => goto(`/settings/${id}/data-and-storage`)}>
1417
{#snippet children()}
1518
Email Address
1619
{/snippet}
1720
</SettingsNavigationButton>
1821
<hr class="text-grey" />
19-
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
22+
<SettingsNavigationButton onclick={() => goto(`/settings/${id}/data-and-storage`)}>
2023
{#snippet children()}
2124
Change Password
2225
{/snippet}
2326
</SettingsNavigationButton>
2427
<hr class="text-grey" />
25-
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
28+
<SettingsNavigationButton onclick={() => goto(`/settings/${id}/data-and-storage`)}>
2629
{#snippet children()}
2730
Deactivate Account
2831
{/snippet}

platforms/metagram/src/lib/fragments/SettingsRightAside/Aside.svelte

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,37 +9,34 @@
99
import Support from './Support.svelte';
1010
1111
let route = $derived(page.url.pathname);
12+
let { id } = page.params;
13+
14+
function currentRoute() {
15+
const path = route;
16+
const config = {
17+
[`/settings/${id}/account`]: { title: 'Account', component: Accounts },
18+
[`/settings/${id}/notifications`]: { title: 'Notifications', component: Notifications },
19+
[`/settings/${id}/direct-messages`]: {
20+
title: 'Direct Messages',
21+
component: DirectMessages
22+
},
23+
[`/settings/${id}/data-and-storage`]: {
24+
title: 'Data & Storage',
25+
component: DataStorage
26+
},
27+
[`/settings/${id}/support`]: { title: 'Support', component: Support },
28+
[`/settings/${id}/logout`]: { title: 'Logout', component: Logout }
29+
};
30+
31+
return config[path];
32+
}
1233
</script>
1334

1435
<RightAside>
1536
{#snippet header()}
16-
{#if route === '/settings/asdf/account'}
17-
Account
18-
{:else if route === '/settings/asdf/notifications'}
19-
Notifications
20-
{:else if route === '/settings/asdf/direct-messages'}
21-
Direct Messages
22-
{:else if route === '/settings/asdf/data-and-storage'}
23-
Data & Storage
24-
{:else if route === '/settings/asdf/support'}
25-
Support
26-
{:else if route === '/settings/asdf/logout'}
27-
Logout
28-
{/if}
37+
{currentRoute().title}
2938
{/snippet}
3039
{#snippet asideContent()}
31-
{#if route === '/settings/asdf/account'}
32-
<Accounts></Accounts>
33-
{:else if route === '/settings/asdf/notifications'}
34-
<Notifications></Notifications>
35-
{:else if route === '/settings/asdf/direct-messages'}
36-
<DirectMessages></DirectMessages>
37-
{:else if route === '/settings/asdf/data-and-storage'}
38-
<DataStorage></DataStorage>
39-
{:else if route === '/settings/asdf/support'}
40-
<Support></Support>
41-
{:else if route === '/settings/asdf/logout'}
42-
<Logout></Logout>
43-
{/if}
40+
<svelte:component this={currentRoute().component} />
4441
{/snippet}
4542
</RightAside>

platforms/metagram/src/lib/fragments/SettingsRightAside/DataStorage.svelte

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
<script>
22
import { goto } from '$app/navigation';
3+
import { page } from '$app/state';
34
import { SettingsNavigationButton } from '..';
5+
6+
let { id } = page.params;
47
</script>
58

69
<div class="flex flex-col gap-3">
7-
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
10+
<SettingsNavigationButton onclick={() => goto(`/settings/${id}/data-and-storage`)}>
811
{#snippet children()}
912
Clear cache
1013
{/snippet}
1114
</SettingsNavigationButton>
1215
<hr class="text-grey" />
13-
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
16+
<SettingsNavigationButton onclick={() => goto(`/settings/${id}/data-and-storage`)}>
1417
{#snippet children()}
1518
Download my data
1619
{/snippet}
1720
</SettingsNavigationButton>
1821
<hr class="text-grey" />
19-
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
22+
<SettingsNavigationButton onclick={() => goto(`/settings/${id}/data-and-storage`)}>
2023
{#snippet children()}
2124
Logged in devices
2225
{/snippet}

platforms/metagram/src/lib/fragments/SettingsRightAside/Logout.svelte

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
<script>
22
import { goto } from '$app/navigation';
3+
import { page } from '$app/state';
34
import { Button } from '$lib/ui';
45
import { SettingsNavigationButton } from '..';
6+
7+
let { id } = page.params;
58
</script>
69

710
<div class="flex flex-col gap-3">
811
<SettingsNavigationButton
912
hasTrailingIcon={false}
10-
onclick={() => goto('/settings/asdf/data-and-storage')}
13+
onclick={() => goto(`/settings/${id}/data-and-storage`)}
1114
>
1215
{#snippet children()}
1316
<div class="flex flex-col items-start">

platforms/metagram/src/lib/fragments/SettingsRightAside/Notifications.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script>
2+
import { page } from '$app/state';
23
import SettingsToggleButton from '../SettingsToggleButton/SettingsToggleButton.svelte';
34
</script>
45

platforms/metagram/src/lib/fragments/SettingsRightAside/Support.svelte

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
<script>
22
import { goto } from '$app/navigation';
3+
import { page } from '$app/state';
34
import { SettingsNavigationButton } from '..';
5+
6+
let { id } = page.params;
47
</script>
58

69
<div class="flex flex-col gap-3">
7-
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
10+
<SettingsNavigationButton onclick={() => goto(`/settings/${id}/data-and-storage`)}>
811
{#snippet children()}
912
Report a bug
1013
{/snippet}
1114
</SettingsNavigationButton>
1215
<hr class="text-grey" />
13-
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
16+
<SettingsNavigationButton onclick={() => goto(`/settings/${id}/data-and-storage`)}>
1417
{#snippet children()}
1518
Send feedback
1619
{/snippet}

platforms/metagram/src/lib/fragments/SideBar/SideBar.svelte

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
2121
$effect(() => {
2222
const pathname = page.url.pathname;
23-
2423
if (pathname.includes('/home')) {
2524
activeTab = 'home';
2625
} else if (pathname.includes('/discover')) {

platforms/metagram/src/routes/(protected)/+layout.svelte

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@
2828
heading = '';
2929
}
3030
});
31+
32+
let { id } = page.params;
3133
</script>
3234

3335
<main class="block h-[100dvh] grid-cols-[22vw_auto_31vw] md:grid">
@@ -40,7 +42,7 @@
4042
<button
4143
type="button"
4244
class="flex items-center gap-2"
43-
onclick={() => goto('settings/asdf')}
45+
onclick={() => goto(`/settings/${id}`)}
4446
>
4547
<Settings size="24px" color="var(--color-brand-burnt-orange)" />
4648
</button>

0 commit comments

Comments
 (0)