greenflame089
44 lines
2.7 KiB
Markdown
44 lines
2.7 KiB
Markdown
# Design Overview
|
||
|
||
## Purpose
|
||
|
||
Q‑Edit allows users to **review, edit, or “delete”** (blank out) their published QDN content on the Qortal network. The redesign modernizes the UI into a **single‑view file explorer** with persistent media playback and a richer Preview experience, and prepares for future features like **search**, **Q‑Notes (private notepad)**, and workspace tools.
|
||
|
||
## Current Layout (post‑overhaul shell)
|
||
|
||
- **Top bar (one line):**
|
||
- App title (left)
|
||
- Search icon button (center/right): opens the **Search** page (placeholder today)
|
||
- **Global media controls** (header): ⏯ Play/Pause, ⏹ Stop, “Now playing” title
|
||
- Authenticate button / **Name switcher** (right)
|
||
- **Left sidebar: File tree**
|
||
- Services shown as **folders** with item counts; services with 0 items are hidden
|
||
- Under each service: identifiers grouped by **prefix** (e.g., `qtube_`) as subfolders (collapsed by default)
|
||
- Clicking a folder filters the content table (Content view)
|
||
- Clicking a leaf opens the **Preview** page for that item
|
||
- In Search mode: tree renders results and clicking folders filters the Search table; a sidebar toggle lets you **Group by Name** (publisher name as top-level, then service/prefix)
|
||
- **Main area:** exactly **one page visible** at a time
|
||
- **Content** (table with filters, pagination, bulk delete)
|
||
- **Preview** (full‑page preview with actions: Edit / Replace / Delete)
|
||
- **Search** (shell; form/results to be wired up next)
|
||
- **Info** (account and tips)
|
||
|
||
## Interaction Model
|
||
|
||
- **Single‑view routing:** `showSection('content'|'preview'|'search'|'info')` ensures pages do **not overlap**.
|
||
- **Context banner (above tree):** Indicates **“My Files — {name}”** or **“Search Results”**. “Back to My Files” exits search mode.
|
||
- **Filters:**
|
||
- _Chips_ for service inclusion (existing behavior), plus **Hide Deleted** toggle.
|
||
- Tree click narrows to service/prefix; leaf opens Preview.
|
||
- **Preview page:**
|
||
- Full content display (rich text/HTML via sandboxed iframe, **JSON pretty‑printed**, **PDF inline** via iframe, images/video/audio with responsive sizing)
|
||
- Header **actions**: ✏️ Edit, 📁 Replace, 🗑 Delete
|
||
- **Bulk Delete:** Identify multiple items and publish tiny placeholder content to mark them as deleted on QDN.
|
||
|
||
## Media Persistence Design
|
||
|
||
- Media **does not move** to the header on play.
|
||
- When navigating away from a page **while media is playing**, the element is **promoted** to a hidden global host and continues playing; header controls appear.
|
||
- When **Stop** is pressed, playback resets and any Blob URL is revoked to free memory.
|
||
- Header controls allow Play/Pause/Stop regardless of current view.
|