Skip to content

Commit 6038168

Browse files
MisterX2000MisterX2000
committed
feat: add enter/exit transitions and state keying to sync status and provider UI components
1 parent 8469716 commit 6038168

2 files changed

Lines changed: 33 additions & 19 deletions

File tree

‎src/lib/components/Navbar.svelte‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
FolderHeart,
1313
Settings
1414
} from '@lucide/svelte';
15+
import { scale, fade } from 'svelte/transition';
1516
</script>
1617

1718
<div class="navbar sticky top-0 z-50 border-b border-base-200 bg-base-100 px-4 shadow-sm">
@@ -49,24 +50,28 @@
4950
: ''}
5051
>
5152
<div
52-
class="mr-2 badge sm:mr-4 {dbStore.syncStatus === 'Synced'
53+
class="mr-2 badge sm:mr-4 inline-grid place-items-center transition-colors duration-300 {dbStore.syncStatus === 'Synced'
5354
? 'badge-outline badge-success'
5455
: dbStore.syncStatus === 'Syncing...'
5556
? 'badge-outline badge-info'
5657
: dbStore.syncStatus === 'Error'
5758
? 'badge-outline badge-error'
5859
: 'badge-ghost'}"
5960
>
60-
{#if dbStore.syncStatus === 'Synced'}
61-
<Cloud class="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
62-
{:else if dbStore.syncStatus === 'Syncing...'}
63-
<CloudCog class="mr-1 h-3 w-3 animate-pulse sm:h-4 sm:w-4" />
64-
{:else if dbStore.syncStatus === 'Error'}
65-
<AlertCircle class="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
66-
{:else}
67-
<CloudOff class="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
68-
{/if}
69-
<span class="hidden sm:inline">{dbStore.syncStatus}</span>
61+
{#key dbStore.syncStatus}
62+
<div class="col-start-1 row-start-1 flex items-center justify-center" in:scale={{ duration: 300, start: 0.8, delay: 150 }} out:fade={{ duration: 150 }}>
63+
{#if dbStore.syncStatus === 'Synced'}
64+
<Cloud class="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
65+
{:else if dbStore.syncStatus === 'Syncing...'}
66+
<CloudCog class="mr-1 h-3 w-3 animate-pulse sm:h-4 sm:w-4" />
67+
{:else if dbStore.syncStatus === 'Error'}
68+
<AlertCircle class="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
69+
{:else}
70+
<CloudOff class="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
71+
{/if}
72+
<span class="hidden sm:inline">{dbStore.syncStatus}</span>
73+
</div>
74+
{/key}
7075
</div>
7176
</div>
7277
<div class="sm:tooltip sm:tooltip-bottom" data-tip="GitHub">

‎src/routes/settings/+page.svelte‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
Languages,
1717
LayoutGrid
1818
} from '@lucide/svelte';
19+
import { scale, fade } from 'svelte/transition';
1920
2021
let pat = $state(authStore.github.token);
2122
let gistId = $state(authStore.github.gistId);
@@ -386,22 +387,22 @@
386387
<div role="tablist" class="tabs tabs-box mb-4">
387388
<button
388389
role="tab"
389-
class="tab {activeTab === 'github' ? 'tab-active' : ''}"
390+
class="tab transition-all duration-300 {activeTab === 'github' ? 'tab-active' : ''}"
390391
onclick={() => { activeTab = 'github'; errorMessage = null; }}
391392
>
392393
GitHub Gist
393394
{#if authStore.activeProvider === 'github'}
394-
<div class="badge badge-primary badge-sm ml-2">Active</div>
395+
<div class="badge badge-primary badge-sm ml-2" in:scale={{duration: 200, start: 0.8}} out:scale={{duration: 200, start: 0.8}}>Active</div>
395396
{/if}
396397
</button>
397398
<button
398399
role="tab"
399-
class="tab {activeTab === 'gdrive' ? 'tab-active' : ''}"
400+
class="tab transition-all duration-300 {activeTab === 'gdrive' ? 'tab-active' : ''}"
400401
onclick={() => { activeTab = 'gdrive'; errorMessage = null; }}
401402
>
402403
Google Drive
403404
{#if authStore.activeProvider === 'gdrive'}
404-
<div class="badge badge-primary badge-sm ml-2">Active</div>
405+
<div class="badge badge-primary badge-sm ml-2" in:scale={{duration: 200, start: 0.8}} out:scale={{duration: 200, start: 0.8}}>Active</div>
405406
{/if}
406407
</button>
407408
</div>
@@ -493,11 +494,15 @@
493494
<div class="flex items-center gap-2">
494495
<button
495496
type="button"
496-
class="btn {authStore.activeProvider === 'github' ? 'btn-disabled' : 'btn-outline btn-accent'}"
497+
class="btn grid place-items-center transition-all duration-300 {authStore.activeProvider === 'github' ? 'btn-disabled' : 'btn-outline btn-accent'}"
497498
onclick={() => setActiveProvider('github')}
498499
disabled={authStore.activeProvider === 'github'}
499500
>
500-
{authStore.activeProvider === 'github' ? 'Currently Active' : 'Set as Active Sync Provider'}
501+
{#key authStore.activeProvider}
502+
<span class="col-start-1 row-start-1" in:scale={{duration:250, delay: 100, start: 0.95}} out:fade={{duration:150}}>
503+
{authStore.activeProvider === 'github' ? 'Currently Active' : 'Set as Active Sync Provider'}
504+
</span>
505+
{/key}
501506
</button>
502507
<button type="submit" class="btn btn-primary">
503508
<Save class="h-4 w-4" /> Save
@@ -581,11 +586,15 @@
581586
<div class="flex items-center gap-2">
582587
<button
583588
type="button"
584-
class="btn {authStore.activeProvider === 'gdrive' ? 'btn-disabled' : 'btn-outline btn-accent'}"
589+
class="btn grid place-items-center transition-all duration-300 {authStore.activeProvider === 'gdrive' ? 'btn-disabled' : 'btn-outline btn-accent'}"
585590
onclick={() => setActiveProvider('gdrive')}
586591
disabled={authStore.activeProvider === 'gdrive'}
587592
>
588-
{authStore.activeProvider === 'gdrive' ? 'Currently Active' : 'Set as Active Sync Provider'}
593+
{#key authStore.activeProvider}
594+
<span class="col-start-1 row-start-1" in:scale={{duration:250, delay: 100, start: 0.95}} out:fade={{duration:150}}>
595+
{authStore.activeProvider === 'gdrive' ? 'Currently Active' : 'Set as Active Sync Provider'}
596+
</span>
597+
{/key}
589598
</button>
590599
<button type="submit" class="btn btn-primary">
591600
<Save class="h-4 w-4" /> Save

0 commit comments

Comments
 (0)