View assets detail and download operation (#198)

* Fixed not displaying default user profile picture

* Added buttons to close viewer and micro-interaction for navigating assets left, right

* Add additional buttons to the control bar

* Display EXIF info

* Added map to detail info

* Handle user input keyboard

* Fixed incorrect file name when downloading multiple files

* Implemented download panel

web/src/lib/components/shared/circle_icon_button.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	export let logo: any;
+	export let backgroundColor: string = '';
+	export let logoColor: string = '';
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<button
+	class="rounded-full p-3 flex place-items-center place-content-center text-gray-50 hover:bg-gray-800"
+	class:background-color={backgroundColor}
+	class:color={logoColor}
+	on:click={() => dispatch('click')}
+>
+	<svelte:component this={logo} size="24" />
+</button>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import type { ImmichUser } from '$lib/models/immich-user';
 	import { onMount } from 'svelte';
@@ -11,13 +12,19 @@
 	let shouldShowProfileImage = false;
 
 	onMount(async () => {
-		const res = await fetch(`${serverEndpoint}/user/profile-image/${user.id}`);
+		const res = await fetch(`${serverEndpoint}/user/profile-image/${user.id}`, { method: 'GET' });
 
 		if (res.status == 200) shouldShowProfileImage = true;
 	});
+
 	const getFirstLetter = (text?: string) => {
 		return text?.charAt(0).toUpperCase();
 	};
+
+	const navigateToAdmin = () => {
+		console.log('Navigating to admin page');
+		goto('/admin');
+	};
 </script>
 
 <section id="dashboard-navbar" class="fixed w-screen  z-[100] bg-immich-bg text-sm">
@@ -33,11 +40,11 @@
 			<!-- <div>Upload</div> -->
 
 			{#if user.isAdmin}
-				<a
+				<button
 					class={`hover:text-immich-primary font-medium ${
 						$page.url.pathname == '/admin' && 'text-immich-primary underline'
 					}`}
-					href="/admin">Administration</a
+					on:click={navigateToAdmin}>Administration</button
 				>
 			{/if}
 

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

@@ -18,8 +18,8 @@
 
 <div
 	on:click={onButtonClicked}
-	class={`flex gap-4 place-items-center pl-5 py-3 rounded-tr-xl rounded-br-xl hover:bg-gray-200 hover:text-immich-primary hover:cursor-pointer
-    ${isSelected && 'bg-immich-primary/10 text-immich-primary hover:bg-immich-primary/50'}
+	class={`flex gap-4 place-items-center pl-5 py-3 rounded-tr-full rounded-br-full hover:bg-gray-200 hover:text-immich-primary hover:cursor-pointer
+    ${isSelected && 'bg-immich-primary/10 text-immich-primary hover:bg-immich-primary/25'}
   `}
 >
 	<svelte:component this={logo} size="24" />