# 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.