helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: view the user's app version on the user page (#21345)

Browse source 
Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>
This commit is contained in:
aviv926 2025-10-22 01:36:18 +03:00 • committed by GitHub
parent c3a533ab40
commit 032de9ff2f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 301 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

34
web/src/lib/components/user-settings-page/device-card.svelte
View file

@ -18,11 +18,11 @@
import { t } from 'svelte-i18n';
interface Props {
device: SessionResponseDto;
session: SessionResponseDto;
onDelete?: (() => void) | undefined;
}
let { device, onDelete = undefined }: Props = $props();
const { session, onDelete = undefined }: Props = $props();
const options: ToRelativeCalendarOptions = {
unit: 'days',
@ -32,21 +32,21 @@
<div class="flex w-full flex-row">
<div class="hidden items-center justify-center pe-2 text-primary sm:flex">
{#if device.deviceOS === 'Android'}
{#if session.deviceOS === 'Android'}
<Icon icon={mdiAndroid} size="40" />
{:else if device.deviceOS === 'iOS' || device.deviceOS === 'macOS'}
{:else if session.deviceOS === 'iOS' || session.deviceOS === 'macOS'}
<Icon icon={mdiApple} size="40" />
{:else if device.deviceOS.includes('Safari')}
{:else if session.deviceOS.includes('Safari')}
<Icon icon={mdiAppleSafari} size="40" />
{:else if device.deviceOS.includes('Windows')}
{:else if session.deviceOS.includes('Windows')}
<Icon icon={mdiMicrosoftWindows} size="40" />
{:else if device.deviceOS === 'Linux'}
{:else if session.deviceOS === 'Linux'}
<Icon icon={mdiLinux} size="40" />
{:else if device.deviceOS === 'Ubuntu'}
{:else if session.deviceOS === 'Ubuntu'}
<Icon icon={mdiUbuntu} size="40" />
{:else if device.deviceOS === 'Chrome OS' || device.deviceType === 'Chrome' || device.deviceType === 'Chromium' || device.deviceType === 'Mobile Chrome'}
{:else if session.deviceOS === 'Chrome OS' || session.deviceType === 'Chrome' || session.deviceType === 'Chromium' || session.deviceType === 'Mobile Chrome'}
<Icon icon={mdiGoogleChrome} size="40" />
{:else if device.deviceOS === 'Google Cast'}
{:else if session.deviceOS === 'Google Cast'}
<Icon icon={mdiCast} size="40" />
{:else}
<Icon icon={mdiHelp} size="40" />
@ -55,24 +55,28 @@
<div class="flex grow flex-row justify-between gap-1 ps-4 sm:ps-0">
<div class="flex flex-col justify-center gap-1 dark:text-white">
<span class="text-sm">
{#if device.deviceType || device.deviceOS}
<span>{device.deviceOS || $t('unknown')} • {device.deviceType || $t('unknown')}</span>
{#if session.deviceType || session.deviceOS}
<span
>{session.deviceOS || $t('unknown')} • {session.deviceType || $t('unknown')}{session.appVersion
? `(v${session.appVersion})`
: ''}</span
>
{:else}
<span>{$t('unknown')}</span>
{/if}
</span>
<div class="text-sm">
<span class="">{$t('last_seen')}</span>
<span>{DateTime.fromISO(device.updatedAt, { locale: $locale }).toRelativeCalendar(options)}</span>
<span>{DateTime.fromISO(session.updatedAt, { locale: $locale }).toRelativeCalendar(options)}</span>
<span class="text-xs text-gray-500 dark:text-gray-400"> - </span>
<span class="text-xs text-gray-500 dark:text-gray-400">
{DateTime.fromISO(device.updatedAt, { locale: $locale }).toLocaleString(DateTime.DATETIME_MED, {
{DateTime.fromISO(session.updatedAt, { locale: $locale }).toLocaleString(DateTime.DATETIME_MED, {
locale: $locale,
})}
</span>
</div>
</div>
{#if !device.current && onDelete}
{#if !session.current && onDelete}
<div>
<IconButton
color="danger"

16
web/src/lib/components/user-settings-page/device-list.svelte
View file

@ -14,8 +14,8 @@
const refresh = () => getSessions().then((_devices) => (devices = _devices));
let currentDevice = $derived(devices.find((device) => device.current));
let otherDevices = $derived(devices.filter((device) => !device.current));
let currentSession = $derived(devices.find((device) => device.current));
let otherSessions = $derived(devices.filter((device) => !device.current));
const handleDelete = async (device: SessionResponseDto) => {
const isConfirmed = await modalManager.showDialog({ prompt: $t('logout_this_device_confirmation') });
@ -54,22 +54,22 @@
</script>
<section class="my-4">
{#if currentDevice}
{#if currentSession}
<div class="mb-6">
<h3 class="uppercase mb-2 text-xs font-medium text-primary">
{$t('current_device')}
</h3>
<DeviceCard device={currentDevice} />
<DeviceCard session={currentSession} />
</div>
{/if}
{#if otherDevices.length > 0}
{#if otherSessions.length > 0}
<div class="mb-6">
<h3 class="uppercase mb-2 text-xs font-medium text-primary">
{$t('other_devices')}
</h3>
{#each otherDevices as device, index (device.id)}
<DeviceCard {device} onDelete={() => handleDelete(device)} />
{#if index !== otherDevices.length - 1}
{#each otherSessions as session, index (session.id)}
<DeviceCard {session} onDelete={() => handleDelete(session)} />
{#if index !== otherSessions.length - 1}
<hr class="my-3" />
{/if}
{/each}