feat: implement attachment management with upload, delete, and permission checks; update serializers and models

frontend/src/lib/components/AttachmentCard.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import type { Attachment } from '$lib/types';
+	import { t } from 'svelte-i18n';
+
+	export let attachment: Attachment;
+	export let allowEdit: boolean = false;
+
+	import { createEventDispatcher } from 'svelte';
+	import { addToast } from '$lib/toasts';
+
+	const dispatch = createEventDispatcher();
+
+	async function deleteAttachment() {
+		let res = await fetch(`/api/attachments/${attachment.id}`, {
+			method: 'DELETE'
+		});
+		if (res.ok) {
+			addToast('info', $t('adventures.attachment_delete_success'));
+			dispatch('delete', attachment.id);
+		} else {
+			console.log('Error deleting attachment');
+		}
+	}
+
+	// Check if the attachment is an image or not
+	function getCardBackground() {
+		const isImage = ['.jpg', '.jpeg', '.png', '.gif', '.webp'].some((ext) =>
+			attachment.file.endsWith(ext)
+		);
+		return isImage ? `url(${attachment.file})` : 'url(/path/to/default-placeholder.png)';
+	}
+</script>
+
+<div class="relative rounded-lg shadow-lg group hover:shadow-xl transition-shadow overflow-hidden">
+	<!-- Card Image or Placeholder -->
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div
+		class="w-full h-48 bg-cover bg-center group-hover:opacity-90 transition-opacity"
+		style="background-image: {getCardBackground()}"
+		on:click={() => window.open(attachment.file, '_blank')}
+		role="button"
+		tabindex="0"
+		aria-label={attachment.file.split('/').pop()}
+	>
+		{#if !['.jpg', '.jpeg', '.png', '.gif', '.webp'].some((ext) => attachment.file.endsWith(ext))}
+			<div
+				class="flex justify-center items-center w-full h-full text-white text-lg font-bold bg-gradient-to-r from-secondary via-base to-primary text-center"
+			>
+				<p>
+					{attachment.name} <br />
+					{attachment.extension.toUpperCase()}
+				</p>
+			</div>
+			<!-- show the name under the extension -->
+		{/if}
+	</div>
+
+	<!-- Attachment Label -->
+	<div
+		class="absolute top-0 right-0 bg-primary text-white px-3 py-1 text-sm font-medium rounded-bl-lg shadow-md"
+	>
+		{$t('adventures.attachment')}
+	</div>
+	<div
+		class="absolute top-0 left-0 bg-secondary text-white px-2 py-1 text-sm font-medium rounded-br-lg shadow-md"
+	>
+		{attachment.extension}
+	</div>
+
+	<!-- Action Bar -->
+	<div
+		class="absolute bottom-0 w-full bg-gradient-to-t from-black/50 to-transparent p-3 rounded-b-lg flex justify-between items-center"
+	>
+		<span class="text-white text-sm font-medium truncate">
+			{attachment.name}
+		</span>
+		<div class="flex space-x-2">
+			<button
+				class="btn btn-sm btn-secondary btn-outline"
+				type="button"
+				on:click={() => window.open(attachment.file, '_blank')}
+			>
+				{$t('notes.open')}
+			</button>
+			{#if allowEdit}
+				<button
+					class="btn btn-sm btn-info btn-outline"
+					type="button"
+					on:click={() => dispatch('edit', attachment)}
+				>
+					{$t('transportation.edit')}
+				</button>
+			{/if}
+			<button class="btn btn-sm btn-danger btn-outline" type="button" on:click={deleteAttachment}>
+				{$t('adventures.delete')}
+			</button>
+		</div>
+	</div>
+</div>