refac

src/lib/components/layout/Sidebar/RecursiveFolder.svelte

@@ -19,7 +19,8 @@
 		updateFolderById,
 		updateFolderParentIdById,
 		getFolderById,
-		createNewFolder
+		createNewFolder,
+		getSharedFolderChats
 	} from '$lib/apis/folders';
 	import {
 		getChatById,
@@ -39,6 +40,7 @@
 
 	import ChatItem from './ChatItem.svelte';
 	import FolderMenu from './Folders/FolderMenu.svelte';
+	import FolderShareModal from './Folders/FolderShareModal.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import FolderModal from './Folders/FolderModal.svelte';
 	import Emoji from '$lib/components/common/Emoji.svelte';
@@ -63,6 +65,7 @@
 	let folderElement;
 
 	let showFolderModal = false;
+	let showShareModal = false;
 	let edit = false;
 
 	let showCreateSubFolderModal = false;
@@ -78,7 +81,7 @@
 	const onDragOver = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
-		if (dragged || parentDragged) {
+		if (dragged || parentDragged || folders[folderId]?.shared) {
 			return;
 		}
 		draggedOver = true;
@@ -374,10 +377,18 @@
 	export const setFolderItems = async () => {
 		await tick();
 		if (open) {
-			chats = await getChatListByFolderId(localStorage.token, folderId).catch((error) => {
-				toast.error(`${error}`);
-				return [];
-			});
+			// Always use getSharedFolderChats so owners also see chats
+			// created by users who have write access to this folder.
+			try {
+				const res = await getSharedFolderChats(localStorage.token, folderId);
+				chats = res?.chats ?? [];
+			} catch (error) {
+				// Fallback to regular API
+				chats = await getChatListByFolderId(localStorage.token, folderId).catch((error) => {
+					toast.error(`${error}`);
+					return [];
+				});
+			}
 		} else {
 			chats = null;
 		}
@@ -478,6 +489,8 @@
 	onSubmit={createSubFolderHandler}
 />
 
+<FolderShareModal bind:show={showShareModal} folder={folders[folderId]} />
+
 {#if dragged && x && y}
 	<DragGhost {x} {y}>
 		<div class=" bg-black/80 backdrop-blur-2xl px-2 py-1 rounded-lg w-fit max-w-40">
@@ -491,7 +504,7 @@
 	</DragGhost>
 {/if}
 
-<div bind:this={folderElement} class="relative {className}" draggable="true">
+<div bind:this={folderElement} class="relative {className}" draggable="{!folders[folderId]?.shared}">
 	{#if draggedOver}
 		<div
 			class="absolute top-0 left-0 w-full h-full rounded-xs bg-gray-100/50 dark:bg-gray-700/20 bg-opacity-50 dark:bg-opacity-10 z-50 pointer-events-none touch-none"
@@ -515,6 +528,7 @@
 					? 'bg-gray-100 dark:bg-gray-900 selected'
 					: ''}"
 				on:dblclick={(e) => {
+					if (folders[folderId]?.shared) return;
 					if (clickTimer) {
 						clearTimeout(clickTimer); // cancel the single-click action
 						clickTimer = null;
@@ -614,29 +628,34 @@
 					{/if}
 				</div>
 
-				<button
-					class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
-				>
-					<FolderMenu
-						onEdit={() => {
-							showFolderModal = true;
-						}}
-						onDelete={() => {
-							showDeleteConfirm = true;
-						}}
-						onExport={() => {
-							exportHandler();
-						}}
-						onCreateSubFolder={() => {
-							createSubFolderParentId = folderId;
-							showCreateSubFolderModal = true;
-						}}
+				{#if !folders[folderId]?.shared}
+					<button
+						class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
 					>
-						<div class="p-1 dark:hover:bg-gray-850 rounded-lg touch-auto">
-							<EllipsisHorizontal className="size-4" strokeWidth="2.5" />
-						</div>
-					</FolderMenu>
-				</button>
+						<FolderMenu
+							onEdit={() => {
+								showFolderModal = true;
+							}}
+							onShare={() => {
+								showShareModal = true;
+							}}
+							onDelete={() => {
+								showDeleteConfirm = true;
+							}}
+							onExport={() => {
+								exportHandler();
+							}}
+							onCreateSubFolder={() => {
+								createSubFolderParentId = folderId;
+								showCreateSubFolderModal = true;
+							}}
+						>
+							<div class="p-1 dark:hover:bg-gray-850 rounded-lg touch-auto">
+								<EllipsisHorizontal className="size-4" strokeWidth="2.5" />
+							</div>
+						</FolderMenu>
+					</button>
+				{/if}
 			</div>
 		</div>