mirror of
https://github.com/alexpasmantier/television.git
synced 2025-07-29 14:21:43 +00:00
1 line
32 KiB
JavaScript
1 line
32 KiB
JavaScript
"use strict";(self.webpackChunktelevision_website=self.webpackChunktelevision_website||[]).push([[3541],{1280:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>a,default:()=>h,frontMatter:()=>t,metadata:()=>i,toc:()=>d});const i=JSON.parse('{"id":"Developers/ui-features","title":"UI Features documentation","description":"Table of Contents","source":"@site/../docs/02-Developers/02-ui-features.md","sourceDirName":"02-Developers","slug":"/Developers/ui-features","permalink":"/television/docs/Developers/ui-features","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":2,"frontMatter":{},"sidebar":"docSidebar","previous":{"title":"Architecture Documentation","permalink":"/television/docs/Developers/ARCHITECTURE"},"next":{"title":"Patch notes","permalink":"/television/docs/Developers/patch-notes"}}');var l=s(3420),r=s(5404);const t={},a="UI Features documentation",o={},d=[{value:"Overview",id:"overview",level:2},{value:"Architecture",id:"architecture",level:2},{value:"Context Diagram",id:"context-diagram",level:3},{value:"Feature Components",id:"feature-components",level:2},{value:"Preview Panel",id:"preview-panel",level:3},{value:"Status Bar",id:"status-bar",level:3},{value:"Help Panel",id:"help-panel",level:3},{value:"Remote Control",id:"remote-control",level:3},{value:"State Management",id:"state-management",level:2},{value:"Configuration System",id:"configuration-system",level:2},{value:"Configuration Formats",id:"configuration-formats",level:3},{value:"Configuration Inheritance",id:"configuration-inheritance",level:3},{value:"Default UI Feature States",id:"default-ui-feature-states",level:3},{value:"Feature State Persistence",id:"feature-state-persistence",level:3},{value:"Examples",id:"examples",level:2},{value:"Basic Feature Control",id:"basic-feature-control",level:3},{value:"Channel-Specific Configuration",id:"channel-specific-configuration",level:3},{value:"Runtime Feature Management",id:"runtime-feature-management",level:3}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.header,{children:(0,l.jsx)(n.h1,{id:"ui-features-documentation",children:"UI Features documentation"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Table of Contents"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"#overview",children:"Overview"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"#architecture",children:"Architecture"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"#feature-components",children:"Feature Components"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"#state-management",children:"State Management"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"#configuration-system",children:"Configuration System"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"#examples",children:"Examples"})}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"overview",children:"Overview"}),"\n",(0,l.jsx)(n.p,{children:"The UI Features System allows control over UI components using two properties:"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Enabled/Disabled"}),": Whether the feature's functionality is available"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Visible/Hidden"}),": Whether the feature is displayed in the interface"]}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:["This design pattern allows for UI management where features can exist in three meaningful states: ",(0,l.jsx)(n.strong,{children:"Active"})," (enabled and visible), ",(0,l.jsx)(n.strong,{children:"Hidden"})," (enabled but not visible), and ",(0,l.jsx)(n.strong,{children:"Disabled"})," (completely inactive)."]}),"\n",(0,l.jsx)(n.h2,{id:"architecture",children:"Architecture"}),"\n",(0,l.jsx)(n.p,{children:"UI Features sit at the intersection of several core Television modules, acting as a central coordination point for UI state management."}),"\n",(0,l.jsx)(n.h3,{id:"context-diagram",children:"Context Diagram"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-text",children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 CLI Module \u2502\u2500\u2500\u2500\u25ba\u2502 UI Features System \u2502\u25c4\u2500\u2500\u2500\u2502 Config Module \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n \u2502\n \u25bc\n \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n \u2502 Screen/Layout \u2502\n \u2502 Module \u2502\n \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n \u2502\n \u25bc\n \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n \u2502 UI Render \u2502\n \u2502 System \u2502\n \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsx)(n.h2,{id:"feature-components",children:"Feature Components"}),"\n",(0,l.jsx)(n.p,{children:"It currently supports four primary UI features, each with distinct functionality and use cases."}),"\n",(0,l.jsxs)(n.p,{children:["In this view you can see the ",(0,l.jsx)(n.code,{children:"Preview"}),", ",(0,l.jsx)(n.code,{children:"Help Panel"}),", and ",(0,l.jsx)(n.code,{children:"Status Bar"})]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-text",children:"\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Channel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 PREVIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\n\u2502> 1 / 1 \u2502\u2502 \u25b2\u2502\n\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2502 \u2588\u2502\n\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Results \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u2502 \u2551\u2502\n\u2502> TELEVISION \u2502\u2502 \u2551\u2502\n\u2502 \u2502\u2502 \u2551\u2502\n\u2502 \u2502\u2502 \u2551\u2502\n\u2502 \u2502\u2502 \u2551\u2502\n\u2502 \u2502\u2502 \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Help \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u2551\u2502\n\u2502 \u2502\u2502 \u2502 Global \u2502\u2551\u2502\n\u2502 \u2502\u2502 \u2502 Quit: Esc \u2502\u2551\u2502\n\u2502 \u2502\u2502 \u2502 Quit: Ctrl-c \u2502\u2551\u2502\n\u2502 \u2502\u2502 \u2502 Toggle preview: Ctrl-o \u2502\u2551\u2502\n\u2502 \u2502\u2502 \u2502 Toggle help: Ctrl-h \u2502\u2551\u2502\n\u2502 \u2502\u2502 \u2502 Toggle status bar: F12 \u2502\u2551\u2502\n\u2502 \u2502\u2502 \u2502 \u2502\u2551\u2502\n\u2502 \u2502\u2502 \u2502 Channel \u2502\u2551\u2502\n\u2502 \u2502\u2502 \u2502 Navigate up: Up \u2502\u2551\u2502\n\u2502 \u2502\u2502 \u2502 Navigate up: Ctrl-p \u2502\u2551\u2502\n\u2502 \u2502\u2502 \u2502 Navigate up: Ctrl-k \u2502\u2551\u2502\n\u2502 \u2502\u2502 \u2502 Navigate down: Down \u2502\u2551\u2502\n\u2502 \u2502\u2502 \u2502 Navigate down: Ctrl-n \u2502\u2551\u2502\n\u2502 \u2502\u2502 \u2502 Navigate down: Ctrl-j \u2502\u2551\u2502\n\u2502 \u2502\u2502 \u2502 ... \u2502\u2551\u2502\n\u2502 \u2502\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u25bc\u2502\n\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\n CHANNEL custom [Hint] Remote Control: Ctrl-t \u2022 Hide Preview: Ctrl-o \u2022 Help: Ctrl-h v0.00.0\n"})}),"\n",(0,l.jsxs)(n.p,{children:["And here you can see the ",(0,l.jsx)(n.code,{children:"Remote Control"})]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-text",children:"\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Channel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\n\u2502> 1 / 1 \u2502\n\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\n\u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Results \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\n\u2502> TELEVISION \u2502\n\u2502 \u2502\n\u2502 \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Channels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500\u2500\u2500\u2500 Description \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e \u2502\n\u2502 \u2502> alias \u2502\u2502A channel to select from \u2502 _____________ \u2502\n\u2502 \u2502 \u2502\u2502shell aliases \u2502 / \\ \u2502\n\u2502 \u2502 \u2502\u2502 \u2502 | (*) (#) | \u2502\n\u2502 \u2502 \u2502\u2502 \u2502 | | \u2502\n\u2502 \u2502 \u2502\u2502 \u2502 | (1) (2) (3) | \u2502\n\u2502 \u2502 \u2502\u2502 \u2502 | (4) (5) (6) | \u2502\n\u2502 \u2502 \u2502\u2502 \u2502 | (7) (8) (9) | \u2502\n\u2502 \u2502 \u2502\u2502 \u2502 | _ | \u2502\n\u2502 \u2502 \u2502\u2502 \u2502 | | | | \u2502\n\u2502 \u2502 \u2502\u2502 \u2502 | (_\xaf(0)\xaf_) | \u2502\n\u2502 \u2502 \u2502\u2502 \u2502 | | | | \u2502\n\u2502 \u2502 \u2502\u2502 \u2502 | \xaf | \u2502\n\u2502 \u2502 \u2502\u2502 \u2502 | | \u2502\n\u2502 \u2502 \u2502\u2502 \u2502 | === === === | \u2502\n\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f | | \u2502\n\u2502 \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Search \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\u256d\u2500\u2500\u2500 Requirements [OK] \u2500\u2500\u2500\u2500\u256e | TV | \u2502\n\u2502 \u2502> \u2502\u2502 \u2502 `-------------\xb4 \u2502\n\u2502 \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f \u2502\n\u2502 \u2502\n\u2502 \u2502\n\u2502 \u2502\n\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\n REMOTE [Hint] Back to Channel: Ctrl-t \u2022 Help: Ctrl-h v0.00.0\n"})}),"\n",(0,l.jsx)(n.h3,{id:"preview-panel",children:"Preview Panel"}),"\n",(0,l.jsx)(n.p,{children:"Displays contextual information about the currently selected entry"}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"Default State"}),": Enabled and Visible\n",(0,l.jsx)(n.strong,{children:"Configuration Files options"}),":"]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"size"}),": Width percentage (1-99)"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"header"}),": Optional template for panel header"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"footer"}),": Optional template for panel footer"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"scrollbar"}),": Whether to show scroll indicators"]}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"CLI Flags"}),": ",(0,l.jsx)(n.code,{children:"--no-preview"}),", ",(0,l.jsx)(n.code,{children:"--hide-preview"}),", ",(0,l.jsx)(n.code,{children:"--show-preview"}),", ",(0,l.jsx)(n.code,{children:"--preview-*"})," flags"]}),"\n",(0,l.jsx)(n.h3,{id:"status-bar",children:"Status Bar"}),"\n",(0,l.jsx)(n.p,{children:"Shows application status, mode information, and available actions"}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"Default State"}),": Enabled and Visible\n",(0,l.jsx)(n.strong,{children:"Configuration"}),":"]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"separator_open"}),": Opening separator character/string"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"separator_close"}),": Closing separator character/string"]}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"CLI Controls"}),": ",(0,l.jsx)(n.code,{children:"--no-status-bar"}),", ",(0,l.jsx)(n.code,{children:"--hide-status-bar"}),", ",(0,l.jsx)(n.code,{children:"--show-status-bar"})]}),"\n",(0,l.jsx)(n.h3,{id:"help-panel",children:"Help Panel"}),"\n",(0,l.jsx)(n.p,{children:"Displays contextual help and keyboard shortcuts"}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"Default State"}),": Enabled but Hidden\n",(0,l.jsx)(n.strong,{children:"Configuration"}),":"]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"show_categories"}),": Whether to group shortcuts by category"]}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"CLI Controls"}),": ",(0,l.jsx)(n.code,{children:"--no-help-panel"}),", ",(0,l.jsx)(n.code,{children:"--hide-help-panel"}),", ",(0,l.jsx)(n.code,{children:"--show-help-panel"})]}),"\n",(0,l.jsx)(n.h3,{id:"remote-control",children:"Remote Control"}),"\n",(0,l.jsx)(n.p,{children:"Provides channel switching and management interface"}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"Default State"}),": Enabled but Hidden\n",(0,l.jsx)(n.strong,{children:"Configuration"}),":"]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"show_channel_descriptions"}),": Include channel descriptions in listing"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"sort_alphabetically"}),": Sort channels alphabetically vs. by usage"]}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"CLI Controls"}),": ",(0,l.jsx)(n.code,{children:"--no-remote"}),", ",(0,l.jsx)(n.code,{children:"--hide-remote"}),", ",(0,l.jsx)(n.code,{children:"--show-remote"})]}),"\n",(0,l.jsx)(n.h2,{id:"state-management",children:"State Management"}),"\n",(0,l.jsx)(n.p,{children:"Logical state transitions with are enforced with built-in constraints:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-text",children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 enable() \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 Disabled \u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u25ba\u2502 Active \u2502\n\u2502 enabled=F \u2502 \u2502 enabled=T \u2502\n\u2502 visible=F \u2502 \u2502 visible=T \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n \u25b2 \u2502\n \u2502 \u2502 hide()\n \u2502 \u25bc\n \u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502 Hidden \u2502\n disable() \u2502 enabled=T \u2502\n \u2502 visible=F \u2502\n \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n \u2502\n \u2502 show()\n \u25bc\n \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n \u2502 Active \u2502\n \u2502 enabled=T \u2502\n \u2502 visible=T \u2502\n \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsx)(n.h2,{id:"configuration-system",children:"Configuration System"}),"\n",(0,l.jsx)(n.p,{children:"The UI Features system configuration follows a layered priority system:"}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"CLI Flags"})," (Highest Priority)"]}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.strong,{children:"Channel Configuration"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.strong,{children:"User Configuration File"})}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Built-in Defaults"})," (Lowest Priority)"]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"configuration-formats",children:"Configuration Formats"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"TOML Configuration Syntax"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-toml",children:'[ui.features]\npreview_panel = { enabled = true, visible = true }\nhelp_panel = { enabled = true, visible = false }\nstatus_bar = { enabled = true, visible = true }\nremote_control = { enabled = true, visible = false }\n\n[ui.preview_panel]\nsize = 50\nheader = "{}"\nfooter = ""\nscrollbar = true\n\n[ui.status_bar]\nseparator_open = ""\nseparator_close = ""\n\n[ui.remote_control]\nshow_channel_descriptions = true\nsort_alphabetically = true\n'})}),"\n",(0,l.jsx)(n.h3,{id:"configuration-inheritance",children:"Configuration Inheritance"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"User Global Configuration"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-toml",children:"# ~/.config/television/config.toml\n[ui.features]\nhelp_panel = { enabled = true, visible = true } # Always show help for learning\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Channel-Level Configuration"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-toml",children:"# ~/.config/television/cable/development.toml\n[ui.features]\npreview_panel = { enabled = true, visible = true }\nstatus_bar = { enabled = true, visible = false } # Hidden by default for focus\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Runtime Override Examples"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Override channel defaults\ntv development --show-status-bar --hide-preview\n\n# Force features on/off\ntv files --no-remote --show-help-panel\n\n# Mixed visibility control\ntv git-log --hide-status-bar --show-preview\n"})}),"\n",(0,l.jsx)(n.h3,{id:"default-ui-feature-states",children:"Default UI Feature States"}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:"UI Feature"}),(0,l.jsx)(n.th,{children:"Default Enabled"}),(0,l.jsx)(n.th,{children:"Default Visible"}),(0,l.jsx)(n.th,{children:"Rationale"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.strong,{children:"Preview Panel"})}),(0,l.jsx)(n.td,{children:"\u2705"}),(0,l.jsx)(n.td,{children:"\u2705"}),(0,l.jsx)(n.td,{children:"Core functionality"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.strong,{children:"Status Bar"})}),(0,l.jsx)(n.td,{children:"\u2705"}),(0,l.jsx)(n.td,{children:"\u2705"}),(0,l.jsx)(n.td,{children:"Shows mode and contextual hint to the user"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.strong,{children:"Help Panel"})}),(0,l.jsx)(n.td,{children:"\u2705"}),(0,l.jsx)(n.td,{children:"\u274c"}),(0,l.jsx)(n.td,{children:"Available on-demand to avoid clutter"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.strong,{children:"Remote Control"})}),(0,l.jsx)(n.td,{children:"\u2705"}),(0,l.jsx)(n.td,{children:"\u274c"}),(0,l.jsx)(n.td,{children:"Available on-demand, disrupts regular operation"})]})]})]}),"\n",(0,l.jsx)(n.h3,{id:"feature-state-persistence",children:"Feature State Persistence"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"What Persists Across Sessions"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["\u2705 ",(0,l.jsx)(n.strong,{children:"Configuration file settings"})," - Feature states defined in ",(0,l.jsx)(n.code,{children:"~/.config/television/config.toml"})]}),"\n",(0,l.jsxs)(n.li,{children:["\u2705 ",(0,l.jsx)(n.strong,{children:"Channel-specific defaults"})," - Feature configurations built into channel definitions"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"What Does Not Persist"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["\u274c ",(0,l.jsx)(n.strong,{children:"Runtime toggles"})," - Keyboard shortcuts like ",(0,l.jsx)(n.code,{children:"Tab"})," (preview) or ",(0,l.jsx)(n.code,{children:"F2"})," (status bar) are session-only"]}),"\n",(0,l.jsxs)(n.li,{children:["\u274c ",(0,l.jsx)(n.strong,{children:"CLI flag overrides"})," - ",(0,l.jsx)(n.code,{children:"--hide-preview"}),", ",(0,l.jsx)(n.code,{children:"--show-status-bar"})," etc. apply only to current session"]}),"\n",(0,l.jsxs)(n.li,{children:["\u274c ",(0,l.jsx)(n.strong,{children:"Temporary state changes"})," - Any feature visibility changes made during application use"]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"examples",children:"Examples"}),"\n",(0,l.jsx)(n.h3,{id:"basic-feature-control",children:"Basic Feature Control"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Hide Preview Panel"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"tv files --hide-preview\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Disable All Optional Features"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"tv files --no-preview --no-status-bar --no-remote --no-help-panel\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Show All Features"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"tv files --show-preview --show-status-bar --show-help-panel\n"})}),"\n",(0,l.jsx)(n.h3,{id:"channel-specific-configuration",children:"Channel-Specific Configuration"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Create Development Channel with Custom Features"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-toml",children:"# ~/.config/television/cable/dev-focused.toml\n[ui.features]\npreview_panel = { enabled = true, visible = true }\nstatus_bar = { enabled = true, visible = false } # Clean interface\nhelp_panel = { enabled = true, visible = false } # Help on-demand\nremote_control = { enabled = false } # Single-channel focus\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Usage"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"tv dev-focused /path/to/project\n"})}),"\n",(0,l.jsx)(n.h3,{id:"runtime-feature-management",children:"Runtime Feature Management"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Quick Interface Cleanup"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Start with full interface\ntv files\n\n# Runtime toggles (using default keybindings):\n# Ctrl+O - Toggle preview panel\n# F12 - Toggle status bar\n# Ctrl-H - Toggle help panel\n"})})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(c,{...e})}):c(e)}}}]); |