feat(web): mobile job cards (#2688)

web/src/lib/components/admin-page/jobs/job-tile.svelte

@@ -23,14 +23,18 @@
 	export let allText: string;
 	export let missingText: string;
 
+	const slots = $$props.$$slots;
+
 	$: waitingCount = jobCounts.waiting + jobCounts.paused + jobCounts.delayed;
 	$: isIdle = !queueStatus.isActive && !queueStatus.isPaused;
 
+	const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pr-4 pl-6';
+
 	const dispatch = createEventDispatcher<{ command: JobCommandDto }>();
 </script>
 
 <div
-	class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-[35px] overflow-hidden"
+	class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-2xl sm:rounded-[35px] overflow-hidden"
 >
 	<div class="flex flex-col w-full">
 		{#if queueStatus.isPaused}
@@ -38,7 +42,7 @@
 		{:else if queueStatus.isActive}
 			<JobTileStatus color="success">Active</JobTileStatus>
 		{/if}
-		<div class="flex flex-col gap-2 p-9">
+		<div class="flex flex-col gap-2 p-5 sm:p-7 md:p-9">
 			<div
 				class="flex items-center gap-4 text-xl font-semibold text-immich-primary dark:text-immich-dark-primary"
 			>
@@ -63,13 +67,16 @@
 			{#if subtitle}
 				<div class="text-sm dark:text-white whitespace-pre-line">{subtitle}</div>
 			{/if}
-			<div class="text-sm dark:text-white">
-				<slot />
-			</div>
 
-			<div class="flex w-full max-w-md mt-2">
+			{#if slots?.description}
+				<div class="text-sm dark:text-white">
+					<slot name="description" />
+				</div>
+			{/if}
+
+			<div class="flex w-full max-w-md mt-2 flex-col sm:flex-row">
 				<div
-					class="flex place-items-center justify-between bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray w-full rounded-tl-lg rounded-bl-lg py-4 pl-4 pr-6"
+					class="{commonClasses} bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray rounded-t-lg sm:rounded-l-lg sm:rounded-r-none"
 				>
 					<p>Active</p>
 					<p class="text-2xl">
@@ -78,7 +85,7 @@
 				</div>
 
 				<div
-					class="flex place-items-center justify-between bg-gray-200 text-immich-dark-bg dark:bg-gray-700 dark:text-immich-gray w-full rounded-tr-lg rounded-br-lg py-4 pr-4 pl-6"
+					class="{commonClasses} bg-gray-200 text-immich-dark-bg dark:bg-gray-700 dark:text-immich-gray rounded-b-lg sm:rounded-r-lg sm:rounded-l-none flex-row-reverse"
 				>
 					<p class="text-2xl">
 						{waitingCount.toLocaleString($locale)}

web/src/lib/components/admin-page/jobs/jobs-panel.svelte

@@ -12,7 +12,7 @@
 	import FileJpgBox from 'svelte-material-icons/FileJpgBox.svelte';
 	import FileXmlBox from 'svelte-material-icons/FileXmlBox.svelte';
 	import FolderMove from 'svelte-material-icons/FolderMove.svelte';
-	import Information from 'svelte-material-icons/Information.svelte';
+	import CogIcon from 'svelte-material-icons/Cog.svelte';
 	import Table from 'svelte-material-icons/Table.svelte';
 	import TagMultiple from 'svelte-material-icons/TagMultiple.svelte';
 	import VectorCircle from 'svelte-material-icons/VectorCircle.svelte';
@@ -20,6 +20,7 @@
 	import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
 	import JobTile from './job-tile.svelte';
 	import StorageMigrationDescription from './storage-migration-description.svelte';
+	import Button from '../../elements/buttons/button.svelte';
 
 	export let jobs: AllJobStatusResponseDto;
 
@@ -130,17 +131,14 @@
 {/if}
 
 <div class="flex flex-col gap-7">
-	<div class="flex dark:text-white text-black gap-2 bg-gray-200 dark:bg-gray-700 p-6 rounded-full">
+	<div class="flex justify-end">
-		<Information />
+		<a href="{AppRoute.ADMIN_SETTINGS}?open=job-settings">
-		<p class="text-xs">
+			<Button size="sm">
-			MANAGE JOB CURRENCENCY LEVEL IN
+				<CogIcon size="18" />
-			<a
+				<span class="pl-2">Manage Concurrency</span>
-				href={`${AppRoute.ADMIN_SETTINGS}?open=job-settings`}
+			</Button>
-				class="text-immich-primary dark:text-immich-dark-primary font-medium">JOB SETTINGS</a
+		</a>
-			>
-		</p>
 	</div>
-
 	{#each jobDetailsArray as [jobName, { title, subtitle, allText, missingText, allowForceCommand, icon, component, handleCommand: handleCommandOverride }]}
 		{@const { jobCounts, queueStatus } = jobs[jobName]}
 		<JobTile
@@ -154,7 +152,9 @@
 			{queueStatus}
 			on:command={({ detail }) => (handleCommandOverride || handleCommand)(jobName, detail)}
 		>
-			<svelte:component this={component} />
+			{#if component}
+				<svelte:component this={component} slot="description" />
+			{/if}
 		</JobTile>
 	{/each}
 </div>