bruno
f8350f8161
Both sidebar and workspace page DnD handlers now use @drop.prevent to stop browser's default text insertion behavior. Without .prevent, the browser tries to navigate to the dragged text as a URL, breaking the drop event.
257 lines
12 KiB
HTML
257 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
{% block page_title %}{{ workspace_name }}{% endblock %}
|
|
{% block page_icon %}📁{% endblock %}
|
|
|
|
{% block topbar %}
|
|
<header class="topbar">
|
|
<div class="topbar-left">
|
|
<span class="breadcrumb" style="color:rgba(255,255,255,.5)">Workspace</span>
|
|
<span class="page-title-topbar">{{ workspace_name }}</span>
|
|
</div>
|
|
<div class="topbar-right"></div>
|
|
</header>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
.ws-layout{max-width:800px;margin:0 auto;padding:40px 24px;}
|
|
.ws-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
|
|
.ws-header h1{font-size:24px;}
|
|
.ws-toolbar{display:flex;gap:8px;}
|
|
|
|
.ws-tree{list-style:none;margin:0;padding:0;}
|
|
.ws-tree-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;cursor:grab;transition:background 150ms;border:1px solid transparent;margin-bottom:2px;}
|
|
.ws-tree-item:hover{background:var(--bg-tertiary);border-color:var(--border);}
|
|
.ws-tree-item.dragging{opacity:.3;}
|
|
.ws-tree-item.drop-target{background:rgba(35,131,226,.1);outline:2px dashed var(--accent);}
|
|
.ws-tree-item .icon{font-size:16px;width:20px;text-align:center;flex-shrink:0;}
|
|
.ws-tree-item .name{flex:1;font-size:14px;color:var(--text);}
|
|
.ws-tree-item .actions{display:none;gap:2px;}
|
|
.ws-tree-item:hover .actions{display:flex;}
|
|
.ws-tree-item .chevron{width:14px;font-size:11px;color:var(--text-tertiary);cursor:pointer;flex-shrink:0;}
|
|
.ws-tree-item .chevron:hover{color:var(--text);}
|
|
.ws-tree-children{margin:0;padding:0;}
|
|
|
|
.ws-act{background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:3px 6px;border-radius:4px;font-size:11px;}
|
|
.ws-act:hover{background:var(--bg-hover);color:var(--text);}
|
|
.ws-act.danger:hover{color:var(--danger);}
|
|
|
|
.empty-state{text-align:center;padding:80px 20px;color:var(--text-tertiary);}
|
|
.empty-state .empty-icon{font-size:64px;margin-bottom:16px;opacity:.5;}
|
|
.empty-state h2{font-size:18px;color:var(--text-secondary);margin-bottom:8px;}
|
|
.empty-state p{font-size:13px;margin-bottom:24px;max-width:400px;margin-left:auto;margin-right:auto;}
|
|
.empty-actions{display:flex;gap:10px;justify-content:center;}
|
|
|
|
.btn{padding:10px 20px;border-radius:8px;font-size:13px;cursor:pointer;border:none;font-weight:500;}
|
|
.btn-primary{background:var(--accent);color:#fff;}
|
|
.btn-primary:hover{background:var(--accent-hover);}
|
|
.btn-secondary{background:var(--bg-tertiary);color:var(--text);border:1px solid var(--border);}
|
|
.btn-secondary:hover{background:var(--bg-hover);}
|
|
.btn-danger{background:rgba(255,80,80,.1);color:var(--danger);}
|
|
.btn-danger:hover{background:rgba(255,80,80,.2);}
|
|
|
|
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:999;backdrop-filter:blur(4px);}
|
|
.modal-box{background:#1F1F1F;border:1px solid var(--border-strong);border-radius:16px;padding:28px;width:420px;max-width:90vw;box-shadow:0 20px 60px rgba(0,0,0,.5);}
|
|
.modal-box h3{font-size:16px;margin-bottom:6px;display:flex;align-items:center;gap:8px;}
|
|
.modal-box .modal-sub{font-size:12px;color:var(--text-tertiary);margin-bottom:20px;}
|
|
.modal-input{width:100%;padding:12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:14px;outline:none;}
|
|
.modal-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(35,131,226,.15);}
|
|
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;}
|
|
.delete-confirm{padding:12px;background:rgba(255,80,80,.08);border-radius:8px;margin-top:12px;font-size:13px;color:var(--text-secondary);}
|
|
</style>
|
|
|
|
<div class="ws-layout" x-data="wsPage()" @dragover.prevent>
|
|
|
|
<div class="ws-header">
|
|
<h1>📁 {{ workspace_name }}</h1>
|
|
<div class="ws-toolbar">
|
|
<button class="btn btn-primary" @click="openCreateModal('file')">📄 New File</button>
|
|
<button class="btn btn-secondary" @click="openCreateModal('folder')">📁 New Folder</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recursive tree -->
|
|
<ul class="ws-tree" x-show="tree.length">
|
|
<template x-for="node in tree" :key="node.id">
|
|
<li>
|
|
<div class="ws-tree-item"
|
|
:data-id="node.db_id"
|
|
:data-is-folder="node.is_folder"
|
|
draggable="true"
|
|
:style="{paddingLeft: (8 + node.depth * 20) + 'px'}"
|
|
@dragstart="dragStart($event, node.db_id)"
|
|
@dragover.prevent="dragOver($event, node.db_id, node.is_folder)"
|
|
@dragleave="dragLeave($event)"
|
|
@drop.prevent="doDrop($event, node.db_id)">
|
|
<span class="chevron" x-show="node.is_folder" @click.stop="toggleFolder(node)">▶</span>
|
|
<span class="icon" x-text="node.icon"></span>
|
|
<span class="name" x-text="node.name" @dblclick="rename(node)"></span>
|
|
<div class="actions">
|
|
<template x-if="node.is_folder">
|
|
<div style="display:flex;gap:2px;">
|
|
<button class="ws-act" @click.stop="openCreateModal('file', node)" title="New file">📄</button>
|
|
<button class="ws-act" @click.stop="openCreateModal('folder', node)" title="New folder">📁</button>
|
|
</div>
|
|
</template>
|
|
<button class="ws-act" @click.stop="openItem(node)" title="Open">Open</button>
|
|
<button class="ws-act" @click.stop="rename(node)" title="Rename">✏️</button>
|
|
<button class="ws-act danger" @click.stop="confirmDelete(node)" title="Delete">🗑</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
|
|
<!-- Empty state -->
|
|
<div class="empty-state" x-show="!tree.length">
|
|
<div class="empty-icon">📁</div>
|
|
<h2>Empty workspace</h2>
|
|
<p>Create a new file or folder to get started</p>
|
|
<div class="empty-actions">
|
|
<button class="btn btn-primary" @click="openCreateModal('file')">📄 New File</button>
|
|
<button class="btn btn-secondary" @click="openCreateModal('folder')">📁 New Folder</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Modal -->
|
|
<div class="modal-overlay" x-show="showCreateModal" @click.away="showCreateModal=false" @keydown.escape="showCreateModal=false">
|
|
<div class="modal-box">
|
|
<h3><span x-text="createType==='folder'?'📁':'📄'"></span> <span x-text="createType==='folder'?'New Folder':'New File'"></span></h3>
|
|
<p class="modal-sub">Create in <strong>{{ workspace_name }}</strong><span x-show="parentFolder"> / <span x-text="parentFolder?.name"></span></span></p>
|
|
<input class="modal-input" x-model="newName" :placeholder="createType==='folder'?'Folder name':'File name'" @keydown.enter="doCreate" x-ref="createInput">
|
|
<div class="modal-actions">
|
|
<button class="btn btn-secondary" @click="showCreateModal=false">Cancel</button>
|
|
<button class="btn btn-primary" @click="doCreate" :disabled="!newName.trim()">Create</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rename Modal -->
|
|
<div class="modal-overlay" x-show="showRenameModal" @click.away="showRenameModal=false" @keydown.escape="showRenameModal=false">
|
|
<div class="modal-box">
|
|
<h3>✏️ Rename</h3>
|
|
<p class="modal-sub">Rename <strong x-text="renameTarget?.name"></strong></p>
|
|
<input class="modal-input" x-model="newName" @keydown.enter="doRename" x-ref="renameInput">
|
|
<div class="modal-actions">
|
|
<button class="btn btn-secondary" @click="showRenameModal=false">Cancel</button>
|
|
<button class="btn btn-primary" @click="doRename">Rename</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Modal -->
|
|
<div class="modal-overlay" x-show="showDeleteModal" @click.away="showDeleteModal=false" @keydown.escape="showDeleteModal=false">
|
|
<div class="modal-box">
|
|
<h3>🗑 Delete</h3>
|
|
<p class="modal-sub">Delete <strong x-text="deleteTarget?.name"></strong>?</p>
|
|
<div class="delete-confirm">This cannot be undone. All content will be permanently deleted.</div>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-secondary" @click="showDeleteModal=false">Cancel</button>
|
|
<button class="btn btn-danger" @click="doDelete">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function wsPage() {
|
|
return {
|
|
tree: [],
|
|
showCreateModal: false, showRenameModal: false, showDeleteModal: false,
|
|
createType: 'file', newName: '', parentFolder: null,
|
|
renameTarget: null, deleteTarget: null,
|
|
expandedFolders: {},
|
|
|
|
async init() { await this.load(); },
|
|
|
|
async load() {
|
|
try {
|
|
const r = await fetch('/api/local-workspace/tree');
|
|
const data = await r.json();
|
|
this.tree = this.flattenTree(data.tree || [], 0);
|
|
} catch(e) { console.error(e); }
|
|
},
|
|
|
|
flattenTree(nodes, depth) {
|
|
const result = [];
|
|
for (const node of nodes) {
|
|
result.push({
|
|
db_id: node.id, name: node.name, icon: node.is_folder ? '📁' : '📄',
|
|
is_folder: node.is_folder, depth: depth,
|
|
});
|
|
if (node.children) {
|
|
result.push(...this.flattenTree(node.children, depth + 1));
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
toggleFolder(node) { /* Future: expand/collapse */ },
|
|
|
|
openCreateModal(type, parent) {
|
|
this.createType = type; this.parentFolder = parent || null; this.newName = '';
|
|
this.showCreateModal = true;
|
|
this.$nextTick(() => { const el = this.$refs.createInput; if (el) setTimeout(() => el.focus(), 100); });
|
|
},
|
|
|
|
async doCreate() {
|
|
if (!this.newName.trim()) return;
|
|
const body = { name: this.newName.trim(), type: this.createType };
|
|
if (this.parentFolder) body.parent_id = this.parentFolder.db_id;
|
|
const r = await fetch('/api/local-workspace/items', {
|
|
method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body)
|
|
});
|
|
if (r.ok) {
|
|
this.newName = ''; this.showCreateModal = false; this.parentFolder = null;
|
|
window.location.reload();
|
|
} else { alert('Failed to create'); }
|
|
},
|
|
|
|
openItem(node) { window.location = `/pages/${node.db_id}`; },
|
|
|
|
rename(node) {
|
|
this.renameTarget = node; this.newName = node.name.trim();
|
|
this.showRenameModal = true;
|
|
this.$nextTick(() => { const el = this.$refs.renameInput; if (el) setTimeout(() => el.focus(), 100); });
|
|
},
|
|
|
|
async doRename() {
|
|
if (!this.newName.trim() || !this.renameTarget) return;
|
|
await fetch(`/api/local-workspace/items/${this.renameTarget.db_id}`, {
|
|
method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify({name:this.newName.trim()})
|
|
});
|
|
this.showRenameModal = false; this.renameTarget = null; this.newName = '';
|
|
await this.load();
|
|
},
|
|
|
|
confirmDelete(node) { this.deleteTarget = node; this.showDeleteModal = true; },
|
|
|
|
async doDelete() {
|
|
if (!this.deleteTarget) return;
|
|
await fetch(`/api/local-workspace/items/${this.deleteTarget.db_id}`, {method:'DELETE'});
|
|
this.showDeleteModal = false; this.deleteTarget = null;
|
|
await this.load();
|
|
},
|
|
|
|
// ── Drag & Drop ──
|
|
dragStart(ev, id) { ev.dataTransfer.setData('text/plain', id); ev.target.classList.add('dragging'); },
|
|
dragOver(ev, id, isFolder) { if (isFolder) ev.target.closest('.ws-tree-item')?.classList.add('drop-target'); },
|
|
dragLeave(ev) { ev.target.closest('.ws-tree-item')?.classList.remove('drop-target'); },
|
|
async doDrop(ev, targetId) {
|
|
ev.target.closest('.ws-tree-item')?.classList.remove('drop-target');
|
|
const draggedId = ev.dataTransfer.getData('text/plain');
|
|
if (!draggedId || draggedId == targetId) return;
|
|
const isFolder = ev.target.closest('.ws-tree-item')?.dataset?.isFolder === 'true';
|
|
const parentId = isFolder && draggedId != targetId ? parseInt(targetId) : null;
|
|
const r = await fetch(`/api/local-workspace/items/${draggedId}/move`, {
|
|
method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify({parent_id: parentId})
|
|
});
|
|
if (r.ok) window.location.reload();
|
|
else alert('Move failed');
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
{% endblock %}
|