Skip to content

Commit 5770175

Browse files
ananyayaya129ananyayaya129
committed
settings page tertiary pages
1 parent a8176e8 commit 5770175

9 files changed

Lines changed: 184 additions & 51 deletions

File tree

‎platforms/metagram/src/lib/fragments/SettingsDeleteButton/SettingsDeleteButton.svelte‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script lang="ts">
2+
import { cn } from '$lib/utils';
3+
import { Delete02Icon } from '@hugeicons/core-free-icons';
4+
import { HugeiconsIcon } from '@hugeicons/svelte';
5+
import type { Snippet } from 'svelte';
6+
import type { HTMLAttributes } from 'svelte/elements';
7+
8+
interface ISettingsDeleteButtonProps extends HTMLAttributes<HTMLElement> {
9+
children: Snippet;
10+
onclick: () => void;
11+
}
12+
13+
let { children, onclick, ...restProps }: ISettingsDeleteButtonProps = $props();
14+
15+
const cBase = 'flex w-full items-center justify-between';
16+
</script>
17+
18+
<div {...restProps} class={cn([cBase, restProps.class].join(' '))}>
19+
<div class="flex items-center gap-2">
20+
<h3 class="text-black-800 text-base">
21+
{@render children?.()}
22+
</h3>
23+
</div>
24+
<button class="cursor-pointer" {onclick}>
25+
<HugeiconsIcon icon={Delete02Icon} color="var(--color-black-400)" />
26+
</button>
27+
</div>

‎platforms/metagram/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
alt=""
4444
/>
4545
{/if}
46-
<h3 class="text-black-800 text-base">
46+
<h3 class="text-black-800 text-start text-base">
4747
{@render children?.()}
4848
</h3>
4949
</div>

‎platforms/metagram/src/lib/fragments/SettingsToggleButton/SettingsToggleButton.svelte‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<script lang="ts">
22
import { Toggle } from '$lib/ui';
33
import { cn } from '$lib/utils';
4-
import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
5-
import { HugeiconsIcon } from '@hugeicons/svelte';
64
import type { Snippet } from 'svelte';
75
import type { HTMLButtonAttributes } from 'svelte/elements';
86

‎platforms/metagram/src/lib/fragments/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,4 @@ export { default as SideBar } from './SideBar/SideBar.svelte';
1111
export { default as RightAside } from './RightAside/RightAside.svelte';
1212
export { default as SettingsToggleButton } from './SettingsToggleButton/SettingsToggleButton.svelte';
1313
export { default as Post } from './Post/Post.svelte';
14+
export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';

‎platforms/metagram/src/lib/ui/Label/Label.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
1010
let { children, ...restProps }: ILabelProps = $props();
1111
12-
const cBase = 'inline-block text-lg font-geist font-medium text-black-800';
12+
const cBase = 'inline-block text-base font-geist font-medium text-black-800';
1313
</script>
1414

1515
<label {...restProps} class={cn([cBase, restProps.class].join(' '))}>

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,11 @@
3030

3131
<main class="block h-[100dvh] grid-cols-[20vw_auto_30vw] md:grid">
3232
<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
33-
3433
<section class="mx-4 md:mx-8 md:pt-8">
35-
<div class="flex justify-between">
34+
<div class="flex items-center justify-between">
3635
<Header variant="primary" {heading} />
3736
{#if route === '/profile'}
38-
<div class="mb-4 flex pe-5 md:hidden">
37+
<div class="mb-6 flex md:hidden">
3938
<button
4039
type="button"
4140
class="flex items-center gap-2"

‎platforms/metagram/src/routes/(protected)/settings/account/+page.svelte‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,60 +3,61 @@
33
import { SettingsNavigationButton } from '$lib/fragments';
44
import { Button, Helper, Input, Label } from '$lib/ui';
55
6-
let accountPage: 'account' | 'username' | 'emailAdd' | 'changePass' | 'deactivate' = 'account';
6+
let currentPage: 'home' | 'username' | 'emailAdd' | 'changePass' | 'deactivate' = 'home';
77
let userEmail: string = 'ananya@auvo.io';
88
</script>
99

10-
{#if accountPage === 'account'}
10+
{#if currentPage === 'home'}
1111
<div class="flex flex-col gap-3">
12-
<SettingsNavigationButton onclick={() => (accountPage = 'username')}>
12+
<SettingsNavigationButton onclick={() => (currentPage = 'username')}>
1313
{#snippet children()}
1414
Username
1515
{/snippet}
1616
</SettingsNavigationButton>
1717
<hr class="text-grey" />
18-
<SettingsNavigationButton onclick={() => (accountPage = 'emailAdd')}>
18+
<SettingsNavigationButton onclick={() => (currentPage = 'emailAdd')}>
1919
{#snippet children()}
2020
Email Address
2121
{/snippet}
2222
</SettingsNavigationButton>
2323
<hr class="text-grey" />
24-
<SettingsNavigationButton onclick={() => (accountPage = 'changePass')}>
24+
<SettingsNavigationButton onclick={() => (currentPage = 'changePass')}>
2525
{#snippet children()}
2626
Change Password
2727
{/snippet}
2828
</SettingsNavigationButton>
2929
<hr class="text-grey" />
30-
<SettingsNavigationButton onclick={() => (accountPage = 'deactivate')}>
30+
<SettingsNavigationButton onclick={() => (currentPage = 'deactivate')}>
3131
{#snippet children()}
3232
Deactivate Account
3333
{/snippet}
3434
</SettingsNavigationButton>
3535
<hr class="text-grey" />
3636
</div>
37-
{:else if accountPage === 'username'}
37+
{:else if currentPage === 'username'}
3838
<div>
3939
<Label>Change your username</Label>
4040
<Input type="text" placeholder="Edit Username" />
4141
<Helper>You can only do this 3 more times</Helper>
4242
</div>
4343
<hr class="text-grey" />
4444
<Button size="sm" variant="secondary" callback={() => alert('saved')}>Save Changes</Button>
45-
{:else if accountPage === 'emailAdd'}
45+
{:else if currentPage === 'emailAdd'}
4646
<div>
4747
<Label>Your email address</Label>
4848
<Input type="email" value={userEmail} disabled />
4949
</div>
50-
{:else if accountPage === 'changePass'}
50+
{:else if currentPage === 'changePass'}
5151
<div>
5252
<Label>Enter Old Password</Label>
5353
<Input type="password" placeholder="Old Password" />
5454
</div>
55+
<hr class="text-grey" />
5556
<div>
5657
<Label>Enter New Password</Label>
5758
<Input type="password" placeholder="New Password" />
5859
</div>
59-
{:else if accountPage === 'deactivate'}
60+
{:else if currentPage === 'deactivate'}
6061
<div class="flex flex-col gap-3">
6162
<SettingsNavigationButton
6263
hasTrailingIcon={false}

‎platforms/metagram/src/routes/(protected)/settings/data-and-storage/+page.svelte‎

Lines changed: 99 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,103 @@
11
<script lang="ts">
22
import { goto } from '$app/navigation';
3-
import { SettingsNavigationButton } from '$lib/fragments';
3+
import { SettingsDeleteButton, SettingsNavigationButton } from '$lib/fragments';
4+
import { Button } from '$lib/ui';
5+
6+
let currentPage: 'home' | 'clearCache' | 'downloadData' | 'loggedInDevice' = 'home';
47
</script>
58

6-
<div class="flex flex-col gap-3">
7-
<SettingsNavigationButton onclick={() => goto(`/settings/data-and-storage`)}>
8-
{#snippet children()}
9-
Clear cache
10-
{/snippet}
11-
</SettingsNavigationButton>
12-
<hr class="text-grey" />
13-
<SettingsNavigationButton onclick={() => goto(`/settings/data-and-storage`)}>
14-
{#snippet children()}
15-
Download my data
16-
{/snippet}
17-
</SettingsNavigationButton>
18-
<hr class="text-grey" />
19-
<SettingsNavigationButton onclick={() => goto(`/settings/data-and-storage`)}>
20-
{#snippet children()}
21-
Logged in devices
22-
{/snippet}
23-
</SettingsNavigationButton>
24-
<hr class="text-grey" />
25-
</div>
9+
{#if currentPage === 'home'}
10+
<div class="flex flex-col gap-3">
11+
<SettingsNavigationButton onclick={() => (currentPage = 'clearCache')}>
12+
{#snippet children()}
13+
Clear cache
14+
{/snippet}
15+
</SettingsNavigationButton>
16+
<hr class="text-grey" />
17+
<SettingsNavigationButton onclick={() => (currentPage = 'downloadData')}>
18+
{#snippet children()}
19+
Download my data
20+
{/snippet}
21+
</SettingsNavigationButton>
22+
<hr class="text-grey" />
23+
<SettingsNavigationButton onclick={() => (currentPage = 'loggedInDevice')}>
24+
{#snippet children()}
25+
Logged in devices
26+
{/snippet}
27+
</SettingsNavigationButton>
28+
<hr class="text-grey" />
29+
</div>
30+
{:else if currentPage === 'clearCache'}
31+
<div class="flex flex-col gap-3">
32+
<SettingsNavigationButton
33+
hasTrailingIcon={false}
34+
onclick={() => goto(`/settings/data-and-storage`)}
35+
>
36+
{#snippet children()}
37+
<div class="flex flex-col items-start">
38+
<h2 class="text-black-800 text-base">Clear cache</h2>
39+
<p class="text-black-600 text-sm">
40+
This would clear the apps cache and free about 14MB of storage
41+
</p>
42+
</div>
43+
{/snippet}
44+
</SettingsNavigationButton>
45+
<hr class="text-grey" />
46+
<Button size="sm" variant="secondary" callback={() => alert('all clear')}
47+
>Clear Cache</Button
48+
>
49+
</div>
50+
{:else if currentPage === 'downloadData'}
51+
<div class="flex flex-col gap-3">
52+
<SettingsNavigationButton
53+
hasTrailingIcon={false}
54+
onclick={() => goto(`/settings/data-and-storage`)}
55+
>
56+
{#snippet children()}
57+
<div class="flex flex-col items-start">
58+
<h2 class="text-black-800 text-base">Do you want to download your data?</h2>
59+
<p class="text-black-600 text-sm">
60+
Your data would be sent to the email associated with your account.
61+
</p>
62+
</div>
63+
{/snippet}
64+
</SettingsNavigationButton>
65+
<hr class="text-grey" />
66+
<Button size="sm" variant="secondary" callback={() => alert('Downloaded')}
67+
>Download Data</Button
68+
>
69+
</div>
70+
{:else if currentPage === 'loggedInDevice'}
71+
<div class="flex flex-col gap-3">
72+
<SettingsDeleteButton onclick={() => alert('Deleted')}>
73+
{#snippet children()}
74+
<div class="flex flex-col items-start">
75+
<h2 class="text-black-800 text-base">Google Pixel 8a</h2>
76+
<p class="text-black-600 text-sm">Last signed in today, 8:23AM</p>
77+
</div>
78+
{/snippet}
79+
</SettingsDeleteButton>
80+
<hr class="text-grey" />
81+
<SettingsDeleteButton onclick={() => alert('Deleted')}>
82+
{#snippet children()}
83+
<div class="flex flex-col items-start">
84+
<h2 class="text-black-800 text-base">Apple IPhone 16</h2>
85+
<p class="text-black-600 text-sm">Last signed in today, 8:23AM</p>
86+
</div>
87+
{/snippet}
88+
</SettingsDeleteButton>
89+
<hr class="text-grey" />
90+
<SettingsDeleteButton onclick={() => alert('Deleted')}>
91+
{#snippet children()}
92+
<div class="flex flex-col items-start">
93+
<h2 class="text-black-800 text-base">Google Pixel 8a</h2>
94+
<p class="text-black-600 text-sm">Last signed in today, 8:23AM</p>
95+
</div>
96+
{/snippet}
97+
</SettingsDeleteButton>
98+
<hr class="text-grey" />
99+
</div>
100+
<Button size="sm" variant="secondary" callback={() => alert('All Deleted')}
101+
>Logout of all the devices</Button
102+
>
103+
{/if}

‎platforms/metagram/src/routes/(protected)/settings/support/+page.svelte‎

Lines changed: 42 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,48 @@
11
<script lang="ts">
2-
import { goto } from '$app/navigation';
32
import { SettingsNavigationButton } from '$lib/fragments';
3+
import InputFile from '$lib/fragments/InputFile/InputFile.svelte';
4+
import { Button, Input, Label } from '$lib/ui';
5+
6+
let currentPage: 'home' | 'report' | 'feedback' = 'home';
47
</script>
58

6-
<div class="flex flex-col gap-3">
7-
<SettingsNavigationButton onclick={() => goto(`/settings/data-and-storage`)}>
8-
{#snippet children()}
9-
Report a bug
10-
{/snippet}
11-
</SettingsNavigationButton>
9+
{#if currentPage === 'home'}
10+
<div class="flex flex-col gap-3">
11+
<SettingsNavigationButton onclick={() => (currentPage = 'report')}>
12+
{#snippet children()}
13+
Report a bug
14+
{/snippet}
15+
</SettingsNavigationButton>
16+
<hr class="text-grey" />
17+
<SettingsNavigationButton onclick={() => (currentPage = 'feedback')}>
18+
{#snippet children()}
19+
Send feedback
20+
{/snippet}
21+
</SettingsNavigationButton>
22+
<hr class="text-grey" />
23+
</div>
24+
{:else if currentPage === 'report'}
25+
<div>
26+
<Label>What issue are you facing?</Label>
27+
<Input type="text" placeholder="Describe your issue" />
28+
</div>
29+
<hr class="text-grey" />
30+
<div>
31+
<Label>Attach a screenshot (optional)</Label>
32+
<InputFile label="Click to upload a photo"></InputFile>
33+
</div>
34+
<hr class="text-grey" />
35+
<Button size="sm" variant="secondary" callback={() => alert('reported')}>Report bug</Button>
36+
{:else if currentPage === 'feedback'}
37+
<div>
38+
<Label>Write to us</Label>
39+
<Input type="text" placeholder="Send a message" />
40+
</div>
1241
<hr class="text-grey" />
13-
<SettingsNavigationButton onclick={() => goto(`/settings/data-and-storage`)}>
14-
{#snippet children()}
15-
Send feedback
16-
{/snippet}
17-
</SettingsNavigationButton>
42+
<div>
43+
<Label>Attach a screenshot (optional)</Label>
44+
<InputFile label="Click to upload a photo"></InputFile>
45+
</div>
1846
<hr class="text-grey" />
19-
</div>
47+
<Button size="sm" variant="secondary" callback={() => alert('sent')}>Send</Button>
48+
{/if}

0 commit comments

Comments
 (0)