feat: knowledge directory
This commit is contained in:
Timothy Jaeryang Baek
@@ -0,0 +1,174 @@
|
||||
<script lang="ts">
|
||||
import dayjs from '$lib/dayjs';
|
||||
import duration from 'dayjs/plugin/duration';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
|
||||
dayjs.extend(duration);
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
import { getContext } from 'svelte';
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Dropdown from '$lib/components/common/Dropdown.svelte';
|
||||
import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
|
||||
import Pencil from '$lib/components/icons/Pencil.svelte';
|
||||
import Folder from '$lib/components/icons/Folder.svelte';
|
||||
import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
|
||||
|
||||
export let directory: {
|
||||
id: string;
|
||||
name: string;
|
||||
created_at: number;
|
||||
updated_at: number;
|
||||
};
|
||||
export let writeAccess = false;
|
||||
|
||||
export let onNavigate: (id: string) => void = () => {};
|
||||
export let onRename: (id: string, name: string) => void = () => {};
|
||||
export let onDelete: (id: string) => void = () => {};
|
||||
export let onFileDrop: (fileId: string, directoryId: string) => void = () => {};
|
||||
|
||||
let editing = false;
|
||||
let editName = '';
|
||||
let editInput: HTMLInputElement;
|
||||
let dragOver = false;
|
||||
let showDropdown = false;
|
||||
|
||||
const startRename = () => {
|
||||
editName = directory.name;
|
||||
editing = true;
|
||||
showDropdown = false;
|
||||
setTimeout(() => editInput?.select(), 0);
|
||||
};
|
||||
|
||||
const submitRename = () => {
|
||||
if (!editName.trim() || editName === directory.name) {
|
||||
editing = false;
|
||||
return;
|
||||
}
|
||||
onRename(directory.id, editName.trim());
|
||||
editing = false;
|
||||
};
|
||||
|
||||
const cancelRename = () => {
|
||||
editing = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="group flex cursor-pointer w-full px-2 bg-transparent dark:hover:bg-gray-850/50 hover:bg-white rounded-xl transition
|
||||
{dragOver
|
||||
? 'bg-gray-100 dark:bg-gray-800 ring-1 ring-gray-300 dark:ring-gray-600'
|
||||
: 'hover:bg-gray-100 dark:hover:bg-gray-850'}"
|
||||
on:dblclick={() => {
|
||||
if (writeAccess) startRename();
|
||||
}}
|
||||
on:dragover={(e) => {
|
||||
if (!e.dataTransfer?.types.includes('application/x-kb-file-move')) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragOver = true;
|
||||
}}
|
||||
on:dragleave={() => {
|
||||
dragOver = false;
|
||||
}}
|
||||
on:drop={(e) => {
|
||||
const raw = e.dataTransfer?.getData('application/x-kb-file-move');
|
||||
if (!raw) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragOver = false;
|
||||
try {
|
||||
const data = JSON.parse(raw);
|
||||
onFileDrop(data.fileId, directory.id);
|
||||
} catch {}
|
||||
}}
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="p-1 rounded-full transition"
|
||||
type="button"
|
||||
on:click={() => onNavigate(directory.id)}
|
||||
>
|
||||
<Folder className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="relative flex items-center gap-1 rounded-xl p-2 text-left flex-1 justify-between"
|
||||
type="button"
|
||||
on:click={() => onNavigate(directory.id)}
|
||||
>
|
||||
<div>
|
||||
<div class="flex gap-2 items-center line-clamp-1">
|
||||
{#if editing}
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<input
|
||||
bind:this={editInput}
|
||||
bind:value={editName}
|
||||
class="text-sm bg-transparent border border-gray-300 dark:border-gray-600 rounded px-1 py-0 outline-none focus:ring-1 focus:ring-gray-400"
|
||||
on:keydown={(e) => {
|
||||
if (e.key === 'Enter') submitRename();
|
||||
if (e.key === 'Escape') cancelRename();
|
||||
}}
|
||||
on:blur={submitRename}
|
||||
on:click={(e) => e.stopPropagation()}
|
||||
autofocus
|
||||
/>
|
||||
{:else}
|
||||
<div class="line-clamp-1 text-sm">
|
||||
{directory.name}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
{#if directory.updated_at}
|
||||
<Tooltip content={dayjs(directory.updated_at * 1000).format('LLLL')}>
|
||||
<div class="text-xs text-gray-400">
|
||||
{dayjs(directory.updated_at * 1000).fromNow()}
|
||||
</div>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{#if writeAccess}
|
||||
<div class="flex items-center">
|
||||
<Dropdown bind:show={showDropdown} align="end" sideOffset={4}>
|
||||
<button
|
||||
class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-850 transition"
|
||||
type="button"
|
||||
>
|
||||
<EllipsisHorizontal className="size-3.5" />
|
||||
</button>
|
||||
|
||||
<div slot="content">
|
||||
<div
|
||||
class="min-w-[140px] rounded-2xl p-1 z-[9999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
|
||||
on:click={() => startRename()}
|
||||
>
|
||||
<Pencil className="size-3.5" />
|
||||
{$i18n.t('Rename')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
|
||||
on:click={() => onDelete(directory.id)}
|
||||
>
|
||||
<GarbageBin className="size-3.5" />
|
||||
{$i18n.t('Delete')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user