diff --git a/src/app.css b/src/app.css index 1c4a3c5..b638712 100644 --- a/src/app.css +++ b/src/app.css @@ -95,3 +95,33 @@ a { box-shadow: 0 0 20px 5px var(--nucleus-selected-post); } } + +@keyframes slide-in-from-right { + from { + transform: translateX(144px); + opacity: 0; + } + to { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slide-in-from-left { + from { + transform: translateX(-144px); + opacity: 0; + } + to { + transform: translateX(0); + opacity: 1; + } +} + +.animate-slide-in-right { + animation: slide-in-from-right 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +.animate-slide-in-left { + animation: slide-in-from-left 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} diff --git a/src/components/NotificationsPopup.svelte b/src/components/NotificationsPopup.svelte deleted file mode 100644 index ea56999..0000000 --- a/src/components/NotificationsPopup.svelte +++ /dev/null @@ -1,30 +0,0 @@ - - - -
-
-
🚧
-

todo

-
-
- diff --git a/src/components/NotificationsView.svelte b/src/components/NotificationsView.svelte new file mode 100644 index 0000000..9f79974 --- /dev/null +++ b/src/components/NotificationsView.svelte @@ -0,0 +1,18 @@ +
+
+

notifications

+
+
+
+
+
+ +
+
+
🚧
+

todo

+
+
+
diff --git a/src/components/RichText.svelte b/src/components/RichText.svelte index f4dbe25..8778d1b 100644 --- a/src/components/RichText.svelte +++ b/src/components/RichText.svelte @@ -41,12 +41,13 @@ > {:else if feature.$type === 'app.bsky.richtext.facet#link'} {@const uri = new URL(feature.uri)} + {@const text = `${!uri.protocol.startsWith('http') ? `${uri.protocol}//` : ''}${uri.host}${uri.hash.length === 0 && uri.search.length === 0 && uri.pathname === '/' ? '' : uri.pathname}${uri.search}${uri.hash}`} {@render plainText(uri.href.replace(`${uri.protocol}//`, ''))}{@render plainText(`${text.substring(0, 40)}${text.length > 40 ? '...' : ''}`)} {:else if feature.$type === 'app.bsky.richtext.facet#tag'} void; - } - - let { isOpen = $bindable(false), onClose }: Props = $props(); + import { portal } from 'svelte-portal'; type Tab = 'style' | 'moderation' | 'advanced'; let activeTab = $state('advanced'); @@ -23,15 +16,6 @@ $settings.theme = localSettings.theme; }); - const resetSettingsToSaved = () => { - localSettings = $settings; - }; - - const handleClose = () => { - resetSettingsToSaved(); - onClose(); - }; - const handleSave = () => { settings.set(localSettings); window.location.reload(); @@ -56,19 +40,14 @@
{/snippet} -{#snippet settingHeader(name: string, desc: string)} -

{name}

-

{desc}

-{/snippet} - {#snippet advancedTab()} -
+
-

api endpoints

-
+

api endpoints

+
{#snippet _input(name: string, desc: string)}
-
- {@render divider()} - -
+
@@ -101,20 +78,15 @@ />
- {@render divider()} - -
- {@render settingHeader( - 'cache management', - 'clears cached data (records, DID documents, handles, etc.)' - )} +

cache management

+
+

clears cached data (records, DID documents, handles, etc.)

- {@render divider()} - -
- {@render settingHeader('reset settings', 'resets all settings to their default values')} +

reset settings

+
+

resets all settings to their default values

+ {/if} - {/snippet} - - {#if activeTab === 'advanced'} - {@render advancedTab()} - {:else if activeTab === 'moderation'} -
-
-
🚧
-

todo

+
+ +
+ {#if activeTab === 'advanced'} + {@render advancedTab()} + {:else if activeTab === 'moderation'} +
+
+
+
🚧
+

todo

+
+
-
- {:else if activeTab === 'style'} - {@render styleTab()} - {/if} + {:else if activeTab === 'style'} + {@render styleTab()} + {/if} +
- {#snippet footer()} +
(activeTab = tab)} /> - {/snippet} - +
+
+ + diff --git a/src/components/Tabs.svelte b/src/components/Tabs.svelte index 20d70e0..2f15ccc 100644 --- a/src/components/Tabs.svelte +++ b/src/components/Tabs.svelte @@ -8,13 +8,15 @@ let { tabs, activeTab = $bindable(), onTabChange }: Props = $props(); -
- {#each tabs as tab (tab)} +
+ {#each tabs as tab, idx (tab)} {@const isActive = activeTab === tab} {/snippet} -
- -
- {#if $accounts.length > 0} - {@render renderThreads()} - {:else} -
-

- x_x
no accounts are logged in! -

+
+ +
+ +
+ {#if $accounts.length > 0} + {@render renderThreads()} + {:else} +
+

+ x_x
no accounts are logged in! +

+
+ {/if} +
+ + + {#if currentView === 'settings'} +
+ +
+ {:else if currentView === 'notifications'} +
+
{/if}
- -
+ +
- (isSettingsOpen = false)} /> - (isNotificationsOpen = false)} -/> - {#snippet replyPost(post: ThreadPost, reverse: boolean = reverseChronological)}