refac

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

@@ -14,6 +14,7 @@
 	export let align: 'start' | 'end' = 'start';
 	export let onEdit = () => {};
 	export let onExport = () => {};
+	export let onShare = () => {};
 	export let onDelete = () => {};
 	export let onCreateSubFolder = () => {};
 
@@ -76,6 +77,20 @@
 				<div class="flex items-center">{$i18n.t('Export')}</div>
 			</button>
 
+			<button
+				class="flex gap-2 items-center px-3 py-1.5 text-sm select-none cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				on:click={() => {
+					onShare();
+				}}
+			>
+				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.935-2.186 2.25 2.25 0 0 0-3.935 2.186Z" />
+				</svg>
+				<div class="flex items-center">{$i18n.t('Share')}</div>
+			</button>
+
+			<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
+
 			<button
 				class="flex gap-2 items-center px-3 py-1.5 text-sm select-none cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
 				on:click={() => {

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

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import Modal from '$lib/components/common/Modal.svelte';
+	import AccessControl from '$lib/components/workspace/common/AccessControl.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
+	import { updateFolderAccessById } from '$lib/apis/folders';
+	import { user } from '$lib/stores';
+
+	type AccessGrant = {
+		id?: string;
+		principal_type: 'user' | 'group';
+		principal_id: string;
+		permission: 'read' | 'write';
+	};
+
+	export let show = false;
+	export let folder: any = null;
+
+	let accessGrants: AccessGrant[] = [];
+
+	$: if (folder) {
+		accessGrants = folder.access_grants ?? [];
+	}
+
+	const handleAccessChange = async () => {
+		if (!folder) return;
+		try {
+			const res = await updateFolderAccessById(localStorage.token, folder.id, accessGrants);
+			if (res) {
+				accessGrants = res.access_grants ?? accessGrants;
+			}
+		} catch (e) {
+			console.error('Failed to update folder access', e);
+		}
+	};
+</script>
+
+<Modal size="sm" bind:show>
+	<div>
+		<div class=" flex justify-between dark:text-gray-100 px-5 pt-3 pb-1">
+			<div class=" text-lg font-medium self-center font-primary">
+				{$i18n.t('Share')}: {folder?.name ?? ''}
+			</div>
+			<button
+				class="self-center"
+				on:click={() => {
+					show = false;
+				}}
+			>
+				<XMark className={'size-5'} />
+			</button>
+		</div>
+
+		<div class="w-full px-5 pb-4 dark:text-white">
+			<AccessControl
+				bind:accessGrants
+				onChange={handleAccessChange}
+				accessRoles={['read', 'write']}
+				share={$user?.role === 'admin' || $user?.permissions?.sharing?.folders}
+				sharePublic={false}
+				shareUsers={$user?.role === 'admin' || $user?.permissions?.access_grants?.allow_users}
+			/>
+		</div>
+	</div>
+</Modal>