From 63b3e5112b9fa12eda1a5cc216901be8d8eecde3 Mon Sep 17 00:00:00 2001 From: Zias van Nes Date: Fri, 21 Nov 2025 14:37:09 +0100 Subject: [PATCH] ui:big ui overhaul Improved dev experience by foldering components per feature. Improved the ui of the notification mangager to be more consistent with overall ui. --- .../components/NotificationSettings.svelte | 469 -------------- .../NotificationSettingsSheet.svelte | 36 - src/lib/components/auth/index.ts | 1 + .../components/{ => auth}/login-form.svelte | 2 +- src/lib/components/{ => finds}/Comment.svelte | 2 +- .../components/{ => finds}/CommentForm.svelte | 0 src/lib/components/finds/Comments.svelte | 23 + .../{ => finds}/CommentsList.svelte | 4 +- .../{ => finds}/CreateFindModal.svelte | 2 +- .../components/{ => finds}/FindCard.svelte | 8 +- .../components/{ => finds}/FindPreview.svelte | 97 +-- .../components/{ => finds}/FindsFilter.svelte | 0 .../components/{ => finds}/FindsList.svelte | 0 .../components/{ => finds}/LikeButton.svelte | 0 src/lib/components/finds/index.ts | 10 + .../{ => map}/LocationManager.svelte | 0 src/lib/components/{ => map}/Map.svelte | 0 src/lib/components/{ => map}/POISearch.svelte | 0 src/lib/components/map/index.ts | 3 + .../components/{ => media}/VideoPlayer.svelte | 0 src/lib/components/media/index.ts | 1 + .../NotificationManager.svelte | 0 .../NotificationPrompt.svelte | 0 .../notifications/NotificationSettings.svelte | 613 ++++++++++++++++++ src/lib/components/notifications/index.ts | 3 + .../{ => profile}/ProfilePanel.svelte | 22 +- .../{ => profile}/ProfilePicture.svelte | 2 +- .../{ => profile}/ProfilePictureSheet.svelte | 4 +- src/lib/components/profile/index.ts | 3 + src/lib/index.ts | 21 +- src/routes/+layout.svelte | 4 +- src/routes/+page.svelte | 8 +- src/routes/api/finds/+server.ts | 7 +- src/routes/friends/+page.svelte | 2 +- src/routes/login/+page.svelte | 2 +- src/service-worker.ts | 6 +- 36 files changed, 723 insertions(+), 632 deletions(-) delete mode 100644 src/lib/components/NotificationSettings.svelte delete mode 100644 src/lib/components/NotificationSettingsSheet.svelte create mode 100644 src/lib/components/auth/index.ts rename src/lib/components/{ => auth}/login-form.svelte (97%) rename src/lib/components/{ => finds}/Comment.svelte (97%) rename src/lib/components/{ => finds}/CommentForm.svelte (100%) create mode 100644 src/lib/components/finds/Comments.svelte rename src/lib/components/{ => finds}/CommentsList.svelte (97%) rename src/lib/components/{ => finds}/CreateFindModal.svelte (99%) rename src/lib/components/{ => finds}/FindCard.svelte (96%) rename src/lib/components/{ => finds}/FindPreview.svelte (89%) rename src/lib/components/{ => finds}/FindsFilter.svelte (100%) rename src/lib/components/{ => finds}/FindsList.svelte (100%) rename src/lib/components/{ => finds}/LikeButton.svelte (100%) create mode 100644 src/lib/components/finds/index.ts rename src/lib/components/{ => map}/LocationManager.svelte (100%) rename src/lib/components/{ => map}/Map.svelte (100%) rename src/lib/components/{ => map}/POISearch.svelte (100%) create mode 100644 src/lib/components/map/index.ts rename src/lib/components/{ => media}/VideoPlayer.svelte (100%) create mode 100644 src/lib/components/media/index.ts rename src/lib/components/{ => notifications}/NotificationManager.svelte (100%) rename src/lib/components/{ => notifications}/NotificationPrompt.svelte (100%) create mode 100644 src/lib/components/notifications/NotificationSettings.svelte create mode 100644 src/lib/components/notifications/index.ts rename src/lib/components/{ => profile}/ProfilePanel.svelte (90%) rename src/lib/components/{ => profile}/ProfilePicture.svelte (94%) rename src/lib/components/{ => profile}/ProfilePictureSheet.svelte (98%) create mode 100644 src/lib/components/profile/index.ts diff --git a/src/lib/components/NotificationSettings.svelte b/src/lib/components/NotificationSettings.svelte deleted file mode 100644 index 2281d44..0000000 --- a/src/lib/components/NotificationSettings.svelte +++ /dev/null @@ -1,469 +0,0 @@ - - -
- {#if isLoading} -
Loading preferences...
- {:else} - - {#if browserPermission !== 'granted'} -
-
- {#if browserPermission === 'denied'} - Browser notifications blocked -

- Please enable notifications in your browser settings to receive push notifications -

- {:else} - Browser permission required -

Enable browser notifications to receive push notifications

- {/if} -
- {#if browserPermission === 'default'} - - {/if} -
- {/if} - -
- -
-
-

Push Notifications

-

Enable or disable all push notifications

-
- -
- -
- - -
-
-

Friend Requests

-

Get notified when someone sends you a friend request

-
- -
- - -
-
-

Friend Request Accepted

-

Get notified when someone accepts your friend request

-
- -
- - -
-
-

Find Likes

-

Get notified when someone likes your find

-
- -
- - -
-
-

Find Comments

-

Get notified when someone comments on your find

-
- -
-
- {/if} -
- - diff --git a/src/lib/components/NotificationSettingsSheet.svelte b/src/lib/components/NotificationSettingsSheet.svelte deleted file mode 100644 index 40bad82..0000000 --- a/src/lib/components/NotificationSettingsSheet.svelte +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - Notifications - Manage your notification preferences - -
- -
- - - - diff --git a/src/lib/components/auth/index.ts b/src/lib/components/auth/index.ts new file mode 100644 index 0000000..021ba41 --- /dev/null +++ b/src/lib/components/auth/index.ts @@ -0,0 +1 @@ +export { default as LoginForm } from './login-form.svelte'; diff --git a/src/lib/components/login-form.svelte b/src/lib/components/auth/login-form.svelte similarity index 97% rename from src/lib/components/login-form.svelte rename to src/lib/components/auth/login-form.svelte index 03b5d03..d219d1c 100644 --- a/src/lib/components/login-form.svelte +++ b/src/lib/components/auth/login-form.svelte @@ -9,7 +9,7 @@ import { cn } from '$lib/utils.js'; import { toast } from 'svelte-sonner'; import type { HTMLAttributes } from 'svelte/elements'; - import type { ActionData } from '../../routes/login/$types.js'; + import type { ActionData } from '../../../routes/login/$types.js'; let { class: className, diff --git a/src/lib/components/Comment.svelte b/src/lib/components/finds/Comment.svelte similarity index 97% rename from src/lib/components/Comment.svelte rename to src/lib/components/finds/Comment.svelte index 4085d32..4fde799 100644 --- a/src/lib/components/Comment.svelte +++ b/src/lib/components/finds/Comment.svelte @@ -1,6 +1,6 @@ + + diff --git a/src/lib/components/CommentsList.svelte b/src/lib/components/finds/CommentsList.svelte similarity index 97% rename from src/lib/components/CommentsList.svelte rename to src/lib/components/finds/CommentsList.svelte index 0f1fa1d..3b8fb26 100644 --- a/src/lib/components/CommentsList.svelte +++ b/src/lib/components/finds/CommentsList.svelte @@ -1,6 +1,6 @@ + +
+
+
+
+

Notification Settings

+

Manage your notification preferences

+
+ +
+ +
+ {#if isLoading} +
Loading preferences...
+ {:else} + + {#if browserPermission !== 'granted'} +
+
+ {#if browserPermission === 'denied'} + Browser notifications blocked +

+ Please enable notifications in your browser settings to receive push notifications +

+ {:else} + Browser permission required +

Enable browser notifications to receive push notifications

+ {/if} +
+ {#if browserPermission === 'default'} + + {/if} +
+ {/if} + +
+ +
+
+

Push Notifications

+

Enable or disable all push notifications

+
+ +
+ +
+ + +
+
+

Friend Requests

+

Get notified when someone sends you a friend request

+
+ +
+ + +
+
+

Friend Request Accepted

+

Get notified when someone accepts your friend request

+
+ +
+ + +
+
+

Find Likes

+

Get notified when someone likes your find

+
+ +
+ + +
+
+

Find Comments

+

Get notified when someone comments on your find

+
+ +
+
+ {/if} +
+
+
+ + diff --git a/src/lib/components/notifications/index.ts b/src/lib/components/notifications/index.ts new file mode 100644 index 0000000..b3bbe91 --- /dev/null +++ b/src/lib/components/notifications/index.ts @@ -0,0 +1,3 @@ +export { default as NotificationManager } from './NotificationManager.svelte'; +export { default as NotificationPrompt } from './NotificationPrompt.svelte'; +export { default as NotificationSettings } from './NotificationSettings.svelte'; diff --git a/src/lib/components/ProfilePanel.svelte b/src/lib/components/profile/ProfilePanel.svelte similarity index 90% rename from src/lib/components/ProfilePanel.svelte rename to src/lib/components/profile/ProfilePanel.svelte index 7fad8a2..7e239b0 100644 --- a/src/lib/components/ProfilePanel.svelte +++ b/src/lib/components/profile/ProfilePanel.svelte @@ -7,11 +7,11 @@ DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger - } from './dropdown-menu'; - import { Skeleton } from './skeleton'; + } from '../dropdown-menu'; + import { Skeleton } from '../skeleton'; import ProfilePicture from './ProfilePicture.svelte'; import ProfilePictureSheet from './ProfilePictureSheet.svelte'; - import NotificationSettingsSheet from './NotificationSettingsSheet.svelte'; + import NotificationSettings from '../notifications/NotificationSettings.svelte'; interface Props { username: string; @@ -23,7 +23,7 @@ let { username, id, profilePictureUrl, loading = false }: Props = $props(); let showProfilePictureSheet = $state(false); - let showNotificationSettingsSheet = $state(false); + let showNotificationSettings = $state(false); function openProfilePictureSheet() { showProfilePictureSheet = true; @@ -33,12 +33,12 @@ showProfilePictureSheet = false; } - function openNotificationSettingsSheet() { - showNotificationSettingsSheet = true; + function openNotificationSettings() { + showNotificationSettings = true; } - function closeNotificationSettingsSheet() { - showNotificationSettingsSheet = false; + function closeNotificationSettings() { + showNotificationSettings = false; } @@ -85,7 +85,7 @@ Friends - + Notifications @@ -121,8 +121,8 @@ /> {/if} -{#if showNotificationSettingsSheet} - +{#if showNotificationSettings} + {/if}