alexei.dolgolyov/notify-bridge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 31 Wiki Activity

refactor: replace favorites checkbox with toggle switch in grid layout

Browse Source 
Move "Favorites only" from a separate checkboxes array into the regular
fields grid as a toggle switch, aligning Scheduled Assets and Memory Mode
sections visually. Memory source moved to last position.
This commit is contained in:
Admin
2026-03-24 17:26:02 +03:00
parent b1ab5b884f
commit 1a8c95e942
2 changed files with 56 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/providers/immich.ts
+3 -7
View File
@@ -72,24 +72,20 @@ export const immichDescriptor: ProviderDescriptor = {
{ key: 'scheduled_limit', label: 'trackingConfig.maxAssets', type: 'number', min: 1, max: 100, defaultValue: 10, hint: 'hints.maxAssets' },
{ key: 'scheduled_asset_type', label: 'trackingConfig.assetType', type: 'grid-select', gridItems: 'assetTypeItems', gridColumns: 3, defaultValue: 'all' },
{ key: 'scheduled_min_rating', label: 'trackingConfig.minRating', type: 'number', min: 0, max: 5, defaultValue: 0, hint: 'hints.minRating' },
],
checkboxes: [
{ key: 'scheduled_favorite_only', label: 'trackingConfig.favoritesOnly', default: false, hint: 'hints.favoritesOnly' },
{ key: 'scheduled_favorite_only', label: 'trackingConfig.favoritesOnly', type: 'toggle', defaultValue: false, hint: 'hints.favoritesOnly' },
],
},
{
key: 'memory', legend: 'trackingConfig.memoryMode', legendHint: 'hints.memoryMode',
enabledField: 'memory_enabled', enabledDefault: false,
fields: [
{ key: 'memory_source', label: 'trackingConfig.memorySource', type: 'grid-select', gridItems: 'memorySourceItems', gridColumns: 2, defaultValue: 'albums' },
{ key: 'memory_times', label: 'trackingConfig.times', type: 'number', defaultValue: '09:00' },
{ key: 'memory_collection_mode', label: 'trackingConfig.albumMode', type: 'grid-select', gridItems: 'albumModeItems', gridColumns: 3, defaultValue: 'combined' },
{ key: 'memory_limit', label: 'trackingConfig.maxAssets', type: 'number', min: 1, max: 100, defaultValue: 10 },
{ key: 'memory_asset_type', label: 'trackingConfig.assetType', type: 'grid-select', gridItems: 'assetTypeItems', gridColumns: 3, defaultValue: 'all' },
{ key: 'memory_min_rating', label: 'trackingConfig.minRating', type: 'number', min: 0, max: 5, defaultValue: 0 },
],
checkboxes: [
{ key: 'memory_favorite_only', label: 'trackingConfig.favoritesOnly', default: false, hint: 'hints.favoritesOnly' },
{ key: 'memory_favorite_only', label: 'trackingConfig.favoritesOnly', type: 'toggle', defaultValue: false, hint: 'hints.favoritesOnly' },
{ key: 'memory_source', label: 'trackingConfig.memorySource', type: 'grid-select', gridItems: 'memorySourceItems', gridColumns: 2, defaultValue: 'albums' },
],
},
],
frontend/src/routes/tracking-configs/+page.svelte
+53 -8
View File
@@ -166,7 +166,12 @@
{t(field.label)}
{#if field.hint}<Hint text={t(field.hint)} />{/if}
</label>
{#if field.type === 'grid-select' && field.gridItems}
{#if field.type === 'toggle'}
<label class="toggle-switch">
<input type="checkbox" bind:checked={form[field.key]} />
<span class="toggle-track"></span>
</label>
{:else if field.type === 'grid-select' && field.gridItems}
<IconGridSelect items={gridItemSources[field.gridItems]()} bind:value={form[field.key]} columns={field.gridColumns ?? 2} compact />
{:else}
<input type={field.key.includes('date') ? 'date' : field.key.includes('times') ? 'text' : 'number'}
@@ -176,13 +181,6 @@
{/if}
</div>
{/each}
{#each section.checkboxes ?? [] as cb (cb.key)}
<label class="flex items-center gap-2 text-sm">
<input type="checkbox" bind:checked={form[cb.key]} />
{t(cb.label)}
{#if cb.hint}<Hint text={t(cb.hint)} />{/if}
</label>
{/each}
</div>
{/if}
</fieldset>
@@ -257,3 +255,50 @@
<ConfirmModal open={confirmDelete !== null} message={t('trackingConfig.confirmDelete')}
onconfirm={() => confirmDelete?.onconfirm()} oncancel={() => confirmDelete = null} />
<style>
.toggle-switch {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
height: 1.75rem;
}
.toggle-switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.toggle-track {
position: relative;
width: 2.5rem;
height: 1.375rem;
background: var(--color-border);
border-radius: 9999px;
transition: background 0.2s ease;
}
.toggle-track::after {
content: '';
position: absolute;
top: 0.1875rem;
left: 0.1875rem;
width: 1rem;
height: 1rem;
background: var(--color-foreground);
border-radius: 50%;
transition: transform 0.2s ease;
}
.toggle-switch input:checked + .toggle-track {
background: var(--color-primary);
}
.toggle-switch input:checked + .toggle-track::after {
transform: translateX(1.125rem);
background: var(--color-primary-foreground);
}
</style>