refac

src/lib/components/chat/Placeholder/FolderTitle.svelte

@@ -9,7 +9,7 @@
 
 	import { toast } from 'svelte-sonner';
 
-	import { selectedFolder, user } from '$lib/stores';
+	import { selectedFolder } from '$lib/stores';
 
 	import {
 		deleteFolderById,
@@ -20,7 +20,6 @@
 	import { getChatsByFolderId } from '$lib/apis/chats';
 
 	import FolderModal from '$lib/components/layout/Sidebar/Folders/FolderModal.svelte';
-	import FolderShareModal from '$lib/components/layout/Sidebar/Folders/FolderShareModal.svelte';
 
 	import Folder from '$lib/components/icons/Folder.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
@@ -38,7 +37,6 @@
 
 	let showFolderModal = false;
 	let showCreateSubFolderModal = false;
-	let showShareModal = false;
 	let showDeleteConfirm = false;
 	let deleteFolderContents = true;
 
@@ -177,8 +175,6 @@
 		onSubmit={createSubFolderHandler}
 	/>
 
-	<FolderShareModal bind:show={showShareModal} {folder} />
-
 	<DeleteConfirmDialog
 		bind:show={showDeleteConfirm}
 		title={$i18n.t('Delete folder?')}
@@ -247,14 +243,10 @@
 		{#if !readOnly}
 			<div class="flex items-center translate-x-2.5">
 				<FolderMenu
-					canShare={$user?.role === 'admin' || folder.user_id === $user?.id}
 					align="end"
 					onEdit={() => {
 						showFolderModal = true;
 					}}
-					onShare={() => {
-						showShareModal = true;
-					}}
 					onDelete={() => {
 						showDeleteConfirm = true;
 					}}

src/lib/components/layout/Sidebar/Folders/FolderMenu.svelte

@@ -8,7 +8,6 @@
 	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import EditPencil from '../icons/EditPencil.svelte';
 	import FolderIcon from '../icons/Folder.svelte';
-	import ShareIcon from '../icons/Share.svelte';
 	import TrashIcon from '../icons/Trash.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Download from '../icons/Download.svelte';
@@ -17,8 +16,6 @@
 	export let align: 'start' | 'end' = 'start';
 	export let onEdit = () => {};
 	export let onExport = () => {};
-	export let onShare = () => {};
-	export let canShare = false;
 	export let onDelete = () => {};
 	export let onCreateSubFolder = () => {};
 	export let onMarkAllRead = () => {};
@@ -93,18 +90,6 @@
 				<div class="flex items-center">{$i18n.t('Export')}</div>
 			</button>
 
-			{#if canShare}
-				<button
-					class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] select-none cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900"
-					on:click={() => {
-						onShare();
-					}}
-				>
-					<ShareIcon className="size-3.5" />
-					<div class="flex items-center">{$i18n.t('Share')}</div>
-				</button>
-			{/if}
-
 			<hr class="border-gray-50/30 dark:border-gray-800/30 mx-1 my-0.5" />
 
 			<button

src/lib/components/layout/Sidebar/Folders/FolderModal.svelte

@@ -5,6 +5,8 @@
 
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import Modal from '$lib/components/common/Modal.svelte';
+	import AccessButton from '$lib/components/common/AccessButton.svelte';
+	import FolderShareModal from './FolderShareModal.svelte';
 	import XMark from '../icons/XMark.svelte';
 
 	import { toast } from 'svelte-sonner';
@@ -37,6 +39,7 @@
 	};
 
 	let loading = false;
+	let showAccessModal = false;
 
 	const submitHandler = async () => {
 		loading = true;
@@ -60,7 +63,12 @@
 		await onSubmit({
 			name,
 			meta,
-			data,
+			// Sharing saves separately; do not overwrite its mode with the editor's snapshot.
+			data: {
+				model_ids: data.model_ids,
+				system_prompt: data.system_prompt,
+				files: data.files
+			},
 			parent_id: edit ? undefined : parentId
 		});
 		show = false;
@@ -68,11 +76,13 @@
 	};
 
 	const init = async () => {
+		folder = null;
 		if (folderId) {
 			folder = await getFolderById(localStorage.token, folderId).catch((error) => {
 				toast.error(`${error}`);
 				return null;
 			});
+			if (!folder) return;
 
 			name = folder.name;
 			meta = folder.meta || {
@@ -101,6 +111,7 @@
 	$: if (show) {
 		init();
 	}
+	$: if (!show) showAccessModal = false;
 
 	$: if (!show && !edit) {
 		name = '';
@@ -125,15 +136,20 @@
 					{$i18n.t('Create Folder')}
 				{/if}
 			</div>
-			<button
-				aria-label={$i18n.t('Close')}
-				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-				on:click={() => {
-					show = false;
-				}}
-			>
-				<XMark className={'size-4'} />
-			</button>
+			<div class="flex items-center gap-1">
+				{#if edit && folder && ($user?.role === 'admin' || folder.user_id === $user?.id)}
+					<AccessButton disabled={loading} on:click={() => (showAccessModal = true)} />
+				{/if}
+				<button
+					aria-label={$i18n.t('Close')}
+					class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+					on:click={() => {
+						show = false;
+					}}
+				>
+					<XMark className={'size-4'} />
+				</button>
+			</div>
 		</div>
 
 		<div class="flex flex-col md:flex-row w-full px-4 pb-4 md:space-x-4 dark:text-gray-200">
@@ -306,3 +322,7 @@
 		</div>
 	</div>
 </Modal>
+
+{#if show && edit && folder && ($user?.role === 'admin' || folder.user_id === $user?.id)}
+	<FolderShareModal bind:show={showAccessModal} {folder} />
+{/if}

src/lib/components/layout/Sidebar/Folders/FolderShareModal.svelte

@@ -68,9 +68,10 @@
 	<div>
 		<div class=" flex justify-between dark:text-gray-100 px-5 pt-3 pb-1">
 			<div class=" text-sm self-center">
-				{$i18n.t('Share')}: {folder?.name ?? ''}
+				{$i18n.t('Access')}: {folder?.name ?? ''}
 			</div>
 			<button
+				aria-label={$i18n.t('Close')}
 				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;

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

@@ -47,7 +47,6 @@
 	import ChatItem from './ChatItem.svelte';
 	import FolderHoverPreview from './FolderHoverPreview.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';
@@ -73,7 +72,6 @@
 
 	let openPreview = false;
 	let showFolderModal = false;
-	let showShareModal = false;
 	let edit = false;
 
 	let showCreateSubFolderModal = false;
@@ -84,15 +82,7 @@
 
 	let clickTimer = null;
 
-	$: if (
-		$mobile ||
-		edit ||
-		dragged ||
-		parentDragged ||
-		draggedOver ||
-		showFolderModal ||
-		showShareModal
-	) {
+	$: if ($mobile || edit || dragged || parentDragged || draggedOver || showFolderModal) {
 		openPreview = false;
 	}
 
@@ -742,8 +732,6 @@
 	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">
@@ -922,13 +910,9 @@
 						on:pointerdown={() => (openPreview = false)}
 					>
 						<FolderMenu
-							canShare={$user?.role === 'admin' || !folders[folderId]?.shared}
 							onEdit={() => {
 								showFolderModal = true;
 							}}
-							onShare={() => {
-								showShareModal = true;
-							}}
 							onDelete={() => {
 								showDeleteConfirm = true;
 							}}