bruno
9100da74f3
- Add global window.FlowDeck namespace with createPage() and showCreateFolderModal() - createPage() creates a Notion-style page via /board/api/pages (same as sidebar bottom-right button) - showCreateFolderModal() opens a global themed modal (dark/light) instead of browser prompt() - All New Page buttons now call window.FlowDeck.createPage() - All New Folder buttons now call window.FlowDeck.showCreateFolderModal() - Global New Folder modal uses existing .flowdeck-modal CSS classes for theme consistency - Updated Ctrl+N keyboard shortcut to use unified createPage()
1286 lines
62 KiB
HTML
1286 lines
62 KiB
HTML
{% extends "base.html" %}
|
|
{% block page_icon %}📚{% endblock %}
|
|
{% block page_title %}Library{% endblock %}
|
|
{% block title_prefix %}Library{% endblock %}
|
|
|
|
{% block topbar %}
|
|
{% set page_icon = "📚" %}
|
|
{% set page_title = "Library" %}
|
|
{% include '_header.html' %}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div x-data="libraryPage()" x-init="init()" @keydown.escape="closePeek()">
|
|
<div id="lib-workspace-id" style="display:none;">{{ active_workspace_id or 0 }}</div>
|
|
<div id="lib-gitea-active" style="display:none;">{{ '1' if is_gitea_workspace else '0' }}</div>
|
|
<div id="lib-gitea-owner" style="display:none;">{{ gitea_workspace_owner or '' }}</div>
|
|
<div id="lib-gitea-repo" style="display:none;">{{ gitea_workspace_repo or '' }}</div>
|
|
|
|
<style>
|
|
/* ── Library layout ── */
|
|
.lib-container{max-width:1100px;margin:0 auto;padding:20px 24px;}
|
|
.lib-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
|
|
.lib-header h1{font-size:24px;font-weight:700;color:var(--text-primary);margin:0;}
|
|
.lib-header-actions{display:flex;align-items:center;gap:8px;}
|
|
.lib-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;transition:background 0.1s,color 0.1s;}
|
|
.lib-icon-btn:hover,.lib-icon-btn.active{background:var(--bg-hover);color:var(--text-primary);}
|
|
.lib-icon-btn svg{width:16px;height:16px;}
|
|
.lib-btn-primary{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;font-size:13px;font-weight:500;color:#fff;background:var(--accent);border:none;border-radius:6px;cursor:pointer;transition:background 0.1s;}
|
|
.lib-btn-primary:hover{background:var(--accent-hover);}
|
|
.lib-btn-primary svg{width:14px;height:14px;}
|
|
|
|
/* ── Tabs row (tabs left, toolbar icons right) ── */
|
|
.lib-tabs-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
|
|
.lib-tabs{display:flex;gap:2px;align-items:center;overflow-x:auto;scrollbar-width:none;}
|
|
.lib-tabs::-webkit-scrollbar{display:none;}
|
|
.lib-tab{display:flex;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:500;color:var(--text-secondary);background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all 0.12s;white-space:nowrap;}
|
|
.lib-tab:hover{color:var(--text-primary);background:var(--bg-hover);}
|
|
.lib-tab.active{color:var(--text-primary);background:var(--bg-active);}
|
|
.lib-tab svg{width:14px;height:14px;flex-shrink:0;}
|
|
.lib-toolbar{display:flex;align-items:center;gap:2px;flex-shrink:0;}
|
|
.lib-toolbar-wrap{position:relative;}
|
|
|
|
/* ── Dropdowns (filter/sort/view) ── */
|
|
.lib-dropdown{position:absolute;top:calc(100% + 4px);right:0;min-width:210px;background:var(--bg-modal);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-popover);z-index:200;padding:6px;}
|
|
.lib-dropdown .dd-label{padding:6px 8px 2px;font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.3px;}
|
|
.lib-dropdown .dd-item{padding:6px 8px;font-size:13px;color:var(--text-primary);cursor:pointer;border-radius:4px;display:flex;align-items:center;gap:8px;transition:background 0.1s;}
|
|
.lib-dropdown .dd-item:hover{background:var(--bg-hover);}
|
|
.lib-dropdown .dd-item.active{color:var(--accent);}
|
|
.lib-dropdown .dd-item .check{width:14px;flex-shrink:0;color:var(--accent);}
|
|
.lib-search-bar{margin-bottom:10px;}
|
|
.lib-search-bar input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:13px;outline:none;}
|
|
|
|
/* ── Multi-select bar ── */
|
|
.lib-select-bar{display:flex;align-items:center;gap:4px;padding:6px 10px;background:var(--bg-secondary);border-radius:8px;margin-bottom:8px;font-size:13px;color:var(--text-secondary);min-height:38px;}
|
|
.lib-select-bar .sel-count{font-weight:500;color:var(--text-primary);margin-right:8px;white-space:nowrap;}
|
|
.lib-select-bar button{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:6px 8px;border-radius:6px;font-size:13px;display:flex;align-items:center;gap:6px;transition:all 0.12s;}
|
|
.lib-select-bar button:hover{background:var(--bg-hover);color:var(--text-primary);}
|
|
.lib-select-bar button svg{width:14px;height:14px;}
|
|
|
|
/* ── Table (div-based for hover effects) ── */
|
|
.lib-table{width:100%;}
|
|
.lib-table-header{display:flex;align-items:center;border-bottom:1px solid var(--border);padding:0;}
|
|
.lib-table-header .th{display:flex;align-items:center;gap:5px;padding:6px 8px;font-size:12px;font-weight:500;color:var(--text-dim);user-select:none;white-space:nowrap;}
|
|
.lib-table-header .th svg{width:13px;height:13px;flex-shrink:0;}
|
|
|
|
/* Column widths — Notion-style */
|
|
.lib-col-name{flex:1;min-width:0;}
|
|
.lib-col-author{width:150px;flex-shrink:0;display:none;}
|
|
.lib-col-source{width:120px;flex-shrink:0;display:none;}
|
|
.lib-col-edited{width:110px;flex-shrink:0;text-align:right;justify-content:flex-end;}
|
|
.lib-table.show-author .lib-col-author{display:flex;}
|
|
.lib-table.show-source .lib-col-source{display:flex;}
|
|
|
|
/* ── Row ── */
|
|
.lib-row{display:flex;align-items:center;height:34px;transition:background 0.1s;position:relative;}
|
|
.lib-row:hover{background:var(--bg-hover);}
|
|
.lib-row.selected{background:rgba(35,131,226,0.08);}
|
|
.lib-row.drag-over{outline:2px solid var(--accent);outline-offset:-2px;background:rgba(35,131,226,0.12);}
|
|
.lib-row.dragging{opacity:0.4;}
|
|
.lib-row .row-cell{display:flex;align-items:center;padding:0 8px;height:100%;overflow:hidden;}
|
|
.lib-row .row-cell.lib-col-edited{color:var(--text-secondary);font-size:13px;white-space:nowrap;}
|
|
|
|
/* ── Name cell — contains drag handle, checkbox, chevron, icon, name, OPEN ── */
|
|
.row-name{display:flex;align-items:center;gap:6px;min-width:0;flex:1;position:relative;}
|
|
.row-icon{font-size:15px;flex-shrink:0;width:20px;text-align:center;display:inline-flex;align-items:center;justify-content:center;}
|
|
.row-icon svg{width:16px;height:16px;color:var(--text-dim);}
|
|
.row-title{font-size:13px;font-weight:400;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;cursor:pointer;}
|
|
.row-title:hover{text-decoration:underline;}
|
|
.row-title input{width:100%;font-size:13px;padding:2px 4px;background:var(--bg-primary);border:1px solid var(--accent);border-radius:4px;color:var(--text-primary);outline:none;}
|
|
|
|
/* ── Hover-only elements (hidden until row hover, or when checked/dragging) ── */
|
|
.hover-only{opacity:0;transition:opacity 0.12s;flex-shrink:0;}
|
|
.lib-row:hover .hover-only,.lib-row.selected .hover-only{opacity:1;}
|
|
|
|
/* Drag handle — grip icon */
|
|
.drag-handle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:grab;flex-shrink:0;margin-right:2px;}
|
|
.drag-handle:active{cursor:grabbing;}
|
|
.drag-handle svg{width:14px;height:14px;color:var(--text-dim);opacity:0.75;}
|
|
|
|
/* Checkbox */
|
|
.lib-checkbox{width:15px;height:15px;border:1.5px solid var(--text-dim);border-radius:3px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:border-color 0.1s;}
|
|
.lib-checkbox:hover{border-color:var(--text-primary);}
|
|
.lib-checkbox.checked{background:var(--accent);border-color:var(--accent);opacity:1!important;}
|
|
.lib-checkbox.checked svg{width:10px;height:10px;color:#fff;}
|
|
|
|
/* OPEN button */
|
|
.btn-open{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid var(--border);border-radius:4px;font-size:11px;font-weight:500;color:var(--text-primary);background:var(--bg-tertiary);cursor:pointer;white-space:nowrap;transition:all 0.1s;flex-shrink:0;text-decoration:none;margin-left:auto;}
|
|
.btn-open:hover{background:var(--bg-active);}
|
|
.btn-open svg{width:12px;height:12px;}
|
|
|
|
/* Expand chevron */
|
|
.tree-chevron{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;color:var(--text-dim);cursor:pointer;padding:0;border-radius:3px;transition:transform 0.15s,background 0.1s;}
|
|
.tree-chevron:hover{color:var(--text-primary);background:var(--bg-active);}
|
|
.tree-chevron svg{width:11px;height:11px;transition:transform 0.15s;}
|
|
.tree-chevron.open svg{transform:rotate(90deg);}
|
|
|
|
/* Indent levels (computed inline via CSS var for arbitrary depth) */
|
|
.row-indent{flex-shrink:0;}
|
|
|
|
/* ── Author cell ── */
|
|
.row-author{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary);}
|
|
.author-avatar{width:18px;height:18px;border-radius:50%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;color:var(--text-secondary);flex-shrink:0;}
|
|
|
|
/* ── Source cell ── */
|
|
.row-source{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
|
|
|
/* "+ Add new" under expanded parent */
|
|
.add-new-under{padding:5px 8px;color:var(--text-dim);font-size:12px;cursor:pointer;transition:color 0.15s;display:flex;align-items:center;gap:4px;}
|
|
.add-new-under:hover{color:var(--text-primary);}
|
|
.add-new-under svg{width:12px;height:12px;}
|
|
|
|
/* ── Side Peek Panel ── */
|
|
.peek-overlay{position:fixed;top:0;right:0;width:560px;max-width:90vw;height:100vh;background:var(--bg-modal);border-left:1px solid var(--border);box-shadow:-8px 0 32px rgba(0,0,0,0.25);z-index:500;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.2s cubic-bezier(0.16,1,0.3,1);}
|
|
.peek-overlay.open{transform:translateX(0);}
|
|
.peek-header{display:flex;align-items:center;gap:4px;padding:12px 16px;border-bottom:1px solid var(--border);}
|
|
.peek-header .peek-title{flex:1;font-size:15px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
|
|
.peek-header button{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:6px;border-radius:4px;font-size:13px;display:flex;align-items:center;}
|
|
.peek-header button:hover{background:var(--bg-hover);color:var(--text-primary);}
|
|
.peek-header button svg{width:15px;height:15px;}
|
|
.peek-body{flex:1;overflow-y:auto;padding:16px 20px;}
|
|
.peek-body .peek-empty{text-align:center;padding:60px 20px;color:var(--text-dim);}
|
|
.peek-loading{text-align:center;padding:40px;color:var(--text-dim);}
|
|
|
|
/* ── "Add new" row ── */
|
|
.add-new-row{padding:8px 12px;color:var(--text-dim);font-size:13px;cursor:pointer;transition:color 0.15s;display:flex;align-items:center;gap:4px;}
|
|
.add-new-row:hover{color:var(--text-primary);}
|
|
.add-new-row svg{width:13px;height:13px;}
|
|
|
|
/* ── More / context menu dropdown ── */
|
|
.more-menu{position:absolute;min-width:200px;background:var(--bg-modal);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-popover);z-index:300;padding:4px;}
|
|
.more-menu .menu-item{padding:6px 10px;font-size:13px;color:var(--text-primary);cursor:pointer;border-radius:4px;display:flex;align-items:center;gap:8px;transition:background 0.1s;}
|
|
.more-menu .menu-item:hover{background:var(--bg-hover);}
|
|
.more-menu .menu-item svg{width:14px;height:14px;flex-shrink:0;}
|
|
.more-menu .menu-item .shortcut{margin-left:auto;font-size:11px;color:var(--text-dim);}
|
|
.more-menu .menu-danger{color:var(--danger);}
|
|
.more-sep{height:1px;background:var(--border);margin:4px 8px;}
|
|
|
|
/* ── Move-to modal ── */
|
|
.move-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:600;display:flex;align-items:center;justify-content:center;}
|
|
.move-modal{width:420px;max-height:60vh;background:var(--bg-modal);border-radius:10px;box-shadow:var(--shadow-modal);display:flex;flex-direction:column;overflow:hidden;}
|
|
.move-modal-header{padding:14px 16px;border-bottom:1px solid var(--border);font-size:14px;font-weight:600;color:var(--text-primary);}
|
|
.move-modal-search{padding:8px 12px;border-bottom:1px solid var(--border);}
|
|
.move-modal-search input{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:13px;outline:none;}
|
|
.move-modal-list{flex:1;overflow-y:auto;padding:4px;}
|
|
.move-modal-item{padding:7px 10px;font-size:13px;color:var(--text-primary);cursor:pointer;border-radius:6px;display:flex;align-items:center;gap:8px;}
|
|
.move-modal-item:hover{background:var(--bg-hover);}
|
|
|
|
/* ── Empty state ── */
|
|
.lib-empty{text-align:center;padding:80px 20px;color:var(--text-dim);}
|
|
.lib-empty .empty-icon{font-size:48px;margin-bottom:12px;opacity:0.5;}
|
|
.lib-empty h3{font-size:16px;color:var(--text-secondary);margin:0 0 4px;}
|
|
.lib-empty p{font-size:13px;margin:0;}
|
|
|
|
/* ── Loading ── */
|
|
.lib-loading{text-align:center;padding:60px 20px;color:var(--text-dim);}
|
|
|
|
/* ── Responsive ── */
|
|
@media(max-width:768px){
|
|
.lib-col-author,.lib-col-source{display:none!important;}
|
|
.peek-overlay{width:100vw;max-width:100vw;}
|
|
}
|
|
</style>
|
|
|
|
<!-- ── Header ── -->
|
|
<div class="lib-container">
|
|
<div class="lib-header">
|
|
<h1>Library</h1>
|
|
<div class="lib-header-actions">
|
|
<button class="lib-btn-primary" onclick="window.FlowDeck.createPage()">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
New page
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Tabs + toolbar row ── -->
|
|
<div class="lib-tabs-row">
|
|
<div class="lib-tabs">
|
|
<button class="lib-tab" :class="{ active: tab === 'recents' }" @click="switchTab('recents')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 16 14"/></svg> Recents
|
|
</button>
|
|
<button class="lib-tab" :class="{ active: tab === 'favorites' }" @click="switchTab('favorites')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg> Favorites
|
|
</button>
|
|
<button class="lib-tab" :class="{ active: tab === 'shared' }" @click="switchTab('shared')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg> Shared
|
|
</button>
|
|
<button class="lib-tab" :class="{ active: tab === 'private' }" @click="switchTab('private')" x-show="!workspaceId && !isGiteaActive">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg> Private
|
|
</button>
|
|
<button class="lib-tab" :class="{ active: tab === 'published' }" @click="switchTab('published')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><line x1="3" y1="12" x2="21" y2="12"/><path d="M12 3a15 15 0 010 18 15 15 0 010-18"/></svg> Published
|
|
</button>
|
|
<button class="lib-tab" :class="{ active: tab === 'workspace' }" @click="switchTab('workspace')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg> Workspace
|
|
</button>
|
|
<button class="lib-tab" :class="{ active: tab === 'repository' }" @click="switchTab('repository')" x-show="isGiteaActive">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4a2 2 0 001-1.73z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg> Repository
|
|
</button>
|
|
</div>
|
|
<div class="lib-toolbar">
|
|
<div class="lib-toolbar-wrap" x-show="tab !== 'repository'">
|
|
<button class="lib-icon-btn" :class="{active: filterOpen}" title="Filter" @click.stop="filterOpen=!filterOpen; sortOpen=false; viewOpen=false">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
|
|
</button>
|
|
<div class="lib-dropdown" x-show="filterOpen" @click.outside="filterOpen=false" x-transition>
|
|
<div class="dd-label">Source</div>
|
|
<div class="dd-item" :class="{active: sourceFilter==='all'}" @click="setSourceFilter('all')"><span class="check" x-text="sourceFilter==='all' ? '✓' : ''"></span> All sources</div>
|
|
<div class="dd-item" :class="{active: sourceFilter==='local'}" @click="setSourceFilter('local')"><span class="check" x-text="sourceFilter==='local' ? '✓' : ''"></span> Local</div>
|
|
<div class="dd-item" :class="{active: sourceFilter==='gitea'}" @click="setSourceFilter('gitea')"><span class="check" x-text="sourceFilter==='gitea' ? '✓' : ''"></span> Gitea</div>
|
|
<div class="dd-item" :class="{active: sourceFilter==='github'}" @click="setSourceFilter('github')"><span class="check" x-text="sourceFilter==='github' ? '✓' : ''"></span> GitHub</div>
|
|
</div>
|
|
</div>
|
|
<div class="lib-toolbar-wrap">
|
|
<button class="lib-icon-btn" :class="{active: sortOpen}" title="Sort" @click.stop="sortOpen=!sortOpen; filterOpen=false; viewOpen=false">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="9" x2="14" y2="9"/><line x1="4" y1="15" x2="10" y2="15"/><polyline points="17 5 17 19"/><polyline points="13 16 17 20 21 16"/></svg>
|
|
</button>
|
|
<div class="lib-dropdown" x-show="sortOpen" @click.outside="sortOpen=false" x-transition>
|
|
<div class="dd-label">Sort by</div>
|
|
<div class="dd-item" :class="{active: sortBy==='name'}" @click="setSort('name')"><span class="check" x-text="sortBy==='name' ? '✓' : ''"></span> Name</div>
|
|
<div class="dd-item" :class="{active: sortBy==='edited'}" @click="setSort('edited')"><span class="check" x-text="sortBy==='edited' ? '✓' : ''"></span> Last edited</div>
|
|
<div class="dd-item" :class="{active: sortBy==='author'}" @click="setSort('author')"><span class="check" x-text="sortBy==='author' ? '✓' : ''"></span> Created by</div>
|
|
</div>
|
|
</div>
|
|
<button class="lib-icon-btn" :class="{active: searchOpen}" title="Search" @click.stop="searchOpen=!searchOpen; $nextTick(()=>{ if(searchOpen) document.getElementById('lib-search-input').focus(); })">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
</button>
|
|
<div class="lib-toolbar-wrap">
|
|
<button class="lib-icon-btn" :class="{active: viewOpen}" title="View options" @click.stop="viewOpen=!viewOpen; filterOpen=false; sortOpen=false">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/><circle cx="9" cy="6" r="1.5" fill="currentColor" stroke="none"/><circle cx="15" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="9" cy="18" r="1.5" fill="currentColor" stroke="none"/></svg>
|
|
</button>
|
|
<div class="lib-dropdown" x-show="viewOpen" @click.outside="viewOpen=false" x-transition>
|
|
<div class="dd-label">Show columns</div>
|
|
<div class="dd-item" @click="toggleColumn('author')"><span class="check" x-text="showAuthor ? '✓' : ''"></span> Created by</div>
|
|
<div class="dd-item" @click="toggleColumn('source')"><span class="check" x-text="showSource ? '✓' : ''"></span> Source</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search bar (toggleable) -->
|
|
<div class="lib-search-bar" x-show="searchOpen" x-transition>
|
|
<input id="lib-search-input" type="text" placeholder="Search in this list..." x-model="searchQuery" @input="doSearch()">
|
|
</div>
|
|
|
|
<!-- ── Multi-select bar ── -->
|
|
<div class="lib-select-bar" x-show="selectedCount > 0" x-transition>
|
|
<span class="sel-count" x-text="selectedCount + ' selected'"></span>
|
|
<button @click="clearSelection()" title="Clear selection">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
</button>
|
|
<button @click="copyLinks()" title="Copy links">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>
|
|
</button>
|
|
<button @click="openMovePicker(Object.keys(selected).map(Number))" title="Move to">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
|
|
</button>
|
|
<div style="position:relative;margin-left:auto;">
|
|
<button @click.stop="moreOpen=!moreOpen" title="More actions">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
|
|
</button>
|
|
<div class="more-menu" x-show="moreOpen" @click.outside="moreOpen=false" x-transition style="right:0;top:100%;">
|
|
<div class="menu-item" x-show="tab==='recents'" @click="removeFromRecents()">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
|
|
Remove from Recents
|
|
</div>
|
|
<div class="menu-item" @click="copyLinks()">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>
|
|
Copy links to all
|
|
</div>
|
|
<div class="menu-item" @click="openMovePicker(Object.keys(selected).map(Number))">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
|
|
Move to
|
|
</div>
|
|
<div class="more-sep"></div>
|
|
<div class="menu-item menu-danger" @click="deleteSelected()">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
|
|
Move to Trash <span class="shortcut">Del</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Loading ── -->
|
|
<div class="lib-loading" id="lib-loading">
|
|
<p>Loading…</p>
|
|
</div>
|
|
|
|
<!-- ── Table ── -->
|
|
<div class="lib-table" id="lib-table" :class="{'show-author': showAuthor, 'show-source': showSource}">
|
|
<div class="lib-table-header">
|
|
<div class="th lib-col-name">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
|
Page name
|
|
</div>
|
|
<div class="th lib-col-author">Created by</div>
|
|
<div class="th lib-col-source">Source</div>
|
|
<div class="th lib-col-edited">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 16 14"/></svg>
|
|
Last edited time
|
|
</div>
|
|
</div>
|
|
<div class="lib-table-body" id="lib-table-body">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- "+ Add new" (root level) -->
|
|
<div class="add-new-row" x-show="!loading && tab !== 'favorites' && tab !== 'shared' && tab !== 'published' && tab !== 'repository'"
|
|
onclick="window.FlowDeck.createPage()">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
Add new
|
|
</div>
|
|
|
|
<!-- ── Empty state ── -->
|
|
<div class="lib-empty" id="lib-empty">
|
|
<div class="empty-icon" x-text="emptyIcon"></div>
|
|
<h3 x-text="emptyTitle"></h3>
|
|
<p x-text="emptyText"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Row context menu ── -->
|
|
<div class="more-menu" x-show="ctxMenuItem" @click.outside="ctxMenuItem=null" x-transition
|
|
:style="'top:' + ctxMenuY + 'px;left:' + ctxMenuX + 'px;'">
|
|
<template x-if="ctxMenuItem">
|
|
<div>
|
|
<div class="menu-item" @click="openItem(ctxMenuItem); ctxMenuItem=null">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
|
|
Open
|
|
</div>
|
|
<div class="menu-item" @click="openPeek(ctxMenuItem); ctxMenuItem=null">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
|
|
Open in side peek
|
|
</div>
|
|
<div class="menu-item" @click="startRename(ctxMenuItem); ctxMenuItem=null">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4z"/></svg>
|
|
Rename
|
|
</div>
|
|
<div class="menu-item" @click="toggleFavoriteItem(ctxMenuItem); ctxMenuItem=null">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
|
<span x-text="ctxMenuItem.favorited ? 'Remove from Favorites' : 'Add to Favorites'"></span>
|
|
</div>
|
|
<div class="menu-item" @click="duplicateItem(ctxMenuItem); ctxMenuItem=null">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
|
|
Duplicate
|
|
</div>
|
|
<div class="menu-item" @click="copyLink(ctxMenuItem); ctxMenuItem=null">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>
|
|
Copy link
|
|
</div>
|
|
<div class="menu-item" @click="openMovePicker([ctxMenuItem.id]); ctxMenuItem=null">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
|
|
Move to
|
|
</div>
|
|
<div class="more-sep"></div>
|
|
<div class="menu-item menu-danger" @click="deleteItem(ctxMenuItem); ctxMenuItem=null">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
|
|
Move to Trash
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- ── Move-to modal ── -->
|
|
<div class="move-modal-overlay" x-show="moveModalOpen" @click.self="moveModalOpen=false" x-transition>
|
|
<div class="move-modal" @click.outside="moveModalOpen=false" x-show="moveModalOpen">
|
|
<div class="move-modal-header">Move to…</div>
|
|
<div class="move-modal-search">
|
|
<input type="text" placeholder="Search pages..." x-model="moveSearchQuery" @input="doMoveSearch()">
|
|
</div>
|
|
<div class="move-modal-list">
|
|
<div class="move-modal-item" @click="confirmMove(0)">📄 <span>Root (no parent)</span></div>
|
|
<template x-for="it in moveCandidates" :key="it.id">
|
|
<div class="move-modal-item" @click="confirmMove(it.id)">
|
|
<span x-text="it.icon || '📄'"></span> <span x-text="it.title"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Side Peek Panel ── -->
|
|
<div class="peek-overlay" :class="{ open: peekItem !== null }" @click.outside="closePeek()">
|
|
<template x-if="peekItem">
|
|
<div style="display:flex;flex-direction:column;height:100%;">
|
|
<div class="peek-header">
|
|
<button @click="closePeek()" title="Close">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
</button>
|
|
<div class="peek-title">
|
|
<span x-text="peekItem.icon || '📄'"></span>
|
|
<span x-text="peekItem.title"></span>
|
|
</div>
|
|
<button @click="openItem(peekItem)" title="Open full page">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
|
|
</button>
|
|
<button @click="toggleFavoritePeek()" title="Favorite">
|
|
<svg viewBox="0 0 24 24" :fill="peekFavorited ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
|
</button>
|
|
<button @click="copyPeekLink()" title="Copy link">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>
|
|
</button>
|
|
<button @click.stop="peekMoreOpen=!peekMoreOpen" title="More">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
|
|
</button>
|
|
<div class="more-menu" x-show="peekMoreOpen" @click.outside="peekMoreOpen=false" style="position:absolute;top:100%;right:8px;">
|
|
<div class="menu-item" @click="duplicatePeek()">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
|
|
Duplicate
|
|
</div>
|
|
<div class="menu-item" @click="movePeekTo()">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
|
|
Move to
|
|
</div>
|
|
<div class="more-sep"></div>
|
|
<div class="menu-item menu-danger" @click="deletePeek()">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
|
|
Move to Trash
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="peek-body">
|
|
<div x-show="peekLoading" class="peek-loading">Loading…</div>
|
|
<div x-show="!peekLoading && peekContent" x-html="peekContent"></div>
|
|
<div x-show="!peekLoading && !peekContent" class="peek-empty">
|
|
<div style="font-size:48px;margin-bottom:8px;">📄</div>
|
|
<div style="font-size:14px;color:var(--text-secondary);">No preview available</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
</div><!-- /x-data -->
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
function libraryPage() {
|
|
return {
|
|
tab: 'recents',
|
|
workspaceId: 0,
|
|
isGiteaActive: false,
|
|
giteaOwner: '',
|
|
giteaRepo: '',
|
|
items: [],
|
|
loading: false,
|
|
searchOpen: false,
|
|
searchQuery: '',
|
|
|
|
// Selection
|
|
selected: {},
|
|
selectedCount: 0,
|
|
allSelected: false,
|
|
|
|
// Tree
|
|
expanded: {},
|
|
renamingId: null,
|
|
renameValue: '',
|
|
|
|
// Toolbar dropdowns
|
|
filterOpen: false,
|
|
sortOpen: false,
|
|
viewOpen: false,
|
|
sourceFilter: 'all',
|
|
showAuthor: false,
|
|
showSource: false,
|
|
|
|
// Sort
|
|
sortBy: '',
|
|
|
|
// More menu
|
|
moreOpen: false,
|
|
|
|
// Row context menu
|
|
ctxMenuItem: null,
|
|
ctxMenuX: 0,
|
|
ctxMenuY: 0,
|
|
|
|
// Move-to modal
|
|
moveModalOpen: false,
|
|
moveIds: [],
|
|
moveSearchQuery: '',
|
|
moveCandidates: [],
|
|
_moveAllCandidates: [],
|
|
|
|
// Drag & drop
|
|
_dragId: null,
|
|
|
|
// Side peek
|
|
peekItem: null,
|
|
peekContent: '',
|
|
peekLoading: false,
|
|
peekFavorited: false,
|
|
peekMoreOpen: false,
|
|
|
|
// ── Computed flat list ──
|
|
flatItems: [],
|
|
|
|
_renderTable() {
|
|
var self = this;
|
|
var body = document.getElementById('lib-table-body');
|
|
var table = document.getElementById('lib-table');
|
|
var emptyDiv = document.getElementById('lib-empty');
|
|
var loadingDiv = document.getElementById('lib-loading');
|
|
if (!body) return;
|
|
|
|
// Show/hide table vs empty state
|
|
if (this.flatItems.length === 0) {
|
|
if (table) table.style.display = 'none';
|
|
if (emptyDiv) emptyDiv.style.display = '';
|
|
return;
|
|
}
|
|
if (table) table.style.display = '';
|
|
if (emptyDiv) emptyDiv.style.display = 'none';
|
|
if (loadingDiv) loadingDiv.style.display = 'none';
|
|
var html = '';
|
|
for (var i = 0; i < this.flatItems.length; i++) {
|
|
var item = this.flatItems[i];
|
|
|
|
// ── Synthetic "+ Add new" placeholder row for an expanded parent ──
|
|
if (item._isAddNew) {
|
|
var pad = 30 + (item.depth || 0) * 20;
|
|
html += '<div class="add-new-under" style="padding-left:' + pad + 'px" onclick="window.FlowDeck.createPage()">';
|
|
html += '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Add new</div>';
|
|
continue;
|
|
}
|
|
|
|
var selClass = this.selected[item.id] ? ' selected' : '';
|
|
var indentPx = 4 + (item.depth || 0) * 20;
|
|
var checkClass = this.selected[item.id] ? ' checked' : '';
|
|
var chevOpen = this.expanded[item.id] ? ' open' : '';
|
|
var isRenaming = this.renamingId === item.id;
|
|
html += '<div class="lib-row' + selClass + '" data-lib-id="' + item.id + '" draggable="true" '
|
|
+ 'ondragstart="window._libData.onRowDragStart(event,' + item.id + ')" '
|
|
+ 'ondragover="window._libData.onRowDragOver(event,' + item.id + ')" '
|
|
+ 'ondragleave="window._libData.onRowDragLeave(event,' + item.id + ')" '
|
|
+ 'ondrop="window._libData.onRowDrop(event,' + item.id + ')" '
|
|
+ 'ondragend="window._libData.onRowDragEnd(event)" '
|
|
+ 'oncontextmenu="window._libData.onRowContextMenu(event,' + item.id + ')" '
|
|
+ 'onclick="window._libData.onRowClick(event,' + item.id + ')">';
|
|
html += '<div class="row-cell lib-col-name" style="padding-left:' + indentPx + 'px"><div class="row-name">';
|
|
// Drag handle
|
|
html += '<div class="drag-handle hover-only" title="Drag to move">';
|
|
html += '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="6" r="1.5" fill="currentColor" stroke="none"/><circle cx="15" cy="6" r="1.5" fill="currentColor" stroke="none"/><circle cx="9" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="15" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="9" cy="18" r="1.5" fill="currentColor" stroke="none"/><circle cx="15" cy="18" r="1.5" fill="currentColor" stroke="none"/></svg></div>';
|
|
// Checkbox
|
|
html += '<div class="lib-checkbox hover-only' + checkClass + '" onclick="event.stopPropagation();window._libData.toggleItemById(' + item.id + ')">';
|
|
if (this.selected[item.id]) html += '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>';
|
|
html += '</div>';
|
|
// Chevron or spacer
|
|
if (item.has_children) {
|
|
html += '<button class="tree-chevron' + chevOpen + '" onclick="event.stopPropagation();window._libData.toggleExpandById(' + item.id + ')">';
|
|
html += '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 6 15 12 9 18"/></svg></button>';
|
|
} else {
|
|
html += '<span style="width:18px;flex-shrink:0;"></span>';
|
|
}
|
|
// Icon — folders get a folder icon
|
|
var isFolder = item.is_folder || item.has_children;
|
|
if (isFolder) {
|
|
html += '<span class="row-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/></svg></span>';
|
|
} else {
|
|
html += '<span class="row-icon">' + (item.icon || '\ud83d\udcc4') + '</span>';
|
|
}
|
|
// Title or rename input
|
|
if (isRenaming) {
|
|
html += '<input id="rename-inp-' + item.id + '" value="' + self._escAttr(self.renameValue) + '" onkeydown="if(event.key===\'Enter\')window._libData.commitRenameById(' + item.id + ');if(event.key===\'Escape\')window._libData.cancelRename();" onblur="window._libData.commitRenameById(' + item.id + ')" style="flex:1;min-width:80px;font-size:13px;padding:2px 4px;background:var(--bg-primary);border:1px solid var(--accent);border-radius:4px;color:var(--text-primary);outline:none;" onclick="event.stopPropagation()">';
|
|
} else {
|
|
html += '<span class="row-title" title="' + self._escAttr(item.title) + '">' + self._escHtml(item.title) + '</span>';
|
|
}
|
|
// OPEN button (side peek) — hidden for folders
|
|
if (!isFolder) {
|
|
html += '<button class="btn-open hover-only" onclick="event.stopPropagation();window._libData.openPeekById(' + item.id + ')" title="Open in side peek">';
|
|
html += '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></svg> Open</button>';
|
|
}
|
|
html += '</div></div>';
|
|
// Author
|
|
html += '<div class="row-cell lib-col-author"><div class="row-author">';
|
|
html += '<div class="author-avatar">' + (item.author_initial || '?') + '</div>';
|
|
html += '<span>' + (item.author || '\u2014') + '</span></div></div>';
|
|
// Source
|
|
html += '<div class="row-cell lib-col-source"><span class="row-source">' + (item.source_label || 'Private') + '</span></div>';
|
|
// Edited
|
|
html += '<div class="row-cell lib-col-edited"><span class="row-time">' + self.formatTime(item.updated_at) + '</span></div>';
|
|
html += '</div>';
|
|
}
|
|
body.innerHTML = html;
|
|
},
|
|
|
|
_escHtml(s) { var d=document.createElement('div'); d.textContent = s||''; return d.innerHTML; },
|
|
_escAttr(s) { return String(s||'').replace(/&/g,'&').replace(/"/g,'"').replace(/</g,'<').replace(/>/g,'>'); },
|
|
|
|
_recomputeFlatItems() {
|
|
var result = [];
|
|
this._flatten(this.items, result, 0);
|
|
if (this.searchQuery.trim()) {
|
|
var q = this.searchQuery.toLowerCase();
|
|
result = result.filter(function(r) {
|
|
return (r.title || '').toLowerCase().indexOf(q) !== -1;
|
|
});
|
|
}
|
|
// Use splice for Alpine 3.14.9 reactivity (array reference reassign fails)
|
|
this.flatItems.splice(0, this.flatItems.length, ...result);
|
|
this.selectedCount = Object.keys(this.selected).length;
|
|
this.allSelected = this.flatItems.length > 0 && this.selectedCount === this.flatItems.length;
|
|
this._renderTable();
|
|
},
|
|
|
|
// ── Global dispatch (bypasses Alpine x-for reactivity issues) ──
|
|
toggleItemById(id) {
|
|
var item = this._findItem(id);
|
|
if (!item) return;
|
|
this.toggleItem(item);
|
|
},
|
|
toggleExpandById(id) {
|
|
var item = this._findItem(id);
|
|
if (!item) return;
|
|
this.toggleExpand(item);
|
|
},
|
|
startRenameById(id) {
|
|
var item = this._findItem(id);
|
|
if (!item) return;
|
|
this.startRename(item);
|
|
},
|
|
commitRenameById(id) {
|
|
var item = this._findItem(id);
|
|
if (!item) { this.renamingId = null; this._renderTable(); return; }
|
|
// Read value from the input
|
|
var inp = document.getElementById('rename-inp-' + id);
|
|
if (inp) this.renameValue = inp.value;
|
|
this.commitRename(item);
|
|
},
|
|
openItemById(id) {
|
|
var item = this._findItem(id);
|
|
if (!item) return;
|
|
this.openItem(item);
|
|
},
|
|
openPeekById(id) {
|
|
var item = this._findItem(id);
|
|
if (!item) return;
|
|
this.openPeek(item);
|
|
},
|
|
cancelRename() {
|
|
this.renamingId = null;
|
|
this._renderTable();
|
|
},
|
|
_findItem(id) {
|
|
for (var i = 0; i < this.flatItems.length; i++) {
|
|
if (this.flatItems[i].id === id) return this.flatItems[i];
|
|
}
|
|
return null;
|
|
},
|
|
|
|
// ── Row click / context menu ──
|
|
onRowClick(evt, id) {
|
|
var item = this._findItem(id);
|
|
if (!item) return;
|
|
this.openItem(item);
|
|
},
|
|
onRowContextMenu(evt, id) {
|
|
evt.preventDefault();
|
|
var item = this._findItem(id);
|
|
if (!item) return;
|
|
this.ctxMenuItem = item;
|
|
this.ctxMenuX = Math.min(evt.clientX, window.innerWidth - 220);
|
|
this.ctxMenuY = Math.min(evt.clientY, window.innerHeight - 320);
|
|
},
|
|
|
|
// ── Drag & drop (move / reparent) ──
|
|
onRowDragStart(evt, id) {
|
|
if (!evt.target.closest('.drag-handle')) { evt.preventDefault(); return; }
|
|
this._dragId = id;
|
|
evt.dataTransfer.effectAllowed = 'move';
|
|
evt.dataTransfer.setData('text/plain', String(id));
|
|
evt.currentTarget.classList.add('dragging');
|
|
},
|
|
onRowDragOver(evt, id) {
|
|
if (this._dragId === null || this._dragId === id) return;
|
|
evt.preventDefault();
|
|
evt.currentTarget.classList.add('drag-over');
|
|
},
|
|
onRowDragLeave(evt, id) {
|
|
evt.currentTarget.classList.remove('drag-over');
|
|
},
|
|
async onRowDrop(evt, id) {
|
|
evt.preventDefault();
|
|
evt.currentTarget.classList.remove('drag-over');
|
|
var draggedId = this._dragId;
|
|
this._dragId = null;
|
|
if (!draggedId || draggedId === id) return;
|
|
var target = this._findItem(id);
|
|
var dragged = this._findItem(draggedId);
|
|
if (!target || !dragged) return;
|
|
// Prevent dropping a page onto one of its own (already-loaded) descendants
|
|
if (this._isDescendant(dragged, id)) {
|
|
if (window.showToast) window.showToast('Cannot move a page into its own subpage', 'error');
|
|
return;
|
|
}
|
|
await this._movePages([draggedId], id);
|
|
if (window.showToast) window.showToast('Page moved', 'success');
|
|
},
|
|
onRowDragEnd(evt) {
|
|
this._dragId = null;
|
|
document.querySelectorAll('.lib-row.dragging').forEach(function(el){ el.classList.remove('dragging'); });
|
|
document.querySelectorAll('.lib-row.drag-over').forEach(function(el){ el.classList.remove('drag-over'); });
|
|
},
|
|
|
|
_flatten(nodes, out, depth) {
|
|
if (!nodes) return;
|
|
for (var i = 0; i < nodes.length; i++) {
|
|
var n = nodes[i];
|
|
n.depth = depth || 0;
|
|
out.push(n);
|
|
if (n.has_children && this.expanded[n.id]) {
|
|
this._flatten(n.children, out, depth + 1);
|
|
if (this._canAddChild()) {
|
|
out.push({ _isAddNew: true, _parentId: n.id, depth: (depth || 0) + 1, id: 'add-' + n.id });
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
_canAddChild() {
|
|
return this.tab !== 'favorites' && this.tab !== 'shared' && this.tab !== 'published' && this.tab !== 'repository';
|
|
},
|
|
|
|
_getCsrf() {
|
|
var m = document.cookie.match(/csrf_token=([^;]+)/);
|
|
return m ? m[1] : '';
|
|
},
|
|
|
|
_isDescendant(node, targetId) {
|
|
if (!node || !node.children) return false;
|
|
for (var i = 0; i < node.children.length; i++) {
|
|
if (node.children[i].id === targetId) return true;
|
|
if (this._isDescendant(node.children[i], targetId)) return true;
|
|
}
|
|
return false;
|
|
},
|
|
|
|
async _movePages(ids, parentId) {
|
|
var csrf = this._getCsrf();
|
|
for (var i = 0; i < ids.length; i++) {
|
|
try {
|
|
await fetch('/board/api/pages/' + ids[i] + '/move', {
|
|
method: 'PUT',
|
|
headers: {'Content-Type':'application/json', 'X-CSRF-Token': csrf},
|
|
body: JSON.stringify({ parent_id: parentId || 0 })
|
|
});
|
|
} catch(e) {}
|
|
}
|
|
this.clearSelection();
|
|
this.loadTab();
|
|
},
|
|
|
|
// ── Empty states ──
|
|
emptyIcon: '📄',
|
|
emptyTitle: 'No items',
|
|
emptyText: '',
|
|
|
|
_recomputeEmpty() {
|
|
var icons = {recents:'🕒',favorites:'⭐',shared:'👥',published:'🌐',private:'🔒',workspace:'📁',repository:'📦'};
|
|
this.emptyIcon = icons[this.tab] || '📄';
|
|
var titles = {recents:'No recent pages',favorites:'No favorites',shared:'No shared pages',
|
|
published:'No published pages',private:'No private pages',workspace:'No workspace pages',
|
|
repository:'Empty repository'};
|
|
this.emptyTitle = titles[this.tab] || 'No items';
|
|
var texts = {recents:'Pages you\'ve recently viewed or edited will appear here.',
|
|
favorites:'Right-click a page in the sidebar and select "Add to Favorites".',
|
|
shared:'Shared pages from your team will appear here.',
|
|
published:'Pages published to the web will appear here.',
|
|
private:'Create a new page with the + button.',
|
|
workspace:'Pages inside workspaces will appear here.',
|
|
repository:'Repository files and pages will appear here.'};
|
|
this.emptyText = texts[this.tab] || '';
|
|
},
|
|
|
|
// ── Init ──
|
|
init() {
|
|
window._libData = this; // expose for onclick handlers
|
|
console.log('[Library] init start');
|
|
var wsEl = document.getElementById('lib-workspace-id');
|
|
this.workspaceId = parseInt(wsEl ? wsEl.textContent : '0') || 0;
|
|
var giteaEl = document.getElementById('lib-gitea-active');
|
|
this.isGiteaActive = (giteaEl ? giteaEl.textContent : '0') === '1';
|
|
this.giteaOwner = (document.getElementById('lib-gitea-owner') || {}).textContent || '';
|
|
this.giteaRepo = (document.getElementById('lib-gitea-repo') || {}).textContent || '';
|
|
console.log('[Library] workspaceId=' + this.workspaceId + ' isGitea=' + this.isGiteaActive);
|
|
var params = new URLSearchParams(window.location.search);
|
|
var t = params.get('tab');
|
|
if (t && ['recents','favorites','shared','published','private','workspace','repository'].indexOf(t) !== -1) {
|
|
this.tab = t;
|
|
}
|
|
this._recomputeEmpty();
|
|
console.log('[Library] loading tab: ' + this.tab);
|
|
this.loadTab();
|
|
},
|
|
|
|
switchTab(t) {
|
|
if (this.tab === t) return;
|
|
if (t === 'repository' && !this.isGiteaActive) return;
|
|
this.tab = t;
|
|
this.items = [];
|
|
this.selected = {};
|
|
this.selectedCount = 0;
|
|
this.allSelected = false;
|
|
this.expanded = {};
|
|
this.searchQuery = '';
|
|
this.searchOpen = false;
|
|
this._recomputeEmpty();
|
|
this.updateUrl();
|
|
this.loadTab();
|
|
},
|
|
|
|
updateUrl() {
|
|
var p = new URLSearchParams();
|
|
if (this.tab !== 'recents') p.set('tab', this.tab);
|
|
var qs = p.toString();
|
|
window.history.replaceState({}, '', qs ? '/library?' + qs : '/library');
|
|
},
|
|
|
|
// ── Load ──
|
|
async loadTab() {
|
|
this.loading = true;
|
|
try {
|
|
var url = '/api/library/' + this.tab;
|
|
var sep = '?';
|
|
if (this.workspaceId && (this.tab === 'recents' || this.tab === 'workspace')) {
|
|
url += sep + 'workspace_id=' + this.workspaceId; sep = '&';
|
|
}
|
|
if (this.tab === 'repository' && this.isGiteaActive) {
|
|
url += sep + 'gitea_owner=' + encodeURIComponent(this.giteaOwner) + '&gitea_repo=' + encodeURIComponent(this.giteaRepo);
|
|
sep = '&';
|
|
} else if (this.tab !== 'repository' && this.tab !== 'recents' && this.tab !== 'favorites') {
|
|
// Hierarchical tree view: show only root-level pages at the top
|
|
url += sep + 'tree=1';
|
|
sep = '&';
|
|
} else if (this.tab !== 'repository' && this.tab !== 'workspace' && this.sourceFilter && this.sourceFilter !== 'all') {
|
|
url += sep + 'source_type=' + encodeURIComponent(this.sourceFilter); sep = '&';
|
|
}
|
|
var r = await fetch(url);
|
|
var d = await r.json();
|
|
// Backend already computes has_children correctly for each item (children
|
|
// are loaded lazily on expand) — do NOT overwrite it here.
|
|
this.items = d.items || [];
|
|
this._recomputeFlatItems();
|
|
this._renderTable();
|
|
var self = this;
|
|
this.$nextTick(function() { self.loading = false; });
|
|
} catch(e) {
|
|
console.error('[Library] load error:', e);
|
|
this.items = [];
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
doSearch() { this._recomputeFlatItems(); },
|
|
|
|
setSourceFilter(v) {
|
|
this.sourceFilter = v;
|
|
this.filterOpen = false;
|
|
this.loadTab();
|
|
},
|
|
|
|
setSort(field) {
|
|
this.sortBy = field;
|
|
this.sortOpen = false;
|
|
this.doSort();
|
|
},
|
|
|
|
toggleColumn(col) {
|
|
if (col === 'author') this.showAuthor = !this.showAuthor;
|
|
else if (col === 'source') this.showSource = !this.showSource;
|
|
},
|
|
|
|
doSort() {
|
|
var s = this.sortBy;
|
|
if (!s) return;
|
|
var self = this;
|
|
function sortNodes(nodes) {
|
|
if (!nodes) return;
|
|
nodes.sort(function(a,b){
|
|
if (s === 'name') return (a.title||'').localeCompare(b.title||'');
|
|
if (s === 'edited') return (b.updated_at||'').localeCompare(a.updated_at||'');
|
|
if (s === 'author') return (a.author||'').localeCompare(b.author||'');
|
|
return 0;
|
|
});
|
|
for (var i = 0; i < nodes.length; i++) {
|
|
if (nodes[i].children && nodes[i].children.length) sortNodes(nodes[i].children);
|
|
}
|
|
}
|
|
sortNodes(this.items);
|
|
this._recomputeFlatItems();
|
|
},
|
|
|
|
// ── Tree expand ──
|
|
async toggleExpand(item) {
|
|
if (this.expanded[item.id]) {
|
|
// Collapse
|
|
delete this.expanded[item.id];
|
|
this.expanded = Object.assign({}, this.expanded);
|
|
this._recomputeFlatItems();
|
|
this._renderTable();
|
|
return;
|
|
}
|
|
// Expand — load children if not loaded yet
|
|
this.expanded[item.id] = true;
|
|
this.expanded = Object.assign({}, this.expanded);
|
|
if (!item.children || !item.children.length) {
|
|
try {
|
|
var r = await fetch('/api/library/children/' + item.id);
|
|
var d = await r.json();
|
|
item.children = d.items || [];
|
|
// Mark the tree for depth calculation
|
|
this._markChildren(item.children, (item.depth || 0) + 1);
|
|
} catch(e) {
|
|
item.children = [];
|
|
}
|
|
}
|
|
this._recomputeFlatItems();
|
|
this._renderTable();
|
|
},
|
|
|
|
_markChildren(nodes, depth) {
|
|
if (!nodes) return;
|
|
for (var i = 0; i < nodes.length; i++) {
|
|
nodes[i].depth = depth;
|
|
if (nodes[i].children && nodes[i].children.length > 0) {
|
|
this._markChildren(nodes[i].children, depth + 1);
|
|
}
|
|
}
|
|
},
|
|
|
|
// ── Selection ──
|
|
toggleItem(item) {
|
|
if (this.selected[item.id]) {
|
|
delete this.selected[item.id];
|
|
} else {
|
|
this.selected[item.id] = true;
|
|
}
|
|
this.selected = Object.assign({}, this.selected);
|
|
this._recomputeFlatItems();
|
|
this._renderTable();
|
|
},
|
|
|
|
toggleSelectAll() {
|
|
if (this.allSelected) {
|
|
this.selected = {};
|
|
} else {
|
|
var s = {};
|
|
for (var i = 0; i < this.flatItems.length; i++) {
|
|
s[this.flatItems[i].id] = true;
|
|
}
|
|
this.selected = s;
|
|
}
|
|
this._recomputeFlatItems();
|
|
this._renderTable();
|
|
},
|
|
|
|
clearSelection() {
|
|
this.selected = {};
|
|
this.moreOpen = false;
|
|
this._recomputeFlatItems();
|
|
this._renderTable();
|
|
},
|
|
|
|
// ── Multi-select actions ──
|
|
async deleteSelected() {
|
|
var ids = Object.keys(this.selected);
|
|
if (!ids.length) return;
|
|
if (!confirm('Move ' + ids.length + ' item(s) to Trash?')) return;
|
|
var csrf = this._getCsrf();
|
|
for (var i = 0; i < ids.length; i++) {
|
|
await fetch('/board/api/pages/' + ids[i], {method:'DELETE', headers:{'X-CSRF-Token': csrf}});
|
|
}
|
|
this.clearSelection();
|
|
this.loadTab();
|
|
if (window.showToast) window.showToast('Moved to trash', 'success');
|
|
},
|
|
|
|
async deleteItem(item) {
|
|
if (!item) return;
|
|
if (!confirm('Move "' + item.title + '" to Trash?')) return;
|
|
var csrf = this._getCsrf();
|
|
await fetch('/board/api/pages/' + item.id, {method:'DELETE', headers:{'X-CSRF-Token': csrf}});
|
|
this.loadTab();
|
|
if (window.showToast) window.showToast('Moved to trash', 'success');
|
|
},
|
|
|
|
removeFromRecents() {
|
|
// No server-side "visited" tracking exists yet — remove from the
|
|
// current view only (session-scoped).
|
|
this.moreOpen = false;
|
|
var ids = Object.keys(this.selected).map(Number);
|
|
if (!ids.length) return;
|
|
this.items = this.items.filter(function(it) { return ids.indexOf(it.id) === -1; });
|
|
this.clearSelection();
|
|
this._recomputeFlatItems();
|
|
},
|
|
|
|
copyLinks() {
|
|
this.moreOpen = false;
|
|
var ids = Object.keys(this.selected);
|
|
var links = ids.map(function(id) { return window.location.origin + '/pages/' + id; });
|
|
navigator.clipboard.writeText(links.join('\n'));
|
|
if (window.showToast) window.showToast('Links copied', 'success');
|
|
},
|
|
|
|
copyLink(item) {
|
|
if (!item) return;
|
|
navigator.clipboard.writeText(window.location.origin + '/pages/' + item.id);
|
|
if (window.showToast) window.showToast('Link copied', 'success');
|
|
},
|
|
|
|
async toggleFavoriteItem(item) {
|
|
if (!item) return;
|
|
var csrf = this._getCsrf();
|
|
var method = item.favorited ? 'DELETE' : 'POST';
|
|
var r = await fetch('/board/api/favorites/' + item.id, { method: method, headers: {'X-CSRF-Token': csrf} });
|
|
if (r.ok) {
|
|
item.favorited = !item.favorited;
|
|
this._renderTable();
|
|
if (window.appState && window.appState.refreshFavorites) window.appState.refreshFavorites();
|
|
if (this.tab === 'favorites') this.loadTab();
|
|
}
|
|
},
|
|
|
|
async duplicateItem(item) {
|
|
if (!item) return;
|
|
try {
|
|
var r = await fetch('/board/api/pages/' + item.id);
|
|
var page = await r.json();
|
|
var csrf = this._getCsrf();
|
|
var section = page.parent_section || 'Private';
|
|
var parentId = page.parent_id || 0;
|
|
var ws = page.workspace || '';
|
|
var createUrl = '/board/api/pages?title=' + encodeURIComponent((page.title || 'Untitled') + ' (Copy)')
|
|
+ '§ion=' + encodeURIComponent(section) + '&project=' + encodeURIComponent(ws)
|
|
+ '&parent_id=' + parentId;
|
|
var cr = await fetch(createUrl, { method: 'POST', headers: {'X-CSRF-Token': csrf} });
|
|
var created = await cr.json();
|
|
if (page.content) {
|
|
var updUrl = '/board/api/pages/' + created.id + '?content=' + encodeURIComponent(page.content)
|
|
+ '&content_format=' + encodeURIComponent(page.content_format || '');
|
|
await fetch(updUrl, { method: 'PUT', headers: {'X-CSRF-Token': csrf} });
|
|
}
|
|
this.loadTab();
|
|
if (window.showToast) window.showToast('Page duplicated', 'success');
|
|
} catch(e) {
|
|
if (window.showToast) window.showToast('Failed to duplicate page', 'error');
|
|
}
|
|
},
|
|
|
|
// ── Move to (picker modal) ──
|
|
async openMovePicker(ids) {
|
|
this.moreOpen = false;
|
|
this.peekMoreOpen = false;
|
|
if (!ids || !ids.length) return;
|
|
this.moveIds = ids;
|
|
this.moveSearchQuery = '';
|
|
this.moveModalOpen = true;
|
|
try {
|
|
var r = await fetch('/api/library/recents?workspace_id=' + (this.workspaceId || 0));
|
|
var d = await r.json();
|
|
var all = (d.items || []).filter(function(it) { return ids.indexOf(it.id) === -1; });
|
|
this._moveAllCandidates = all;
|
|
this.moveCandidates = all.slice(0, 30);
|
|
} catch(e) {
|
|
this._moveAllCandidates = [];
|
|
this.moveCandidates = [];
|
|
}
|
|
},
|
|
|
|
doMoveSearch() {
|
|
var q = (this.moveSearchQuery || '').toLowerCase().trim();
|
|
if (!q) { this.moveCandidates = this._moveAllCandidates.slice(0, 30); return; }
|
|
this.moveCandidates = this._moveAllCandidates.filter(function(it) {
|
|
return (it.title || '').toLowerCase().indexOf(q) !== -1;
|
|
}).slice(0, 30);
|
|
},
|
|
|
|
async confirmMove(parentId) {
|
|
this.moveModalOpen = false;
|
|
var ids = this.moveIds;
|
|
this.moveIds = [];
|
|
if (!ids || !ids.length) return;
|
|
await this._movePages(ids, parentId);
|
|
if (window.showToast) window.showToast('Page moved', 'success');
|
|
},
|
|
|
|
// ── Item actions ──
|
|
openItem(item) {
|
|
if (!item || !item.id) return;
|
|
window.location.href = '/pages/' + item.id;
|
|
},
|
|
|
|
startRename(item) {
|
|
this.renamingId = item.id;
|
|
this.renameValue = item.title;
|
|
this._renderTable();
|
|
// Focus the rename input
|
|
setTimeout(function() {
|
|
var inp = document.getElementById('rename-inp-' + item.id);
|
|
if (inp) { inp.focus(); inp.select(); }
|
|
}, 50);
|
|
},
|
|
|
|
async commitRename(item) {
|
|
var newName = (this.renameValue || '').trim();
|
|
this.renamingId = null;
|
|
if (!newName || newName === item.title) { this._renderTable(); return; }
|
|
try {
|
|
var csrf = this._getCsrf();
|
|
var r = await fetch('/board/api/pages/' + item.id + '?title=' + encodeURIComponent(newName), {
|
|
method: 'PUT', headers: {'X-CSRF-Token': csrf}
|
|
});
|
|
if (r.ok) {
|
|
item.title = newName;
|
|
}
|
|
} catch(e) {}
|
|
this._renderTable();
|
|
},
|
|
|
|
// ── Add new ──
|
|
async addNewPage(parentId) {
|
|
var name = prompt('Page name:');
|
|
if (!name || !name.trim()) return;
|
|
var csrf = this._getCsrf();
|
|
var section = 'Private';
|
|
try {
|
|
var url = '/board/api/pages?title=' + encodeURIComponent(name.trim())
|
|
+ '§ion=' + encodeURIComponent(section)
|
|
+ '&parent_id=' + (parentId || 0);
|
|
var r = await fetch(url, { method: 'POST', headers: {'X-CSRF-Token': csrf} });
|
|
if (r.ok) {
|
|
var d = await r.json();
|
|
if (parentId) {
|
|
// Refresh the parent's children so the new page appears inline
|
|
var parent = this._findItem(parentId);
|
|
if (parent) {
|
|
this.expanded[parentId] = true;
|
|
try {
|
|
var cr = await fetch('/api/library/children/' + parentId);
|
|
var cd = await cr.json();
|
|
parent.children = cd.items || [];
|
|
} catch(e) {}
|
|
this._recomputeFlatItems();
|
|
this._renderTable();
|
|
return;
|
|
}
|
|
}
|
|
window.location.href = '/pages/' + d.id;
|
|
}
|
|
} catch(e) {
|
|
if (window.showToast) window.showToast('Failed to create page', 'error');
|
|
}
|
|
},
|
|
|
|
newPage() { this.addNewPage(); },
|
|
|
|
// ── Side peek ──
|
|
async openPeek(item) {
|
|
this.peekItem = item;
|
|
this.peekContent = '';
|
|
this.peekLoading = true;
|
|
this.peekFavorited = item.favorited || false;
|
|
try {
|
|
var r = await fetch('/board/api/pages/' + item.id);
|
|
var d = await r.json();
|
|
var content = d.content || '';
|
|
// Simple preview
|
|
if (d.content_format === 'blocks') {
|
|
try {
|
|
var blocks = typeof content === 'string' ? JSON.parse(content) : content;
|
|
var preview = '';
|
|
var lines = Array.isArray(blocks) ? blocks.slice(0, 30) : ((blocks && blocks.blocks) ? blocks.blocks.slice(0, 30) : []);
|
|
for (var i = 0; i < lines.length; i++) {
|
|
var b = lines[i];
|
|
var txt = b.content || b.text || (typeof b === 'string' ? b : '');
|
|
if (txt && txt.trim()) preview += '<div style="margin-bottom:6px;font-size:14px;line-height:1.5;color:var(--text-primary);">' + this._escHtml(String(txt)) + '</div>';
|
|
}
|
|
this.peekContent = preview || '<div style="color:var(--text-dim);">(empty page)</div>';
|
|
} catch(e) {
|
|
this.peekContent = '<pre style="font-size:13px;color:var(--text-primary);white-space:pre-wrap;">' + this._escHtml(String(content).substring(0, 2000)) + '</pre>';
|
|
}
|
|
} else {
|
|
this.peekContent = content ? '<div style="font-size:14px;line-height:1.6;color:var(--text-primary);white-space:pre-wrap;">' + this._escHtml(String(content).substring(0, 2000)) + '</div>' : '';
|
|
}
|
|
} catch(e) {
|
|
this.peekContent = '';
|
|
}
|
|
this.peekLoading = false;
|
|
},
|
|
|
|
closePeek() {
|
|
this.peekItem = null;
|
|
this.peekContent = '';
|
|
},
|
|
|
|
async toggleFavoritePeek() {
|
|
if (!this.peekItem) return;
|
|
var id = this.peekItem.id;
|
|
var csrf = this._getCsrf();
|
|
var method = this.peekFavorited ? 'DELETE' : 'POST';
|
|
var r = await fetch('/board/api/favorites/' + id, {
|
|
method: method, headers: {'X-CSRF-Token': csrf}
|
|
});
|
|
if (r.ok) {
|
|
this.peekFavorited = !this.peekFavorited;
|
|
this.peekItem.favorited = this.peekFavorited;
|
|
if (window.appState && window.appState.refreshFavorites) window.appState.refreshFavorites();
|
|
}
|
|
},
|
|
|
|
copyPeekLink() {
|
|
if (!this.peekItem) return;
|
|
navigator.clipboard.writeText(window.location.origin + '/pages/' + this.peekItem.id);
|
|
if (window.showToast) window.showToast('Link copied', 'success');
|
|
},
|
|
|
|
duplicatePeek() {
|
|
this.peekMoreOpen = false;
|
|
if (!this.peekItem) return;
|
|
this.duplicateItem(this.peekItem);
|
|
},
|
|
|
|
movePeekTo() {
|
|
this.peekMoreOpen = false;
|
|
if (!this.peekItem) return;
|
|
this.openMovePicker([this.peekItem.id]);
|
|
},
|
|
|
|
async deletePeek() {
|
|
this.peekMoreOpen = false;
|
|
if (!this.peekItem) return;
|
|
if (!confirm('Move to Trash?')) return;
|
|
var csrf = this._getCsrf();
|
|
await fetch('/board/api/pages/' + this.peekItem.id, {method:'DELETE', headers:{'X-CSRF-Token': csrf}});
|
|
this.closePeek();
|
|
this.loadTab();
|
|
if (window.showToast) window.showToast('Moved to trash', 'success');
|
|
},
|
|
|
|
// ── Time formatting ──
|
|
formatTime(d) {
|
|
if (!d) return '—';
|
|
try {
|
|
var dt = new Date(d);
|
|
if (isNaN(dt.getTime())) return d;
|
|
var now = new Date();
|
|
var diff = now - dt;
|
|
var mins = Math.floor(diff/60000);
|
|
if (mins < 1) return 'Just now';
|
|
if (mins < 60) return mins + 'm ago';
|
|
var hours = Math.floor(mins/60);
|
|
if (hours < 24) return hours + 'h ago';
|
|
var days = Math.floor(hours/24);
|
|
if (days < 7) return days + 'd ago';
|
|
if (days < 30) return Math.floor(days/7) + 'w ago';
|
|
return dt.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});
|
|
} catch(e) { return d; }
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
{% endblock %}
|