refactor: replace link-button component with immich-ui buttons (#15374)

* refactor: replace link-button component with immich-ui buttons

* minor styling tweak

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Jason Rasmussen
2025-01-16 11:03:04 -05:00
committed by GitHub
parent 378bd3c993
commit 3a2bf91889
16 changed files with 385 additions and 383 deletions
@@ -1,7 +1,6 @@
<script lang="ts">
import { goto } from '$app/navigation';
import empty3Url from '$lib/assets/empty-3.svg';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
@@ -9,23 +8,24 @@
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { AppRoute } from '$lib/constants';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { AssetStore } from '$lib/stores/assets.store';
import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
import { handlePromiseError } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { emptyTrash, restoreTrash } from '@immich/sdk';
import { Button, HStack } from '@immich/ui';
import { mdiDeleteForeverOutline, mdiHistory } from '@mdi/js';
import type { PageData } from './$types';
import { handlePromiseError } from '$lib/utils';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { t } from 'svelte-i18n';
import { onDestroy } from 'svelte';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { t } from 'svelte-i18n';
import type { PageData } from './$types';
interface Props {
data: PageData;
@@ -113,20 +113,28 @@
{#if $featureFlags.loaded && $featureFlags.trash}
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
{#snippet buttons()}
<div class="flex place-items-center gap-2">
<LinkButton onclick={handleRestoreTrash} disabled={assetInteraction.selectionActive}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiHistory} size="18" />
{$t('restore_all')}
</div>
</LinkButton>
<LinkButton onclick={() => handleEmptyTrash()} disabled={assetInteraction.selectionActive}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiDeleteForeverOutline} size="18" />
{$t('empty_trash')}
</div>
</LinkButton>
</div>
<HStack gap={0}>
<Button
onclick={handleRestoreTrash}
disabled={assetInteraction.selectionActive}
variant="ghost"
color="secondary"
size="small"
>
<Icon path={mdiHistory} />
{$t('restore_all')}
</Button>
<Button
onclick={() => handleEmptyTrash()}
disabled={assetInteraction.selectionActive}
variant="ghost"
color="secondary"
size="small"
>
<Icon path={mdiDeleteForeverOutline} />
{$t('empty_trash')}
</Button>
</HStack>
{/snippet}
<AssetGrid enableRouting={true} {assetStore} {assetInteraction} onEscape={handleEscape}>