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

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">
-		<Information />
-		<p class="text-xs">
-			MANAGE JOB CURRENCENCY LEVEL IN
-			<a
-				href={`${AppRoute.ADMIN_SETTINGS}?open=job-settings`}
-				class="text-immich-primary dark:text-immich-dark-primary font-medium">JOB SETTINGS</a
-			>
-		</p>
+	<div class="flex justify-end">
+		<a href="{AppRoute.ADMIN_SETTINGS}?open=job-settings">
+			<Button size="sm">
+				<CogIcon size="18" />
+				<span class="pl-2">Manage Concurrency</span>
+			</Button>
+		</a>
 	</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>