fix(frontend): simplify collections view and restore invite access
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:
@@ -4,18 +4,14 @@
|
||||
import { page } from '$app/stores';
|
||||
import CollectionCard from '$lib/components/cards/CollectionCard.svelte';
|
||||
import CollectionModal from '$lib/components/CollectionModal.svelte';
|
||||
import type { Collection, CollectionInvite, SlimCollection } from '$lib/types';
|
||||
import type { Collection, SlimCollection } from '$lib/types';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
import Plus from '~icons/mdi/plus';
|
||||
import Filter from '~icons/mdi/filter-variant';
|
||||
import Sort from '~icons/mdi/sort';
|
||||
import Archive from '~icons/mdi/archive';
|
||||
import Share from '~icons/mdi/share-variant';
|
||||
import CollectionIcon from '~icons/mdi/folder-multiple';
|
||||
import MailIcon from '~icons/mdi/email';
|
||||
import CheckIcon from '~icons/mdi/check';
|
||||
import CloseIcon from '~icons/mdi/close';
|
||||
import { addToast } from '$lib/toasts';
|
||||
import DeleteWarning from '$lib/components/DeleteWarning.svelte';
|
||||
|
||||
@@ -28,7 +24,7 @@
|
||||
let newType: string = '';
|
||||
let resultsPerPage: number = 25;
|
||||
let isShowingCollectionModal: boolean = false;
|
||||
let activeView: 'owned' | 'shared' | 'archived' | 'invites' = 'owned';
|
||||
let activeView: 'collections' | 'archived' = 'collections';
|
||||
|
||||
let next: string | null = data.props.next || null;
|
||||
let previous: string | null = data.props.previous || null;
|
||||
@@ -39,35 +35,19 @@
|
||||
let orderDirection = data.props.order_direction || 'asc';
|
||||
let statusFilter = data.props.status || '';
|
||||
|
||||
let invites: CollectionInvite[] = data.props.invites || [];
|
||||
|
||||
let sidebarOpen = false;
|
||||
let collectionToEdit: Collection | null = null;
|
||||
|
||||
$: currentCollections =
|
||||
activeView === 'owned'
|
||||
? collections
|
||||
: activeView === 'shared'
|
||||
? sharedCollections
|
||||
: activeView === 'archived'
|
||||
? archivedCollections
|
||||
: [];
|
||||
$: mergedCollections = [...collections, ...sharedCollections].filter(
|
||||
(collection, index, list) => index === list.findIndex((entry) => entry.id === collection.id)
|
||||
);
|
||||
|
||||
$: currentCount =
|
||||
activeView === 'owned'
|
||||
? collections.length
|
||||
: activeView === 'shared'
|
||||
? sharedCollections.length
|
||||
: activeView === 'archived'
|
||||
? archivedCollections.length
|
||||
: activeView === 'invites'
|
||||
? invites.length
|
||||
: 0;
|
||||
$: currentCollections = activeView === 'collections' ? mergedCollections : archivedCollections;
|
||||
|
||||
// Optionally, keep count in sync with collections only for owned view
|
||||
// Keep count in sync with collections view
|
||||
$: {
|
||||
if (activeView === 'owned' && count !== collections.length) {
|
||||
count = collections.length;
|
||||
if (activeView === 'collections' && count !== mergedCollections.length) {
|
||||
count = mergedCollections.length;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -200,7 +180,7 @@
|
||||
(collection) => collection.id !== duplicatedCollection.id
|
||||
);
|
||||
|
||||
activeView = 'owned';
|
||||
activeView = 'collections';
|
||||
}
|
||||
|
||||
async function editCollection(event: CustomEvent<SlimCollection>) {
|
||||
@@ -252,86 +232,9 @@
|
||||
sidebarOpen = !sidebarOpen;
|
||||
}
|
||||
|
||||
function switchView(view: 'owned' | 'shared' | 'archived' | 'invites') {
|
||||
function switchView(view: 'collections' | 'archived') {
|
||||
activeView = view;
|
||||
}
|
||||
|
||||
// Invite functions
|
||||
async function acceptInvite(invite: CollectionInvite) {
|
||||
try {
|
||||
const res = await fetch(`/api/collections/${invite.collection}/accept-invite/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
// Try to parse returned collection data
|
||||
let data: any = null;
|
||||
try {
|
||||
data = await res.json();
|
||||
} catch (e) {
|
||||
data = null;
|
||||
}
|
||||
|
||||
// Remove invite from list
|
||||
invites = invites.filter((i) => i.id !== invite.id);
|
||||
addToast('success', `${$t('invites.accepted')} "${invite.name}"`);
|
||||
|
||||
// If API returned the accepted collection, add it to sharedCollections immediately
|
||||
if (data && (data.collection || data.result || data.id)) {
|
||||
// Normalize expected shapes: {collection: {...}} or collection object directly
|
||||
const newCollection = data.collection ? data.collection : data;
|
||||
// Prepend so it's visible at top
|
||||
sharedCollections = [newCollection as SlimCollection, ...sharedCollections];
|
||||
} else {
|
||||
// Fallback: refresh shared collections from API
|
||||
try {
|
||||
const sharedRes = await fetch(`/api/collections/shared/?nested=true`);
|
||||
if (sharedRes.ok) {
|
||||
const sharedData = await sharedRes.json();
|
||||
// Prefer results if paginated
|
||||
sharedCollections = sharedData.results ? sharedData.results : sharedData;
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore fallback errors; user already got success toast
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const error = await res.json();
|
||||
addToast('error', error.error || $t('invites.accept_failed'));
|
||||
}
|
||||
} catch (error) {
|
||||
addToast('error', $t('invites.accept_failed'));
|
||||
}
|
||||
}
|
||||
|
||||
async function declineInvite(invite: CollectionInvite) {
|
||||
try {
|
||||
const res = await fetch(`/api/collections/${invite.collection}/decline-invite/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
// Remove invite from list
|
||||
invites = invites.filter((i) => i.id !== invite.id);
|
||||
addToast('success', `${$t('invites.declined')} "${invite.name}"`);
|
||||
} else {
|
||||
const error = await res.json();
|
||||
addToast('error', error.error || $t('invites.decline_failed'));
|
||||
}
|
||||
} catch (error) {
|
||||
addToast('error', $t('invites.decline_failed'));
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(dateString: string): string {
|
||||
return new Date(dateString).toLocaleDateString('en-GB');
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -406,25 +309,14 @@
|
||||
<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'
|
||||
'collections'
|
||||
? 'border-primary text-primary'
|
||||
: 'border-transparent text-base-content/60 hover:text-base-content'}"
|
||||
on:click={() => switchView('owned')}
|
||||
on:click={() => switchView('collections')}
|
||||
>
|
||||
<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>
|
||||
<span class="hidden sm:inline">{$t('navbar.collections')}</span>
|
||||
<div class="badge badge-sm badge-ghost">{mergedCollections.length}</div>
|
||||
</button>
|
||||
<button
|
||||
class="tab px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap {activeView ===
|
||||
@@ -437,121 +329,33 @@
|
||||
<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>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container mx-auto px-6 py-8">
|
||||
{#if activeView === 'invites'}
|
||||
<!-- Invites Content -->
|
||||
{#if invites.length === 0}
|
||||
<div class="flex flex-col items-center justify-center py-16">
|
||||
<div class="p-6 bg-base-200/50 rounded-2xl mb-6">
|
||||
<MailIcon class="w-16 h-16 text-base-content/30" />
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-base-content/70 mb-2">
|
||||
{$t('invites.no_invites')}
|
||||
</h3>
|
||||
<p class="text-base-content/50 text-center max-w-md">
|
||||
{$t('invites.no_invites_desc')}
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-4">
|
||||
{#each invites as invite}
|
||||
<div
|
||||
class="card bg-base-100 shadow-lg border border-base-300 hover:shadow-xl transition-shadow"
|
||||
>
|
||||
<div class="card-body p-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="p-2 bg-primary/10 rounded-lg">
|
||||
<CollectionIcon class="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg">
|
||||
{invite.name}
|
||||
</h3>
|
||||
<p class="text-xs text-base-content/50">
|
||||
{$t('invites.invited_on')}
|
||||
{formatDate(invite.created_at)}
|
||||
{$t('invites.by')}
|
||||
{invite.collection_owner_username || ''}
|
||||
({invite.collection_user_first_name || ''}
|
||||
{invite.collection_user_last_name || ''})
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2 ml-4">
|
||||
<button
|
||||
class="btn btn-success btn-sm gap-2"
|
||||
on:click={() => acceptInvite(invite)}
|
||||
>
|
||||
<CheckIcon class="w-4 h-4" />
|
||||
{$t('invites.accept')}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-error btn-sm btn-outline gap-2"
|
||||
on:click={() => declineInvite(invite)}
|
||||
>
|
||||
<CloseIcon class="w-4 h-4" />
|
||||
{$t('invites.decline')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{:else if currentCollections.length === 0}
|
||||
{#if currentCollections.length === 0}
|
||||
<!-- Empty State for Collections -->
|
||||
<div class="flex flex-col items-center justify-center py-16">
|
||||
<div class="p-6 bg-base-200/50 rounded-2xl mb-6">
|
||||
{#if activeView === 'owned'}
|
||||
{#if activeView === 'collections'}
|
||||
<CollectionIcon class="w-16 h-16 text-base-content/30" />
|
||||
{:else if activeView === 'shared'}
|
||||
<Share class="w-16 h-16 text-base-content/30" />
|
||||
{:else}
|
||||
<Archive class="w-16 h-16 text-base-content/30" />
|
||||
{/if}
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-base-content/70 mb-2">
|
||||
{activeView === 'owned'
|
||||
{activeView === 'collections'
|
||||
? $t('collection.no_collections_yet')
|
||||
: activeView === 'shared'
|
||||
? $t('collection.no_shared_collections')
|
||||
: $t('collection.no_archived_collections')}
|
||||
</h3>
|
||||
<p class="text-base-content/50 text-center max-w-md">
|
||||
{activeView === 'owned'
|
||||
{activeView === 'collections'
|
||||
? $t('collection.create_first')
|
||||
: activeView === 'shared'
|
||||
? $t('collection.make_sure_public')
|
||||
: $t('collection.archived_appear_here')}
|
||||
</p>
|
||||
{#if activeView === 'owned'}
|
||||
{#if activeView === 'collections'}
|
||||
<button
|
||||
class="btn btn-primary btn-wide mt-6 gap-2"
|
||||
on:click={() => {
|
||||
@@ -587,7 +391,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{#if activeView === 'owned' && (next || previous)}
|
||||
{#if activeView === 'collections' && (next || previous)}
|
||||
<div class="flex justify-center mt-12">
|
||||
<div class="join bg-base-100 shadow-lg rounded-2xl p-2">
|
||||
{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
|
||||
@@ -620,10 +424,8 @@
|
||||
<h2 class="text-xl font-bold">{$t('adventures.filters_and_sort')}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Only show sort options for collection views, not invites -->
|
||||
{#if activeView !== 'invites'}
|
||||
<!-- Status Filter -->
|
||||
<div class="card bg-base-200/50 p-4 mb-4">
|
||||
<!-- Status Filter -->
|
||||
<div class="card bg-base-200/50 p-4 mb-4">
|
||||
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
|
||||
<Filter class="w-5 h-5" />
|
||||
{$t('adventures.status_filter')}
|
||||
@@ -681,10 +483,10 @@
|
||||
<span class="label-text">✓ {$t('adventures.completed')}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sort Form - Updated to use URL navigation -->
|
||||
<div class="card bg-base-200/50 p-4">
|
||||
<!-- Sort Form - Updated to use URL navigation -->
|
||||
<div class="card bg-base-200/50 p-4">
|
||||
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
|
||||
<Sort class="w-5 h-5" />
|
||||
{$t(`adventures.sort`)}
|
||||
@@ -755,15 +557,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Action Button -->
|
||||
{#if activeView === 'owned'}
|
||||
{#if activeView === 'collections'}
|
||||
<div class="fixed bottom-6 right-6 z-50">
|
||||
<div class="dropdown dropdown-top dropdown-end">
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user