More responsive web frontend (#2245)

* collapsable menu in web, more mobile friendly

* finished sidebar collapsing

* make navigation bar more responsive

* make search bar and admin button more responsive

* fix administration small button coloring

* fix upload button over opened search bar

* open search directly on small devices

* make admin sidebar more responsive

* add small edge to admin content

* server stats more responsive

* fix eslint errors

* server stats flex wrap

* Delete .env

* Revert change in hooks.server.ts

* Revert change in vite.config.js

* little clean up, replace {``} with ""

* remove package-lock.json in root folder

* revert upload button to linkbutton

* show extended sidebar also on focus

* combine changes in side-bar.svelte and
+layout.svelte to side-bar-section

* fix navigation-bar cog color in light theme

---------

Co-authored-by: Paul Paffe <paul.paffe@gmx.net>

web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte

@@ -14,6 +14,14 @@
 		usageByUser: []
 	};
 
+	$: zeros = (value: number) => {
+		const maxLength = 13;
+		const valueLength = value.toString().length;
+		const zeroLength = maxLength - valueLength;
+
+		return '0'.repeat(zeroLength);
+	};
+
 	$: [statsUsage, statsUsageUnit] = getBytesWithUnit(stats.usage, 0);
 </script>
 
@@ -21,11 +29,62 @@
 	<div>
 		<p class="text-sm dark:text-immich-dark-fg">TOTAL USAGE</p>
 
-		<div class="flex mt-5 justify-between">
+		<div class="mt-5 justify-between lg:flex hidden">
 			<StatsCard logo={CameraIris} title="PHOTOS" value={stats.photos} />
 			<StatsCard logo={PlayCircle} title="VIDEOS" value={stats.videos} />
 			<StatsCard logo={Memory} title="STORAGE" value={statsUsage} unit={statsUsageUnit} />
 		</div>
+		<div class="mt-5 lg:hidden flex">
+			<div
+				class="bg-immich-gray dark:bg-immich-dark-gray rounded-3xl p-5 flex flex-col justify-between"
+			>
+				<div class="flex flex-wrap gap-x-12">
+					<div
+						class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary"
+					>
+						<CameraIris size="25" />
+						<p>PHOTOS</p>
+					</div>
+
+					<div class="relative text-center font-mono font-semibold text-2xl">
+						<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.photos)}</span><span
+							class="text-immich-primary dark:text-immich-dark-primary">{stats.photos}</span
+						>
+					</div>
+				</div>
+				<div class="flex flex-wrap gap-x-12">
+					<div
+						class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary"
+					>
+						<PlayCircle size="25" />
+						<p>VIDEOS</p>
+					</div>
+
+					<div class="relative text-center font-mono font-semibold text-2xl">
+						<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.videos)}</span><span
+							class="text-immich-primary dark:text-immich-dark-primary">{stats.videos}</span
+						>
+					</div>
+				</div>
+				<div class="flex flex-wrap gap-x-7">
+					<div
+						class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary"
+					>
+						<Memory size="25" />
+						<p>STORAGE</p>
+					</div>
+
+					<div class="relative text-center font-mono font-semibold text-2xl flex">
+						<span class="text-[#DCDADA] dark:text-[#525252]">{zeros(statsUsage)}</span><span
+							class="text-immich-primary dark:text-immich-dark-primary">{statsUsage}</span
+						>
+						<span class="text-center my-auto ml-2 text-base font-light text-gray-400"
+							>{statsUsageUnit}</span
+						>
+					</div>
+				</div>
+			</div>
+		</div>
 	</div>
 
 	<div>

web/src/lib/components/layouts/user-page-layout.svelte

@@ -23,7 +23,7 @@
 </header>
 
 <main
-	class="grid grid-cols-[250px_auto] relative pt-[4.25rem] h-screen bg-immich-bg dark:bg-immich-dark-bg immich-scrollbar"
+	class="grid md:grid-cols-[250px_auto] grid-cols-[70px_auto] relative pt-[4.25rem] h-screen bg-immich-bg dark:bg-immich-dark-bg immich-scrollbar"
 >
 	<SideBar />
 

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -11,6 +11,9 @@
 	import ImmichLogo from '../immich-logo.svelte';
 	import SearchBar from '../search-bar/search-bar.svelte';
 	import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+	import Magnify from 'svelte-material-icons/Magnify.svelte';
+	import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
+	import Cog from 'svelte-material-icons/Cog.svelte';
 	export let user: UserResponseDto;
 	export let shouldShowUploadButton = true;
 
@@ -41,24 +44,34 @@
 
 <section id="dashboard-navbar" class="fixed h-[4.25rem] w-screen z-[900] text-sm">
 	<div
-		class="grid grid-cols-[250px_auto] border-b dark:border-b-immich-dark-gray items-center py-2 bg-immich-bg dark:bg-immich-dark-bg"
+		class="grid md:grid-cols-[250px_auto] grid-cols-[70px_auto] border-b dark:border-b-immich-dark-gray items-center py-2 bg-immich-bg dark:bg-immich-dark-bg"
 	>
 		<a
 			data-sveltekit-preload-data="hover"
-			class="flex gap-2 mx-6 place-items-center"
+			class="flex gap-2 md:mx-6 mx-4 place-items-center"
 			href={AppRoute.PHOTOS}
 		>
 			<ImmichLogo height="35" width="35" />
-			<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">
+			<h1
+				class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary md:block hidden"
+			>
 				IMMICH
 			</h1>
 		</a>
 		<div class="flex justify-between gap-16 pr-6">
-			<div class="w-full max-w-5xl flex-1 pl-4">
+			<div class="w-full max-w-5xl flex-1 pl-4 sm:block hidden">
 				<SearchBar grayTheme={true} />
 			</div>
 
-			<section class="flex gap-4 place-items-center">
+			<section class="flex gap-4 place-items-center justify-end max-sm:w-full">
+				<a href={AppRoute.SEARCH} id="search-button" class="sm:hidden pl-4">
+					<IconButton title="Search">
+						<div class="flex gap-2">
+							<Magnify size="1.5em" />
+						</div>
+					</IconButton>
+				</a>
+
 				<ThemeButton />
 
 				{#if !$page.url.pathname.includes('/admin') && shouldShowUploadButton}
@@ -66,7 +79,7 @@
 						<LinkButton on:click={() => dispatch('uploadClicked')}>
 							<div class="flex gap-2">
 								<TrayArrowUp size="20" />
-								<span>Upload</span>
+								<span class="md:block hidden">Upload</span>
 							</div>
 						</LinkButton>
 					</div>
@@ -74,15 +87,32 @@
 
 				{#if user.isAdmin}
 					<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT}>
-						<LinkButton>
+						<div class="sm:block hidden">
-							<span
+							<LinkButton>
+								<span
+									class={$page.url.pathname.includes('/admin')
+										? 'text-immich-primary dark:text-immich-dark-primary underline item'
+										: ''}
+								>
+									Administration
+								</span>
+							</LinkButton>
+						</div>
+						<div class="sm:hidden block">
+							<IconButton title="Administration">
+								<Cog
+									size="1.5em"
+									class="dark:text-immich-dark-fg {$page.url.pathname.includes('/admin')
+										? 'text-immich-primary dark:text-immich-dark-primary'
+										: ''}"
+								/>
+							</IconButton>
+							<hr
 								class={$page.url.pathname.includes('/admin')
-									? 'text-immich-primary dark:text-immich-dark-primary underline'
+									? 'block border-1 w-2/3 mx-auto border-immich-primary dark:border-immich-dark-primary'
-									: ''}
+									: 'hidden'}
-							>
+							/>
-								Administration
+						</div>
-							</span>
-						</LinkButton>
 					</a>
 				{/if}
 

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

@@ -7,6 +7,7 @@
 	export let title: string;
 	export let logo: typeof Icon;
 	export let isSelected: boolean;
+	export let isCollapsed: boolean;
 
 	let showMoreInformation = false;
 
@@ -17,40 +18,43 @@
 <div
 	on:click={onButtonClicked}
 	on:keydown={onButtonClicked}
-	class={`flex gap-4 justify-between place-items-center w-full px-5 py-3 rounded-r-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer
+	class="flex gap-4 justify-between place-items-center w-full transition-[padding] delay-100 duration-100 py-3 rounded-r-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer
-    ${
+    {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'}
-		}
+  "
-  `}
 >
-	<div class="flex gap-4 place-items-center w-full">
+	<div class="flex gap-4 place-items-center w-full overflow-hidden">
-		<svelte:component this={logo} size="1.5em" />
+		<svelte:component this={logo} size="1.5em" class="shrink-0" />
 		<p class="font-medium text-sm">{title}</p>
 	</div>
 
-	{#if $$slots.moreInformation}
+	<div
-		<div
+		class="transition-[height] duration-100 delay-200 {isCollapsed ? 'height-0' : 'height-auto'}"
-			class="relative flex justify-center select-none cursor-default"
+	>
-			on:mouseenter={() => (showMoreInformation = true)}
+		{#if $$slots.moreInformation && !isCollapsed}
-			on:mouseleave={() => (showMoreInformation = false)}
+			<div
-		>
+				class="relative flex justify-center select-none cursor-default"
-			<div class="hover:cursor-help p-1 text-gray-600 dark:text-gray-400">
+				on:mouseenter={() => (showMoreInformation = true)}
-				<InformationOutline />
+				on:mouseleave={() => (showMoreInformation = false)}
-			</div>
+			>
-
+				<div class="hover:cursor-help p-1 text-gray-600 dark:text-gray-400">
-			{#if showMoreInformation}
+					<InformationOutline />
-				<div class="absolute left-6 top-0 z-20">
-					<div
-						class="flex place-items-center place-content-center whitespace-nowrap rounded-3xl shadow-lg py-3 px-6 bg-immich-bg text-immich-fg dark:bg-gray-600 dark:text-immich-dark-fg text-xs border dark:border-immich-dark-gray"
-						class:hidden={!showMoreInformation}
-						transition:fade={{ duration: 200 }}
-					>
-						<slot name="moreInformation" />
-					</div>
 				</div>
-			{/if}
+
-		</div>
+				{#if showMoreInformation}
-	{/if}
+					<div class="absolute left-6 top-0 z-20">
+						<div
+							class="flex place-items-center place-content-center whitespace-nowrap rounded-3xl shadow-lg py-3 px-6 bg-immich-bg text-immich-fg dark:bg-gray-600 dark:text-immich-dark-fg text-xs border dark:border-immich-dark-gray"
+							class:hidden={!showMoreInformation}
+							transition:fade={{ duration: 200 }}
+						>
+							<slot name="moreInformation" />
+						</div>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
 </div>

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

@@ -0,0 +1,32 @@
+<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>
+
+<svelte:window on:resize={handleResize} bind:innerWidth />
+
+<section
+	id="sidebar"
+	on:mouseover={() => (innerWidth >= 430 ? (isCollapsed = false) : null)}
+	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 />
+</section>

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -12,6 +12,9 @@
 	import StatusBox from '../status-box.svelte';
 	import SideBarButton from './side-bar-button.svelte';
 	import { locale } from '$lib/stores/preferences.store';
+	import SideBarSection from './side-bar-section.svelte';
+
+	let isCollapsed: boolean;
 
 	const getAssetCount = async () => {
 		const { data: allAssetCount } = await api.assetApi.getAssetCountByUserId();
@@ -71,7 +74,7 @@
 	};
 </script>
 
-<section id="sidebar" class="flex flex-col gap-1 pt-8 pr-6 bg-immich-bg dark:bg-immich-dark-bg">
+<SideBarSection bind:isCollapsed>
 	<a
 		data-sveltekit-preload-data="hover"
 		data-sveltekit-noscroll
@@ -82,6 +85,7 @@
 			title="Photos"
 			logo={ImageOutline}
 			isSelected={$page.route.id === '/(user)/photos'}
+			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAssetCount()}
@@ -105,6 +109,7 @@
 			title="Explore"
 			logo={Magnify}
 			isSelected={$page.route.id === '/(user)/explore'}
+			{isCollapsed}
 		/>
 	</a>
 	<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
@@ -112,6 +117,7 @@
 			title="Sharing"
 			logo={AccountMultipleOutline}
 			isSelected={$page.route.id === '/(user)/sharing'}
+			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAlbumCount()}
@@ -125,14 +131,18 @@
 		</SideBarButton>
 	</a>
 
-	<div class="text-xs p-5 pb-2 dark:text-immich-dark-fg">
+	<div
-		<p>LIBRARY</p>
+		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={isCollapsed ? 'hidden' : 'block'}>LIBRARY</p>
+		<hr class={isCollapsed ? 'block mt-2 mb-[0.45rem]' : 'hidden'} />
 	</div>
 	<a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
 		<SideBarButton
 			title="Favorites"
 			logo={StarOutline}
 			isSelected={$page.route.id == '/(user)/favorites'}
+			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getFavoriteCount()}
@@ -150,6 +160,7 @@
 			title="Albums"
 			logo={ImageAlbum}
 			isSelected={$page.route.id === '/(user)/albums'}
+			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAlbumCount()}
@@ -167,6 +178,7 @@
 			title="Archive"
 			logo={ArchiveArrowDownOutline}
 			isSelected={$page.route.id === '/(user)/archive'}
+			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getArchivedAssetsCount()}
@@ -183,6 +195,6 @@
 
 	<!-- Status Box -->
 	<div class="mb-6 mt-auto">
-		<StatusBox />
+		<StatusBox {isCollapsed} />
 	</div>
-</section>
+</SideBarSection>

web/src/lib/components/shared-components/status-box.svelte

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

web/src/routes/admin/+layout.svelte

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