alex/voyage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): simplify collections view and restore invite access

Browse Source 
Unify collections and shared items under a single Collections tab while keeping Archive separate, and fix card layering so menus render correctly. Restore invite discoverability by adding navbar access to /invites and add missing i18n keys to prevent raw key labels in collections/invites UI.
This commit is contained in:
alex
2026-03-08 01:29:52 +00:00
parent f11a5051c6
commit 9eb0325c7a
24 changed files with 116 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/lib/components/CardCarousel.svelte
View File

@@ -53,21 +53,21 @@
/>
{/if}
<figure>
<figure class="m-0 h-full">
{#if sortedImages && sortedImages.length > 0}
<div class="carousel w-full relative">
<div class="carousel w-full h-full relative">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="carousel-item w-full block">
<div class="carousel-item w-full h-full block">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-missing-attribute -->
<a
on:click|stopPropagation={() => openImageModal(currentSlide)}
class="cursor-pointer relative group"
class="cursor-pointer relative group block h-full w-full"
>
<img
src={sortedImages[currentSlide].image}
class="w-full h-48 object-cover transition-all group-hover:brightness-110"
class="w-full h-full object-cover transition-all group-hover:brightness-110"
alt={name || 'Image'}
/>
@@ -165,7 +165,7 @@
</div>
{:else}
<!-- Fallback with emoji icon as main image -->
<div class="w-full h-48 relative flex items-center justify-center">
<div class="w-full h-full relative flex items-center justify-center">
{#if icon}
<!-- Clean background with emoji as the focal point -->
<div

1
frontend/src/lib/components/Navbar.svelte
View File

@@ -113,6 +113,7 @@
const navigationItems = [
{ path: '/locations', icon: MapMarker, label: 'locations.locations' },
{ path: '/collections', icon: FormatListBulletedSquare, label: 'navbar.collections' },
{ path: '/invites', icon: AccountMultiple, label: 'invites.title' },
{ path: '/worldtravel', icon: Earth, label: 'navbar.worldtravel' },
{ path: '/map', icon: MapIcon, label: 'navbar.map' },
{ path: '/calendar', icon: Calendar, label: 'navbar.calendar' },

34
frontend/src/lib/components/cards/CollectionCard.svelte
View File

@@ -192,6 +192,12 @@
}
let isWarningModalOpen: boolean = false;
$: isOwner = !!user && String(user.uuid) === String(collection.user);
$: isSharedMember =
!!user &&
Array.isArray(collection.shared_with) &&
collection.shared_with.some((sharedUserId) => String(sharedUserId) === String(user.uuid));
</script>
{#if isWarningModalOpen}
@@ -210,18 +216,20 @@
{/if}
<div
class="bg-base-100 rounded-2xl shadow hover:shadow-xl transition-all overflow-hidden w-full cursor-pointer group"
class="bg-base-100 rounded-2xl shadow hover:shadow-xl transition-all w-full cursor-pointer group"
role="link"
aria-label={collection.name}
tabindex="0"
on:click={goToCollection}
on:keydown={handleCardKeydown}
>
<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>
<div class="relative h-56 card-carousel-tall rounded-t-2xl">
<div class="absolute inset-0 overflow-hidden rounded-t-2xl">
<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>
</div>
<div class="absolute top-3 left-3 z-20 flex gap-1.5">
{#if collection.status === 'folder'}
@@ -267,7 +275,7 @@
{/if}
</div>
<div class="absolute top-3 right-3 z-20 flex items-center gap-1.5">
<div class="absolute top-3 right-3 z-30 flex items-center gap-1.5">
<div
class="tooltip tooltip-left"
data-tip={collection.is_public ? $t('adventures.public') : $t('adventures.private')}
@@ -284,8 +292,8 @@
</div>
</div>
{#if user && user.uuid == collection.user && type != 'link' && type != 'viewonly'}
<div class="dropdown dropdown-end">
{#if isOwner && type != 'link' && type != 'viewonly'}
<div class="dropdown dropdown-end z-30">
<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"
@@ -294,7 +302,7 @@
<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"
class="dropdown-content menu bg-base-100 rounded-box z-[60] w-64 p-2 shadow-xl border border-base-300 mt-1"
>
{#if type != 'viewonly'}
<li>
@@ -380,8 +388,8 @@
{/if}
</ul>
</div>
{:else if user && collection.shared_with && collection.shared_with.includes(user.uuid) && type != 'link'}
<div class="dropdown dropdown-end">
{:else if isSharedMember && type != 'link'}
<div class="dropdown dropdown-end z-30">
<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"
@@ -390,7 +398,7 @@
<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"
class="dropdown-content menu bg-base-100 rounded-box z-[60] w-64 p-2 shadow-xl border border-base-300 mt-1"
>
<li>
<button