diff --git a/web/src/lib/components/album-page/albums-controls.svelte b/web/src/lib/components/album-page/albums-controls.svelte index 793c2b4970..ae8178a805 100644 --- a/web/src/lib/components/album-page/albums-controls.svelte +++ b/web/src/lib/components/album-page/albums-controls.svelte @@ -129,6 +129,7 @@ <!-- Filter Albums by Sharing Status (All, Owned, Shared) --> <div class="hidden xl:block h-10"> <GroupTab + label={$t('show_albums')} filters={Object.values(albumFilterNames)} selected={selectedFilterOption} onSelect={(selected) => handleChangeAlbumFilter(selected, AlbumFilter.All)} diff --git a/web/src/lib/components/elements/group-tab.svelte b/web/src/lib/components/elements/group-tab.svelte index c2bc835295..f5e2f79350 100644 --- a/web/src/lib/components/elements/group-tab.svelte +++ b/web/src/lib/components/elements/group-tab.svelte @@ -1,22 +1,35 @@ <script lang="ts"> + import { generateId } from '$lib/utils/generate-id'; + export let filters: string[]; export let selected: string; + export let label: string; export let onSelect: (selected: string) => void; + + const id = `group-tab-${generateId()}`; </script> -<div class="flex bg-gray-200 dark:bg-immich-dark-gray rounded-2xl h-full"> +<fieldset + class="dark:bg-immich-dark-gray flex h-full rounded-2xl bg-gray-200 ring-gray-400 has-[:focus-visible]:ring dark:ring-gray-600" +> + <legend class="sr-only">{label}</legend> {#each filters as filter, index} - <button - type="button" - class="text-sm px-4 {filter === selected - ? 'dark:bg-gray-700 bg-gray-300' - : 'dark:hover:bg-gray-800 hover:bg-gray-300'} {index === 0 ? 'rounded-l-2xl' : ''} {index === - filters.length - 1 - ? 'rounded-r-2xl' - : ''}" - on:click={() => onSelect(filter)} - > - {filter} - </button> + <div class="group"> + <input + type="radio" + name={id} + id="{id}-{index}" + class="peer sr-only" + value={filter} + checked={filter === selected} + on:change={() => onSelect(filter)} + /> + <label + for="{id}-{index}" + class="flex h-full cursor-pointer items-center px-4 text-sm hover:bg-gray-300 group-first-of-type:rounded-s-2xl group-last-of-type:rounded-e-2xl peer-checked:bg-gray-300 dark:hover:bg-gray-800 peer-checked:dark:bg-gray-700" + > + {filter} + </label> + </div> {/each} -</div> +</fieldset> diff --git a/web/src/lib/i18n/en.json b/web/src/lib/i18n/en.json index 172b1b5d05..807a192013 100644 --- a/web/src/lib/i18n/en.json +++ b/web/src/lib/i18n/en.json @@ -1084,6 +1084,7 @@ "sharing_sidebar_description": "Display a link to Sharing in the sidebar", "shift_to_permanent_delete": "press ⇧ to permanently delete asset", "show_album_options": "Show album options", + "show_albums": "Show albums", "show_all_people": "Show all people", "show_and_hide_people": "Show & hide people", "show_file_location": "Show file location", diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte index b4b1f5ee1a..35402ce331 100644 --- a/web/src/routes/(user)/albums/+page.svelte +++ b/web/src/routes/(user)/albums/+page.svelte @@ -24,6 +24,7 @@ <div class="xl:hidden"> <div class="w-fit h-14 dark:text-immich-dark-fg py-2"> <GroupTab + label={$t('show_albums')} filters={Object.keys(AlbumFilter)} selected={$albumViewSettings.filter} onSelect={(selected) => ($albumViewSettings.filter = selected)}