q-edit/docs/design-overview.md

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.