From 0b514a99ea70db3102e51a71ba3f8a7713781d38 Mon Sep 17 00:00:00 2001
From: alex <misc@wiesner.com.br>
Date: Fri, 6 Mar 2026 15:51:19 +0000
Subject: [PATCH] feat: redesign collection UI with WanderLog-inspired card
 style

- CollectionCard: hero image with gradient overlay, title/date on
  image in white, glass pill status badges, compact stats footer,
  removes 'Open Details' button (entire card is clickable)
- collections page: clean white bg, underline tabs, 'New Collection'
  button in header, responsive grid starts at md breakpoint
- Fix empty dropdown for viewonly type, remove debug console.log,
  add aria-label to card container
---
 .../components/cards/CollectionCard.svelte    | 444 +++++++++---------
 frontend/src/routes/collections/+page.svelte  | 165 +++----
 2 files changed, 294 insertions(+), 315 deletions(-)

diff --git a/frontend/src/lib/components/cards/CollectionCard.svelte b/frontend/src/lib/components/cards/CollectionCard.svelte
index af327f96..13eb83f4 100644
--- a/frontend/src/lib/components/cards/CollectionCard.svelte
+++ b/frontend/src/lib/components/cards/CollectionCard.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 
-	import Launch from '~icons/mdi/launch';
-
 	import FileDocumentEdit from '~icons/mdi/file-document-edit';
 	import ArchiveArrowDown from '~icons/mdi/archive-arrow-down';
 	import ArchiveArrowUp from '~icons/mdi/archive-arrow-up';
@@ -25,7 +23,6 @@
 	import Eye from '~icons/mdi/eye';
 	import EyeOff from '~icons/mdi/eye-off';
 	import Check from '~icons/mdi/check';
-	import MapMarker from '~icons/mdi/map-marker-multiple';
 	import LinkIcon from '~icons/mdi/link';
 	import DownloadIcon from '~icons/mdi/download';
 	import ContentCopy from '~icons/mdi/content-copy';
@@ -98,7 +95,6 @@
 	}
 
 	async function archiveCollection(is_archived: boolean) {
-		console.log(JSON.stringify({ is_archived: is_archived }));
 		let res = await fetch(`/api/collections/${collection.id}/`, {
 			method: 'PATCH',
 			headers: {
@@ -146,6 +142,43 @@
 	$: locationLength =
 		'location_count' in collection ? collection.location_count : collection.locations.length;
 
+	function formatCollectionDate(dateString: string) {
+		return new Date(dateString).toLocaleDateString('en-GB', {
+			timeZone: 'UTC',
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric'
+		});
+	}
+
+	$: dateRangeString =
+		collection.start_date && collection.end_date
+			? `${formatCollectionDate(collection.start_date)} – ${formatCollectionDate(collection.end_date)}`
+			: collection.start_date
+				? formatCollectionDate(collection.start_date)
+				: collection.end_date
+					? formatCollectionDate(collection.end_date)
+					: '';
+
+	$: days =
+		collection.start_date && collection.end_date
+			? Math.floor(
+					(new Date(collection.end_date).getTime() - new Date(collection.start_date).getTime()) /
+						(1000 * 60 * 60 * 24)
+				) + 1
+			: null;
+
+	function goToCollection() {
+		goto(`/collections/${collection.id}`);
+	}
+
+	function handleCardKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			goToCollection();
+		}
+	}
+
 	async function deleteCollection() {
 		let res = await fetch(`/api/collections/${collection.id}`, {
 			method: 'DELETE'
@@ -177,55 +210,70 @@
 {/if}
 
 <div
-	class="card w-full max-w-md bg-base-300 shadow hover:shadow-md transition-all duration-200 border border-base-300 group"
+	class="bg-base-100 rounded-2xl shadow hover:shadow-xl transition-all overflow-hidden w-full cursor-pointer group"
+	role="link"
+	aria-label={collection.name}
+	tabindex="0"
+	on:click={goToCollection}
+	on:keydown={handleCardKeydown}
 >
-	<!-- Image Carousel -->
-	<div class="relative overflow-hidden rounded-t-2xl">
+	<div class="relative h-56 overflow-hidden card-carousel-tall">
 		<CardCarousel images={location_images} name={collection.name} icon="📚" />
+		<div
+			class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent pointer-events-none z-10"
+		></div>
 
-		<!-- Status Badge Overlay -->
-		<div class="absolute top-2 left-4 flex items-center gap-2">
+		<div class="absolute top-3 left-3 z-20 flex gap-1.5">
 			{#if collection.status === 'folder'}
-				<div class="badge badge-sm badge-neutral shadow-sm">
+				<div
+					class="flex items-center gap-1 bg-black/40 backdrop-blur-sm text-white rounded-full px-2.5 py-1 text-xs font-medium"
+				>
 					📁 {$t('adventures.folder')}
 				</div>
 			{:else if collection.status === 'upcoming'}
-				<div class="badge badge-sm badge-info shadow-sm">
+				<div
+					class="flex items-center gap-1 bg-black/40 backdrop-blur-sm text-white rounded-full px-2.5 py-1 text-xs font-medium"
+				>
 					🚀 {$t('adventures.upcoming')}
 				</div>
 				{#if collection.days_until_start !== null}
-					<div class="badge badge-sm badge-accent shadow-sm">
+					<div
+						class="flex items-center gap-1 bg-black/40 backdrop-blur-sm text-white rounded-full px-2.5 py-1 text-xs font-medium"
+					>
 						⏳ {collection.days_until_start}
 						{collection.days_until_start === 1 ? $t('adventures.day') : $t('adventures.days')}
 					</div>
 				{/if}
 			{:else if collection.status === 'in_progress'}
-				<div class="badge badge-sm badge-success shadow-sm">
+				<div
+					class="flex items-center gap-1 bg-black/40 backdrop-blur-sm text-white rounded-full px-2.5 py-1 text-xs font-medium"
+				>
 					🎯 {$t('adventures.in_progress')}
 				</div>
 			{:else if collection.status === 'completed'}
-				<div class="badge badge-sm badge-primary shadow-sm">
-					<Check class="w-4 h-4" />
+				<div
+					class="flex items-center gap-1 bg-black/40 backdrop-blur-sm text-white rounded-full px-2.5 py-1 text-xs font-medium"
+				>
+					<Check class="w-3.5 h-3.5" />
 					{$t('adventures.completed')}
 				</div>
 			{/if}
 			{#if collection.is_archived}
-				<div class="badge badge-sm badge-warning shadow-sm">
+				<div
+					class="flex items-center gap-1 bg-black/40 backdrop-blur-sm text-white rounded-full px-2.5 py-1 text-xs font-medium"
+				>
 					{$t('adventures.archived')}
 				</div>
 			{/if}
 		</div>
 
-		<!-- Privacy Indicator -->
-		<div class="absolute top-2 right-4">
+		<div class="absolute top-3 right-3 z-20 flex items-center gap-1.5">
 			<div
 				class="tooltip tooltip-left"
 				data-tip={collection.is_public ? $t('adventures.public') : $t('adventures.private')}
 			>
 				<div
-					class="badge badge-sm {collection.is_public
-						? 'badge-secondary'
-						: 'badge-ghost'} shadow-lg"
+					class="flex items-center justify-center bg-black/40 backdrop-blur-sm text-white rounded-full w-7 h-7"
 					aria-label={collection.is_public ? $t('adventures.public') : $t('adventures.private')}
 				>
 					{#if collection.is_public}
@@ -235,225 +283,171 @@
 					{/if}
 				</div>
 			</div>
-		</div>
-	</div>
 
-	<!-- Content -->
-	<div class="card-body p-4 space-y-3">
-		<!-- Title -->
-		<a
-			href="/collections/{collection.id}"
-			class="hover:text-primary transition-colors duration-200 line-clamp-2 text-lg font-semibold"
-			>{collection.name}</a
-		>
-
-		<!-- Stats -->
-		<div class="flex flex-wrap items-center gap-2 text-sm text-base-content/70">
-			<!-- Location Count -->
-			<div class="flex items-center gap-1">
-				<MapMarker class="w-4 h-4 text-primary" />
-				<span>
-					{locationLength}
-					{locationLength === 1 ? $t('locations.location') : $t('locations.locations')}
-				</span>
-			</div>
-
-			<!-- Date Range & Duration -->
-			{#if collection.start_date && collection.end_date}
-				<span class="text-base-content/60 px-1">•</span>
-				<div class="flex items-center gap-1">
-					<span>
-						{Math.floor(
-							(new Date(collection.end_date).getTime() -
-								new Date(collection.start_date).getTime()) /
-								(1000 * 60 * 60 * 24)
-						) + 1}
-						{Math.floor(
-							(new Date(collection.end_date).getTime() -
-								new Date(collection.start_date).getTime()) /
-								(1000 * 60 * 60 * 24)
-						) +
-							1 ===
-						1
-							? $t('adventures.day')
-							: $t('adventures.days')}
-					</span>
+			{#if user && user.uuid == collection.user && type != 'link' && type != 'viewonly'}
+				<div class="dropdown dropdown-end">
+					<button
+						type="button"
+						class="btn btn-ghost bg-black/40 backdrop-blur-sm text-white rounded-full w-7 h-7 p-0 min-h-0 border-0 hover:bg-black/55"
+						on:click|stopPropagation
+					>
+						<DotsHorizontal class="w-4 h-4" />
+					</button>
+					<ul
+						class="dropdown-content menu bg-base-100 rounded-box z-[1] w-64 p-2 shadow-xl border border-base-300 mt-1"
+					>
+						{#if type != 'viewonly'}
+							<li>
+								<button class="flex items-center gap-2" on:click|stopPropagation={editAdventure}>
+									<FileDocumentEdit class="w-4 h-4" />
+									{$t('adventures.edit_collection')}
+								</button>
+							</li>
+							<li>
+								<button
+									class="flex items-center gap-2"
+									on:click|stopPropagation={() => (isShareModalOpen = true)}
+								>
+									<ShareVariant class="w-4 h-4" />
+									{$t('adventures.share')}
+								</button>
+							</li>
+							{#if collection.is_public}
+								<li>
+									<button on:click|stopPropagation={copyLink} class="flex items-center gap-2">
+										{#if copied}
+											<Check class="w-4 h-4 text-success" />
+											<span>{$t('adventures.link_copied')}</span>
+										{:else}
+											<LinkIcon class="w-4 h-4" />
+											{$t('adventures.copy_link')}
+										{/if}
+									</button>
+								</li>
+							{/if}
+							{#if collection.is_archived}
+								<li>
+									<button
+										class="flex items-center gap-2"
+										on:click|stopPropagation={() => archiveCollection(false)}
+									>
+										<ArchiveArrowUp class="w-4 h-4" />
+										{$t('adventures.unarchive')}
+									</button>
+								</li>
+							{:else}
+								<li>
+									<button
+										class="flex items-center gap-2"
+										on:click|stopPropagation={() => archiveCollection(true)}
+									>
+										<ArchiveArrowDown class="w-4 h-4" />
+										{$t('adventures.archive')}
+									</button>
+								</li>
+							{/if}
+							<li>
+								<button
+									class="flex items-center gap-2"
+									on:click|stopPropagation={exportCollectionZip}
+								>
+									<DownloadIcon class="w-4 h-4" />
+									{$t('adventures.export_zip')}
+								</button>
+							</li>
+							<li>
+								<button
+									class="flex items-center gap-2"
+									on:click|stopPropagation={duplicateCollection}
+									disabled={isDuplicating}
+								>
+									<ContentCopy class="w-4 h-4" />
+									{isDuplicating ? '...' : $t('adventures.duplicate')}
+								</button>
+							</li>
+							<div class="divider my-1"></div>
+							<li>
+								<button
+									id="delete_collection"
+									data-umami-event="Delete Collection"
+									class="text-error flex items-center gap-2"
+									on:click|stopPropagation={() => (isWarningModalOpen = true)}
+								>
+									<TrashCan class="w-4 h-4" />
+									{$t('adventures.delete')}
+								</button>
+							</li>
+						{/if}
+					</ul>
+				</div>
+			{:else if user && collection.shared_with && collection.shared_with.includes(user.uuid) && type != 'link'}
+				<div class="dropdown dropdown-end">
+					<button
+						type="button"
+						class="btn btn-ghost bg-black/40 backdrop-blur-sm text-white rounded-full w-7 h-7 p-0 min-h-0 border-0 hover:bg-black/55"
+						on:click|stopPropagation
+					>
+						<DotsHorizontal class="w-4 h-4" />
+					</button>
+					<ul
+						class="dropdown-content menu bg-base-100 rounded-box z-[1] w-64 p-2 shadow-xl border border-base-300 mt-1"
+					>
+						<li>
+							<button
+								class="text-error flex items-center gap-2"
+								on:click|stopPropagation={() => dispatch('leave', collection.id)}
+							>
+								<ExitRun class="w-4 h-4" />
+								{$t('adventures.leave_collection')}
+							</button>
+						</li>
+					</ul>
 				</div>
 			{/if}
 		</div>
 
-		<!-- Date Range (if exists) -->
-		{#if collection.start_date && collection.end_date}
-			<div class="text-xs text-base-content/60">
-				{new Date(collection.start_date).toLocaleDateString('en-GB', {
-					timeZone: 'UTC',
-					month: 'short',
-					day: 'numeric',
-					year: 'numeric'
-				})} – {new Date(collection.end_date).toLocaleDateString('en-GB', {
-					timeZone: 'UTC',
-					month: 'short',
-					day: 'numeric',
-					year: 'numeric'
-				})}
-			</div>
-		{/if}
+		<div class="absolute bottom-0 left-0 right-0 p-4 z-20 pointer-events-none">
+			<h3 class="text-white font-bold text-base leading-snug line-clamp-2 drop-shadow-sm">
+				{collection.name}
+			</h3>
+			{#if collection.start_date || collection.end_date}
+				<p class="text-white/75 text-xs mt-0.5 drop-shadow-sm">{dateRangeString}</p>
+			{/if}
+		</div>
 
-		<!-- Actions -->
-		<div class="pt-4 border-t border-base-300">
-			{#if type == 'link'}
+		{#if type == 'link'}
+			<div class="absolute bottom-3 right-3 z-20">
 				{#if linkedCollectionList && linkedCollectionList
 						.map(String)
 						.includes(String(collection.id))}
 					<button
-						class="btn btn-error btn-block"
-						on:click={() => dispatch('unlink', collection.id)}
+						class="btn btn-xs border-0 bg-black/40 backdrop-blur-sm text-white rounded-full px-3 hover:bg-black/55"
+						on:click|stopPropagation={() => dispatch('unlink', collection.id)}
 					>
-						<Minus class="w-4 h-4" />
+						<Minus class="w-3.5 h-3.5" />
 						{$t('adventures.remove_from_collection')}
 					</button>
 				{:else}
 					<button
-						class="btn btn-primary btn-block"
-						on:click={() => dispatch('link', collection.id)}
+						class="btn btn-xs border-0 bg-black/40 backdrop-blur-sm text-white rounded-full px-3 hover:bg-black/55"
+						on:click|stopPropagation={() => dispatch('link', collection.id)}
 					>
-						<Plus class="w-4 h-4" />
+						<Plus class="w-3.5 h-3.5" />
 						{$t('adventures.add_to_collection')}
 					</button>
 				{/if}
-			{:else}
-				<div class="flex justify-between items-center">
-					<button
-						class="btn btn-neutral btn-sm flex-1 mr-2"
-						on:click={() => goto(`/collections/${collection.id}`)}
-					>
-						<Launch class="w-4 h-4" />
-						{$t('adventures.open_details')}
-					</button>
-					{#if user && user.uuid == collection.user}
-						<div class="dropdown dropdown-end">
-							<button type="button" class="btn btn-square btn-sm btn-base-300">
-								<DotsHorizontal class="w-5 h-5" />
-							</button>
-							<ul
-								class="dropdown-content menu bg-base-100 rounded-box z-[1] w-64 p-2 shadow-xl border border-base-300"
-							>
-								{#if type != 'viewonly'}
-									<li>
-										<button class="flex items-center gap-2" on:click={editAdventure}>
-											<FileDocumentEdit class="w-4 h-4" />
-											{$t('adventures.edit_collection')}
-										</button>
-									</li>
-									<li>
-										<button
-											class="flex items-center gap-2"
-											on:click={() => (isShareModalOpen = true)}
-										>
-											<ShareVariant class="w-4 h-4" />
-											{$t('adventures.share')}
-										</button>
-									</li>
-									{#if collection.is_public}
-										<li>
-											<button on:click={copyLink} class="flex items-center gap-2">
-												{#if copied}
-													<Check class="w-4 h-4 text-success" />
-													<span>{$t('adventures.link_copied')}</span>
-												{:else}
-													<LinkIcon class="w-4 h-4" />
-													{$t('adventures.copy_link')}
-												{/if}
-											</button>
-										</li>
-									{/if}
-									{#if collection.is_archived}
-										<li>
-											<button
-												class="flex items-center gap-2"
-												on:click={() => archiveCollection(false)}
-											>
-												<ArchiveArrowUp class="w-4 h-4" />
-												{$t('adventures.unarchive')}
-											</button>
-										</li>
-									{:else}
-										<li>
-											<button
-												class="flex items-center gap-2"
-												on:click={() => archiveCollection(true)}
-											>
-												<ArchiveArrowDown class="w-4 h-4" />
-												{$t('adventures.archive')}
-											</button>
-										</li>
-									{/if}
-									<li>
-										<button class="flex items-center gap-2" on:click={exportCollectionZip}>
-											<DownloadIcon class="w-4 h-4" />
-											{$t('adventures.export_zip')}
-										</button>
-									</li>
-									<li>
-										<button
-											class="flex items-center gap-2"
-											on:click={duplicateCollection}
-											disabled={isDuplicating}
-										>
-											<ContentCopy class="w-4 h-4" />
-											{isDuplicating ? '...' : $t('adventures.duplicate')}
-										</button>
-									</li>
-									<div class="divider my-1"></div>
-									<li>
-										<button
-											id="delete_collection"
-											data-umami-event="Delete Collection"
-											class="text-error flex items-center gap-2"
-											on:click={() => (isWarningModalOpen = true)}
-										>
-											<TrashCan class="w-4 h-4" />
-											{$t('adventures.delete')}
-										</button>
-									</li>
-								{/if}
-								{#if type == 'viewonly'}
-									<li>
-										<button
-											class="flex items-center gap-2"
-											on:click={() => goto(`/collections/${collection.id}`)}
-										>
-											<Launch class="w-4 h-4" />
-											{$t('adventures.open_details')}
-										</button>
-									</li>
-								{/if}
-							</ul>
-						</div>
-					{:else if user && collection.shared_with && collection.shared_with.includes(user.uuid)}
-						<!-- dropdown with leave button -->
-						<div class="dropdown dropdown-end">
-							<button type="button" class="btn btn-square btn-sm btn-base-300">
-								<DotsHorizontal class="w-5 h-5" />
-							</button>
-							<ul
-								class="dropdown-content menu bg-base-100 rounded-box z-[1] w-64 p-2 shadow-xl border border-base-300"
-							>
-								<li>
-									<button
-										class="text-error flex items-center gap-2"
-										on:click={() => dispatch('leave', collection.id)}
-									>
-										<ExitRun class="w-4 h-4" />
-										{$t('adventures.leave_collection')}
-									</button>
-								</li>
-							</ul>
-						</div>
-					{/if}
-				</div>
-			{/if}
-		</div>
+			</div>
+		{/if}
+	</div>
+
+	<div class="px-4 py-3 flex items-center gap-3 text-sm text-base-content/60">
+		<span
+			>{locationLength}
+			{locationLength !== 1 ? $t('locations.locations') : $t('locations.location')}</span
+		>
+		{#if days}
+			<span>· {days} {days !== 1 ? $t('adventures.days') : $t('adventures.day')}</span>
+		{/if}
 	</div>
 </div>
 
@@ -465,4 +459,12 @@
 		-webkit-box-orient: vertical;
 		overflow: hidden;
 	}
+
+	.card-carousel-tall :global(figure),
+	.card-carousel-tall :global(.carousel),
+	.card-carousel-tall :global(.carousel-item),
+	.card-carousel-tall :global(img),
+	.card-carousel-tall :global(figure > div) {
+		height: 14rem;
+	}
 </style>
diff --git a/frontend/src/routes/collections/+page.svelte b/frontend/src/routes/collections/+page.svelte
index c389b4f2..aadab60e 100644
--- a/frontend/src/routes/collections/+page.svelte
+++ b/frontend/src/routes/collections/+page.svelte
@@ -3,9 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import CollectionCard from '$lib/components/cards/CollectionCard.svelte';
-	import CollectionLink from '$lib/components/CollectionLink.svelte';
 	import CollectionModal from '$lib/components/CollectionModal.svelte';
-	import NotFound from '$lib/components/NotFound.svelte';
 	import type { Collection, CollectionInvite, SlimCollection } from '$lib/types';
 	import { t } from 'svelte-i18n';
 
@@ -22,7 +20,6 @@
 	import DeleteWarning from '$lib/components/DeleteWarning.svelte';
 
 	export let data: any;
-	console.log('Collections page data:', data);
 
 	let collections: SlimCollection[] = data.props.adventures || [];
 	let sharedCollections: SlimCollection[] = data.props.sharedCollections || [];
@@ -377,105 +374,87 @@
 	</dialog>
 {/if}
 
-<div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
+<div class="min-h-screen bg-base-100">
 	<div class="drawer lg:drawer-open">
 		<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
 
 		<div class="drawer-content">
 			<!-- Header Section -->
-			<div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300">
+			<div class="sticky top-0 z-40 bg-base-100/95 backdrop-blur-md border-b border-base-200">
 				<div class="container mx-auto px-6 py-4">
-					<div class="flex items-center justify-between">
-						<div class="flex items-center gap-4">
+					<div class="flex items-center justify-between gap-3">
+						<div class="flex items-center gap-3">
 							<button class="btn btn-ghost btn-square lg:hidden" on:click={toggleSidebar}>
 								<Filter class="w-5 h-5" />
 							</button>
-							<div class="flex items-center gap-3">
-								<div class="p-2 bg-primary/10 rounded-xl">
-									<CollectionIcon class="w-8 h-8 text-primary" />
-								</div>
-								<div>
-									<h1 class="text-3xl font-bold bg-clip-text text-primary">
-										{activeView === 'invites'
-											? $t('invites.title')
-											: $t(`adventures.my_collections`)}
-									</h1>
-									<p class="text-sm text-base-content/60">
-										{currentCount}
-										{activeView === 'owned'
-											? $t('navbar.collections')
-											: activeView === 'shared'
-												? $t('collection.shared_collections')
-												: activeView === 'archived'
-													? $t('adventures.archived_collections')
-													: $t('invites.pending_invites')}
-									</p>
-								</div>
-							</div>
+							<h1 class="text-2xl font-bold">Collections</h1>
 						</div>
 
-						<!-- View Toggle -->
-						<div class="tabs tabs-boxed bg-base-200">
-							<button
-								class="tab gap-2 {activeView === 'owned' ? 'tab-active' : ''}"
-								on:click={() => switchView('owned')}
-							>
-								<CollectionIcon class="w-4 h-4" />
-								<span class="hidden sm:inline">{$t('adventures.my_collections')}</span>
-								<div
-									class="badge badge-sm {activeView === 'owned' ? 'badge-primary' : 'badge-ghost'}"
-								>
-									{collections.length}
-								</div>
-							</button>
-							<button
-								class="tab gap-2 {activeView === 'shared' ? 'tab-active' : ''}"
-								on:click={() => switchView('shared')}
-							>
-								<Share class="w-4 h-4" />
-								<span class="hidden sm:inline">{$t('share.shared')}</span>
-								<div
-									class="badge badge-sm {activeView === 'shared' ? 'badge-primary' : 'badge-ghost'}"
-								>
-									{sharedCollections.length}
-								</div>
-							</button>
-							<button
-								class="tab gap-2 {activeView === 'archived' ? 'tab-active' : ''}"
-								on:click={() => switchView('archived')}
-							>
-								<Archive class="w-4 h-4" />
-								<span class="hidden sm:inline">{$t('adventures.archived')}</span>
-								<div
-									class="badge badge-sm {activeView === 'archived'
-										? 'badge-primary'
-										: 'badge-ghost'}"
-								>
-									{archivedCollections.length}
-								</div>
-							</button>
-							<button
-								class="tab gap-2 {activeView === 'invites' ? 'tab-active' : ''}"
-								on:click={() => switchView('invites')}
-							>
-								<div class="indicator">
-									<MailIcon class="w-4 h-4" />
-									{#if invites.length > 0}
-										<span class="indicator-item badge badge-xs badge-error"></span>
-									{/if}
-								</div>
-								<span class="hidden sm:inline">{$t('invites.title')}</span>
-								<div
-									class="badge badge-sm {activeView === 'invites'
-										? 'badge-primary'
-										: invites.length > 0
-											? 'badge-error'
-											: 'badge-ghost'}"
-								>
-									{invites.length}
-								</div>
-							</button>
-						</div>
+						<button
+							class="btn btn-primary btn-sm gap-2"
+							on:click={() => {
+								collectionToEdit = null;
+								isShowingCollectionModal = true;
+								newType = 'visited';
+							}}
+						>
+							<Plus class="w-4 h-4" />
+							{$t('collection.create')}
+						</button>
+					</div>
+
+					<div class="flex border-b border-base-200 mt-4 overflow-x-auto">
+						<button
+							class="tab px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap {activeView ===
+							'owned'
+								? 'border-primary text-primary'
+								: 'border-transparent text-base-content/60 hover:text-base-content'}"
+							on:click={() => switchView('owned')}
+						>
+							<CollectionIcon class="w-4 h-4" />
+							<span class="hidden sm:inline">{$t('adventures.my_collections')}</span>
+							<div class="badge badge-sm badge-ghost">{collections.length}</div>
+						</button>
+						<button
+							class="tab px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap {activeView ===
+							'shared'
+								? 'border-primary text-primary'
+								: 'border-transparent text-base-content/60 hover:text-base-content'}"
+							on:click={() => switchView('shared')}
+						>
+							<Share class="w-4 h-4" />
+							<span class="hidden sm:inline">{$t('share.shared')}</span>
+							<div class="badge badge-sm badge-ghost">{sharedCollections.length}</div>
+						</button>
+						<button
+							class="tab px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap {activeView ===
+							'archived'
+								? 'border-primary text-primary'
+								: 'border-transparent text-base-content/60 hover:text-base-content'}"
+							on:click={() => switchView('archived')}
+						>
+							<Archive class="w-4 h-4" />
+							<span class="hidden sm:inline">{$t('adventures.archived')}</span>
+							<div class="badge badge-sm badge-ghost">{archivedCollections.length}</div>
+						</button>
+						<button
+							class="tab px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap {activeView ===
+							'invites'
+								? 'border-primary text-primary'
+								: 'border-transparent text-base-content/60 hover:text-base-content'}"
+							on:click={() => switchView('invites')}
+						>
+							<div class="indicator">
+								<MailIcon class="w-4 h-4" />
+								{#if invites.length > 0}
+									<span class="indicator-item badge badge-xs badge-error"></span>
+								{/if}
+							</div>
+							<span class="hidden sm:inline">{$t('invites.title')}</span>
+							<div class="badge badge-sm {invites.length > 0 ? 'badge-error' : 'badge-ghost'}">
+								{invites.length}
+							</div>
+						</button>
 					</div>
 				</div>
 			</div>
@@ -588,9 +567,7 @@
 					</div>
 				{:else}
 					<!-- Collections Grid -->
-					<div
-						class="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6"
-					>
+					<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
 						{#each currentCollections as collection (collection.id)}
 							<CollectionCard
 								type=""