Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-06-01 04:36:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): small responsivness improvements regarding mobile use (#2255)

Browse Source 
* make sidebar load more fluid
use css before js kicks in
added xs breakpoint in tailwind config

* fix sidebar hr still showing if opened

* make share tab not overflow on mobile

* make user management tab responsive

* make jobs panel responsive

* fix format in tailwind config

* fix full width on large screens
use md breakpoint for w-[800px]

* show accessible name for all screens

* replace grid with flex-col

* replace all xs with sm

* remove isCollapsed completly
using only tailwinds group feature and sm and md breakpoints

* remove leftovers of isCollapsed
and make the settings content less stretched

* remove isCollapsed in layout and side-bar

* fix code style

---------

Co-authored-by: faupau03 <paul.paffe@gmx.net>
Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
faupau 2023-04-17 18:18:49 +02:00 committed by GitHub
parent 1e32a5fffd
commit b970a40b4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 128 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/admin-page/jobs/job-tile-button.svelte
View File

@ -12,7 +12,7 @@
</script> </script>
<button <button
class="h-full flex gap-2 flex-col place-items-center place-content-center px-8 text-gray-600 transition-colors hover:bg-immich-primary hover:text-white dark:text-gray-200 dark:hover:bg-immich-dark-primary text-xs dark:hover:text-black {colorClasses[ class="h-full w-full py-2 flex gap-2 flex-col place-items-center place-content-center px-8 text-gray-600 transition-colors hover:bg-immich-primary hover:text-white dark:text-gray-200 dark:hover:bg-immich-dark-primary text-xs dark:hover:text-black {colorClasses[
color color
]}" ]}"
on:click on:click

6
web/src/lib/components/admin-page/jobs/job-tile.svelte
View File

@ -24,7 +24,9 @@
const dispatch = createEventDispatcher<{ command: JobCommandDto }>(); const dispatch = createEventDispatcher<{ command: JobCommandDto }>();
</script> </script>
<div class="flex bg-gray-100 dark:bg-immich-dark-gray rounded-3xl overflow-hidden"> <div
class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-3xl overflow-hidden"
>
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
{#if queueStatus.isPaused} {#if queueStatus.isPaused}
<JobTileStatus color="warning">Paused</JobTileStatus> <JobTileStatus color="warning">Paused</JobTileStatus>
@ -78,7 +80,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-col w-32 overflow-hidden"> <div class="flex sm:flex-col flex-row sm:w-32 w-full overflow-hidden">
{#if !isIdle} {#if !isIdle}
{#if waitingCount > 0} {#if waitingCount > 0}
<JobTileButton <JobTileButton

9
web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
View File

@ -7,7 +7,6 @@
export let title: string; export let title: string;
export let logo: typeof Icon; export let logo: typeof Icon;
export let isSelected: boolean; export let isSelected: boolean;
export let isCollapsed: boolean;
let showMoreInformation = false; let showMoreInformation = false;
@ -22,18 +21,18 @@
{isSelected {isSelected
? 'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-[#adcbfa] hover:bg-immich-primary/25' ? 'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-[#adcbfa] hover:bg-immich-primary/25'
: ''} : ''}
{isCollapsed ? 'pl-5' : 'px-5'} pl-5 group-hover:sm:px-5 md:px-5
" "
> >
<div class="flex gap-4 place-items-center w-full overflow-hidden"> <div class="flex gap-4 place-items-center w-full overflow-hidden truncate">
<svelte:component this={logo} size="1.5em" class="shrink-0" /> <svelte:component this={logo} size="1.5em" class="shrink-0" />
<p class="font-medium text-sm">{title}</p> <p class="font-medium text-sm">{title}</p>
</div> </div>
<div <div
class="transition-[height] duration-100 delay-200 {isCollapsed ? 'height-0' : 'height-auto'}" class="transition-[height] group-hover:sm:overflow-visible md:overflow-visible overflow-hidden duration-100 delay-1000 sm:group-hover:h-auto md:h-auto h-0"
> >
{#if $$slots.moreInformation && !isCollapsed} {#if $$slots.moreInformation}
<div <div
class="relative flex justify-center select-none cursor-default" class="relative flex justify-center select-none cursor-default"
on:mouseenter={() => (showMoreInformation = true)} on:mouseenter={() => (showMoreInformation = true)}

25
web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
View File

@ -1,32 +1,9 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte';
export let isCollapsed = true;
let innerWidth: number;
const handleResize = () => {
if (innerWidth > 768) {
isCollapsed = false;
} else {
isCollapsed = true;
}
};
onMount(() => {
handleResize();
});
</script> </script>
<svelte:window on:resize={handleResize} bind:innerWidth />
<section <section
id="sidebar" id="sidebar"
on:mouseover={() => (innerWidth >= 430 ? (isCollapsed = false) : null)} class="group flex flex-col gap-1 pt-8 bg-immich-bg dark:bg-immich-dark-bg transition-all duration-200 z-10 w-[72px] md:w-64 hover:sm:pr-6 md:pr-6 hover:sm:w-64 hover:sm:shadow-2xl hover:md:shadow-none hover:md:border-none hover:sm:border-r hover:sm:dark:border-r-immich-dark-gray"
on:focus={() => (innerWidth >= 430 ? (isCollapsed = false) : null)}
on:mouseleave={() => handleResize()}
class="flex flex-col gap-1 pt-8 bg-immich-bg dark:bg-immich-dark-bg transition-[width] duration-200 z-10 {isCollapsed
? 'w-[72px]'
: 'pr-6 w-64 shadow-2xl md:shadow-none md:border-none border-r dark:border-r-immich-dark-gray'}"
> >
<slot /> <slot />
</section> </section>

20
web/src/lib/components/shared-components/side-bar/side-bar.svelte
View File

@ -14,8 +14,6 @@
import { locale } from '$lib/stores/preferences.store'; import { locale } from '$lib/stores/preferences.store';
import SideBarSection from './side-bar-section.svelte'; import SideBarSection from './side-bar-section.svelte';
let isCollapsed: boolean;
const getAssetCount = async () => { const getAssetCount = async () => {
const { data: allAssetCount } = await api.assetApi.getAssetCountByUserId(); const { data: allAssetCount } = await api.assetApi.getAssetCountByUserId();
const { data: archivedCount } = await api.assetApi.getArchivedAssetCountByUserId(); const { data: archivedCount } = await api.assetApi.getArchivedAssetCountByUserId();
@ -74,7 +72,7 @@
}; };
</script> </script>
<SideBarSection bind:isCollapsed> <SideBarSection>
<a <a
data-sveltekit-preload-data="hover" data-sveltekit-preload-data="hover"
data-sveltekit-noscroll data-sveltekit-noscroll
@ -85,7 +83,6 @@
title="Photos" title="Photos"
logo={ImageOutline} logo={ImageOutline}
isSelected={$page.route.id === '/(user)/photos'} isSelected={$page.route.id === '/(user)/photos'}
{isCollapsed}
> >
<svelte:fragment slot="moreInformation"> <svelte:fragment slot="moreInformation">
{#await getAssetCount()} {#await getAssetCount()}
@ -109,7 +106,6 @@
title="Explore" title="Explore"
logo={Magnify} logo={Magnify}
isSelected={$page.route.id === '/(user)/explore'} isSelected={$page.route.id === '/(user)/explore'}
{isCollapsed}
/> />
</a> </a>
<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false"> <a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
@ -117,7 +113,6 @@
title="Sharing" title="Sharing"
logo={AccountMultipleOutline} logo={AccountMultipleOutline}
isSelected={$page.route.id === '/(user)/sharing'} isSelected={$page.route.id === '/(user)/sharing'}
{isCollapsed}
> >
<svelte:fragment slot="moreInformation"> <svelte:fragment slot="moreInformation">
{#await getAlbumCount()} {#await getAlbumCount()}
@ -131,18 +126,15 @@
</SideBarButton> </SideBarButton>
</a> </a>
<div <div class="text-xs dark:text-immich-dark-fg transition-all duration-200">
class="text-xs md:pb-2 md:p-5 p-6 pb-[1.2rem] dark:text-immich-dark-fg transition-all duration-200" <p class="p-6 hidden md:block group-hover:sm:block">LIBRARY</p>
> <hr class="mt-8 mb-[31px] mx-4 block md:hidden group-hover:sm:hidden" />
<p class={isCollapsed ? 'hidden' : 'block'}>LIBRARY</p>
<hr class={isCollapsed ? 'block mt-2 mb-[0.45rem]' : 'hidden'} />
</div> </div>
<a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false"> <a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
<SideBarButton <SideBarButton
title="Favorites" title="Favorites"
logo={StarOutline} logo={StarOutline}
isSelected={$page.route.id == '/(user)/favorites'} isSelected={$page.route.id == '/(user)/favorites'}
{isCollapsed}
> >
<svelte:fragment slot="moreInformation"> <svelte:fragment slot="moreInformation">
{#await getFavoriteCount()} {#await getFavoriteCount()}
@ -160,7 +152,6 @@
title="Albums" title="Albums"
logo={ImageAlbum} logo={ImageAlbum}
isSelected={$page.route.id === '/(user)/albums'} isSelected={$page.route.id === '/(user)/albums'}
{isCollapsed}
> >
<svelte:fragment slot="moreInformation"> <svelte:fragment slot="moreInformation">
{#await getAlbumCount()} {#await getAlbumCount()}
@ -178,7 +169,6 @@
title="Archive" title="Archive"
logo={ArchiveArrowDownOutline} logo={ArchiveArrowDownOutline}
isSelected={$page.route.id === '/(user)/archive'} isSelected={$page.route.id === '/(user)/archive'}
{isCollapsed}
> >
<svelte:fragment slot="moreInformation"> <svelte:fragment slot="moreInformation">
{#await getArchivedAssetsCount()} {#await getArchivedAssetsCount()}
@ -195,6 +185,6 @@
<!-- Status Box --> <!-- Status Box -->
<div class="mb-6 mt-auto"> <div class="mb-6 mt-auto">
<StatusBox {isCollapsed} /> <StatusBox />
</div> </div>
</SideBarSection> </SideBarSection>

84
web/src/lib/components/shared-components/status-box.svelte
View File

@ -12,8 +12,6 @@
let serverInfo: ServerInfoResponseDto; let serverInfo: ServerInfoResponseDto;
let pingServerInterval: NodeJS.Timer; let pingServerInterval: NodeJS.Timer;
export let isCollapsed: boolean;
onMount(async () => { onMount(async () => {
try { try {
const { data: version } = await api.serverInfoApi.getServerVersion(); const { data: version } = await api.serverInfoApi.getServerVersion();
@ -54,32 +52,28 @@
<div class="dark:text-immich-dark-fg"> <div class="dark:text-immich-dark-fg">
<div class="storage-status grid grid-cols-[64px_auto]"> <div class="storage-status grid grid-cols-[64px_auto]">
<div <div
class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary {isCollapsed class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary pb-[2.15rem] group-hover:sm:pb-0 md:pb-0"
? 'pb-[2.15rem]'
: ''}"
> >
<Cloud size={'24'} /> <Cloud size={'24'} />
</div> </div>
<div> <div class="hidden md:block group-hover:sm:block">
{#if !isCollapsed} <p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Storage</p>
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Storage</p> {#if serverInfo}
{#if serverInfo} <div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2">
<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2"> <!-- style={`width: ${$downloadAssets[fileName]}%`} -->
<!-- style={`width: ${$downloadAssets[fileName]}%`} --> <div
<div class="bg-immich-primary dark:bg-immich-dark-primary h-[7px] rounded-full"
class="bg-immich-primary dark:bg-immich-dark-primary h-[7px] rounded-full" style="width: {getStorageUsagePercentage()}%"
style="width: {getStorageUsagePercentage()}%" />
/> </div>
</div> <p class="text-xs">
<p class="text-xs"> {asByteUnitString(serverInfo?.diskUseRaw, $locale)} of
{asByteUnitString(serverInfo?.diskUseRaw, $locale)} of {asByteUnitString(serverInfo?.diskSizeRaw, $locale)} used
{asByteUnitString(serverInfo?.diskSizeRaw, $locale)} used </p>
</p> {:else}
{:else} <div class="mt-2">
<div class="mt-2"> <LoadingSpinner />
<LoadingSpinner /> </div>
</div>
{/if}
{/if} {/if}
</div> </div>
</div> </div>
@ -88,34 +82,30 @@
</div> </div>
<div class="server-status grid grid-cols-[64px_auto]"> <div class="server-status grid grid-cols-[64px_auto]">
<div <div
class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary {isCollapsed class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary pb-11 md:pb-0 group-hover:sm:pb-0"
? 'pb-11'
: ''}"
> >
<Dns size={'24'} /> <Dns size={'24'} />
</div> </div>
{#if !isCollapsed} <div class="text-xs hidden md:block group-hover:sm:block">
<div class="text-xs "> <p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Server</p>
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Server</p>
<div class="flex justify-items-center justify-between mt-2 "> <div class="flex justify-items-center justify-between mt-2 ">
<p>Status</p> <p>Status</p>
{#if isServerOk} {#if isServerOk}
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">Online</p> <p class="font-medium text-immich-primary dark:text-immich-dark-primary">Online</p>
{:else} {:else}
<p class="font-medium text-red-500">Offline</p> <p class="font-medium text-red-500">Offline</p>
{/if} {/if}
</div>
<div class="flex justify-items-center justify-between mt-2 ">
<p>Version</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
{serverVersion}
</p>
</div>
</div> </div>
{/if}
<div class="flex justify-items-center justify-between mt-2 ">
<p>Version</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
{serverVersion}
</p>
</div>
</div>
</div> </div>
<!-- <div> <!-- <div>
<hr class="ml-5 my-4" /> <hr class="ml-5 my-4" />

2
web/src/lib/components/sharing-page/shared-album-list-tile.svelte
View File

@ -32,7 +32,7 @@
</script> </script>
<div <div
class="grid grid-cols-[75px_1fr] w-[550px] border-b border-gray-300 dark:border-immich-dark-gray place-items-center py-4 gap-6 transition-all hover:border-immich-primary dark:hover:border-immich-dark-primary" class="grid grid-cols-[75px_1fr] w-full md:w-[500px] border-b border-gray-300 dark:border-immich-dark-gray place-items-center py-4 gap-6 transition-all hover:border-immich-primary dark:hover:border-immich-dark-primary"
> >
<div> <div>
{#await loadImageData(album.albumThumbnailAssetId)} {#await loadImageData(album.albumThumbnailAssetId)}

18
web/src/routes/(user)/sharing/+page.svelte
View File

@ -36,25 +36,25 @@
<UserPageLayout user={data.user} title={data.meta.title}> <UserPageLayout user={data.user} title={data.meta.title}>
<div class="flex" slot="buttons"> <div class="flex" slot="buttons">
<LinkButton on:click={createSharedAlbum}> <LinkButton on:click={createSharedAlbum}>
<div class="flex place-items-center gap-1 text-sm"> <div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
<PlusBoxOutline size="18" /> <PlusBoxOutline size="18" class="shrink-0" />
Create shared album <span class="max-sm:text-xs leading-none">Create shared album</span>
</div> </div>
</LinkButton> </LinkButton>
<LinkButton on:click={() => goto('/sharing/sharedlinks')}> <LinkButton on:click={() => goto('/sharing/sharedlinks')}>
<div class="flex place-items-center gap-1 text-sm"> <div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
<Link size="18" /> <Link size="18" class="shrink-0" />
Shared links <span class="max-sm:text-xs leading-none">Shared links</span>
</div> </div>
</LinkButton> </LinkButton>
</div> </div>
<section> <section>
<!-- Share Album List --> <!-- Share Album List -->
<div class="w-full flex flex-col place-items-center"> <div class="md:w-full flex flex-col place-items-center">
{#each data.sharedAlbums as album} {#each data.sharedAlbums as album}
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}> <a class="max-md:w-full" data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
<SharedAlbumListTile {album} user={data.user} /> <SharedAlbumListTile {album} user={data.user} />
</a> </a>
{/each} {/each}
@ -63,7 +63,7 @@
<!-- Empty List --> <!-- Empty List -->
{#if data.sharedAlbums.length === 0} {#if data.sharedAlbums.length === 0}
<div <div
class="border dark:border-immich-dark-gray p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center dark:text-immich-dark-fg" class="border dark:border-immich-dark-gray p-5 md:w-[500px] w-2/3 m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center dark:text-immich-dark-fg"
> >
<img src={empty2Url} alt="Empty shared album" width="500" draggable="false" /> <img src={empty2Url} alt="Empty shared album" width="500" draggable="false" />
<p class="text-center text-immich-text-gray-500"> <p class="text-center text-immich-text-gray-500">

13
web/src/routes/admin/+layout.svelte
View File

@ -18,7 +18,6 @@
import type { LayoutData } from './$types'; import type { LayoutData } from './$types';
import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte'; import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
let isCollapsed: boolean;
export let data: LayoutData; export let data: LayoutData;
// Circumvents the need to import the page store. Should be replaced by // Circumvents the need to import the page store. Should be replaced by
@ -43,37 +42,33 @@
<main> <main>
<section class="grid md:grid-cols-[250px_auto] grid-cols-[70px_auto] pt-[72px] h-screen"> <section class="grid md:grid-cols-[250px_auto] grid-cols-[70px_auto] pt-[72px] h-screen">
<SideBarSection bind:isCollapsed> <SideBarSection>
<SideBarButton <SideBarButton
title="Users" title="Users"
logo={AccountMultipleOutline} logo={AccountMultipleOutline}
isSelected={data.routeId === AppRoute.ADMIN_USER_MANAGEMENT} isSelected={data.routeId === AppRoute.ADMIN_USER_MANAGEMENT}
on:selected={() => goto(AppRoute.ADMIN_USER_MANAGEMENT)} on:selected={() => goto(AppRoute.ADMIN_USER_MANAGEMENT)}
{isCollapsed}
/> />
<SideBarButton <SideBarButton
title="Jobs" title="Jobs"
logo={Sync} logo={Sync}
isSelected={data.routeId === AppRoute.ADMIN_JOBS} isSelected={data.routeId === AppRoute.ADMIN_JOBS}
on:selected={() => goto(AppRoute.ADMIN_JOBS)} on:selected={() => goto(AppRoute.ADMIN_JOBS)}
{isCollapsed}
/> />
<SideBarButton <SideBarButton
title="Settings" title="Settings"
logo={Cog} logo={Cog}
isSelected={data.routeId === AppRoute.ADMIN_SETTINGS} isSelected={data.routeId === AppRoute.ADMIN_SETTINGS}
on:selected={() => goto(AppRoute.ADMIN_SETTINGS)} on:selected={() => goto(AppRoute.ADMIN_SETTINGS)}
{isCollapsed}
/> />
<SideBarButton <SideBarButton
title="Server Stats" title="Server Stats"
logo={Server} logo={Server}
isSelected={data.routeId === AppRoute.ADMIN_STATS} isSelected={data.routeId === AppRoute.ADMIN_STATS}
on:selected={() => goto(AppRoute.ADMIN_STATS)} on:selected={() => goto(AppRoute.ADMIN_STATS)}
{isCollapsed}
/> />
<div class="mb-6 mt-auto"> <div class="mb-6 mt-auto">
<StatusBox {isCollapsed} /> <StatusBox />
</div> </div>
</SideBarSection> </SideBarSection>
@ -85,8 +80,8 @@
<hr class="dark:border-immich-dark-gray" /> <hr class="dark:border-immich-dark-gray" />
</div> </div>
<section id="setting-content" class="flex place-content-center mx-2"> <section id="setting-content" class="flex place-content-center mx-4">
<section class="w-[800px] pt-5 pb-28"> <section class="w-full sm:w-5/6 md:w-[800px] pt-5 pb-28">
<slot /> <slot />
</section> </section>
</section> </section>

63
web/src/routes/admin/user-management/+page.svelte
View File

@ -159,7 +159,7 @@
</FullScreenModal> </FullScreenModal>
{/if} {/if}
<table class="text-left w-full my-5"> <table class="text-left w-full my-5 sm:block hidden">
<thead <thead
class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray" class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray"
> >
@ -218,5 +218,66 @@
</tbody> </tbody>
</table> </table>
<table class="text-left w-full my-5 block sm:hidden">
<thead
class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary w-full h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray"
>
<tr class="flex w-full place-items-center">
<th class="text-center w-1/2 font-medium text-sm flex justify-around">
<span>Name</span>
<span>Email</span>
</th>
<th class="text-center w-1/2 font-medium text-sm">Action</th>
</tr>
</thead>
<tbody
class="overflow-y-auto rounded-md w-full max-h-[320px] block border dark:border-immich-dark-gray"
>
{#if allUsers}
{#each allUsers as user, i}
<tr
class={`text-center flex place-items-center w-full h-[80px] dark:text-immich-dark-fg ${
isDeleted(user)
? 'bg-red-300 dark:bg-red-900'
: i % 2 == 0
? 'bg-immich-gray dark:bg-immich-dark-gray/75'
: 'bg-immich-bg dark:bg-immich-dark-gray/50'
}`}
>
<td class="text-sm px-4 w-2/3 text-ellipsis">
<span>{user.firstName} {user.lastName}</span>
<span>{user.email}</span>
</td>
<td class="text-sm px-4 w-1/3 text-ellipsis">
{#if !isDeleted(user)}
<button
on:click={() => editUserHandler(user)}
class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full sm:p-3 p-2 max-sm:mb-1 transition-all duration-150 hover:bg-immich-primary/75"
>
<PencilOutline size="16" />
</button>
<button
on:click={() => deleteUserHandler(user)}
class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full sm:p-3 p-2 transition-all duration-150 hover:bg-immich-primary/75"
>
<TrashCanOutline size="16" />
</button>
{/if}
{#if isDeleted(user)}
<button
on:click={() => restoreUserHandler(user)}
class="bg-immich-primary dark:bg-immich-dark-primary text-gray-100 dark:text-gray-700 rounded-full sm:p-3 p-2 transition-all duration-150 hover:bg-immich-primary/75"
title={`scheduled removal on ${getDeleteDate(user)}`}
>
<DeleteRestore size="16" />
</button>
{/if}
</td>
</tr>
{/each}
{/if}
</tbody>
</table>
<Button size="sm" on:click={() => (shouldShowCreateUserForm = true)}>Create user</Button> <Button size="sm" on:click={() => (shouldShowCreateUserForm = true)}>Create user</Button>
</section> </section>