immich/web/src/routes/(user)/explore/+page.svelte

<script lang="ts">
	import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
	import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
	import { AppRoute } from '$lib/constants';
	import { AssetTypeEnum, SearchExploreResponseDto, api } from '@api';
	import ClockOutline from 'svelte-material-icons/ClockOutline.svelte';
	import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
	import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
	import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
	import type { PageData } from './$types';

	export let data: PageData;

	enum Field {
		CITY = 'exifInfo.city',
		TAGS = 'smartInfo.tags',
		OBJECTS = 'smartInfo.objects'
	}

	const MAX_ITEMS = 12;

	const getFieldItems = (items: SearchExploreResponseDto[], field: Field) => {
		const targetField = items.find((item) => item.fieldName === field);
		return targetField?.items || [];
	};

	$: things = getFieldItems(data.items, Field.OBJECTS);
	$: places = getFieldItems(data.items, Field.CITY);
	$: people = data.people.slice(0, MAX_ITEMS);
</script>

<UserPageLayout user={data.user} title={data.meta.title}>
	{#if people.length > 0}
		<div class="mb-6 mt-2">
			<div class="flex justify-between">
				<p class="mb-4 dark:text-immich-dark-fg font-medium">People</p>
				{#if data.people.length > MAX_ITEMS}
					<a
						href={AppRoute.PEOPLE}
						class="font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary dark:text-immich-dark-fg"
						draggable="false">View All</a
					>
				{/if}
			</div>
			<div class="flex flex-row flex-wrap gap-4">
				{#each people as person (person.id)}
					<a href="/people/{person.id}" class="w-24 text-center">
						<ImageThumbnail
							circle
							shadow
							url={api.getPeopleThumbnailUrl(person.id)}
							altText={person.name}
							widthStyle="100%"
						/>
						<p class="font-medium mt-2 text-ellipsis text-sm dark:text-white">{person.name}</p>
					</a>
				{/each}
			</div>
		</div>
	{/if}

	{#if places.length > 0}
		<div class="mb-6 mt-2">
			<div>
				<p class="mb-4 dark:text-immich-dark-fg font-medium">Places</p>
			</div>
			<div class="flex flex-row flex-wrap gap-4">
				{#each places as item}
					<a class="relative" href="/search?{Field.CITY}={item.value}" draggable="false">
						<div
							class="filter brightness-75 rounded-xl overflow-hidden w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] flex justify-center"
						>
							<Thumbnail thumbnailSize={156} asset={item.data} readonly />
						</div>
						<span
							class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
						>
							{item.value}
						</span>
					</a>
				{/each}
			</div>
		</div>
	{/if}

	{#if things.length > 0}
		<div class="mb-6 mt-2">
			<div>
				<p class="mb-4 dark:text-immich-dark-fg font-medium">Things</p>
			</div>
			<div class="flex flex-row flex-wrap gap-4">
				{#each things as item}
					<a class="relative" href="/search?{Field.OBJECTS}={item.value}" draggable="false">
						<div
							class="filter brightness-75 rounded-xl overflow-hidden w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center flex"
						>
							<Thumbnail thumbnailSize={156} asset={item.data} readonly />
						</div>
						<span
							class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
						>
							{item.value}
						</span>
					</a>
				{/each}
			</div>
		</div>
	{/if}

	<hr class="dark:border-immich-dark-gray mb-4" />

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8">
		<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
			<p class="text-sm">YOUR ACTIVITY</p>
			<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
				<a
					href={AppRoute.FAVORITES}
					class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
					draggable="false"
				>
					<HeartMultipleOutline size={24} />
					<span>Favorites</span>
				</a>
				<a
					href="/search?recent=true"
					class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
					draggable="false"
				>
					<ClockOutline size={24} />
					<span>Recently added</span>
				</a>
			</div>
		</div>
		<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
			<p class="text-sm">CATEGORIES</p>
			<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
				<a
					href="/search?type={AssetTypeEnum.Video}"
					class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
				>
					<PlayCircleOutline size={24} />
					<span>Videos</span>
				</a>
				<div>
					<a
						href="/search?motion=true"
						class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
					>
						<MotionPlayOutline size={24} />
						<span>Motion photos</span>
					</a>
				</div>
			</div>
		</div>
	</div>
</UserPageLayout>