Replace content CLI with Textual TUI

tools/content/tui/app.tcss

@@ -0,0 +1,252 @@
+Screen {
+    background: $background;
+}
+
+Header {
+    background: $panel;
+    color: $foreground;
+}
+
+HeaderTitle {
+    color: $primary;
+    text-style: bold;
+}
+
+TabbedContent {
+    height: 1fr;
+}
+
+ContentTabs {
+    background: $background;
+}
+
+Tab {
+    color: $text-muted;
+}
+
+Tab.-active {
+    color: $primary;
+    text-style: bold;
+}
+
+Tab:hover {
+    color: $foreground;
+}
+
+Underline > .underline--bar {
+    color: $primary;
+    background: $panel;
+}
+
+TabPane {
+    padding: 0;
+}
+
+ContentPane {
+    height: 1fr;
+    margin: 1 1 0 1;
+    background: $surface;
+    border: solid $border-blurred;
+    border-title-color: $text-muted;
+    border-subtitle-color: $text-muted;
+}
+
+ContentPane:focus-within {
+    border: solid $primary;
+    border-title-color: $primary;
+    border-subtitle-color: $accent;
+}
+
+ContentPane DataTable {
+    height: 1fr;
+    background: $surface;
+}
+
+DataTable > .datatable--header {
+    background: $surface;
+    color: $accent;
+    text-style: bold;
+}
+
+DataTable > .datatable--even-row {
+    background: $surface;
+}
+
+DataTable > .datatable--odd-row {
+    background: $panel 40%;
+}
+
+.split-layout {
+    height: 1fr;
+}
+
+.split-layout DataTable {
+    width: 3fr;
+}
+
+.detail-scroll {
+    width: 2fr;
+    padding: 0 1;
+    background: $surface;
+    border-left: solid $border-blurred;
+}
+
+ContentPane:focus-within .detail-scroll {
+    border-left: solid $primary;
+}
+
+Footer {
+    background: $panel;
+}
+
+FormDialog,
+ConfirmDialog {
+    align: center middle;
+    background: $background 60%;
+}
+
+.dialog {
+    width: 72;
+    height: auto;
+    max-width: 95%;
+    padding: 1 2;
+    background: $surface;
+    border: solid $primary;
+}
+
+.dialog-title {
+    color: $primary;
+    text-style: bold;
+}
+
+.field-label {
+    margin-top: 1;
+    color: $text-muted;
+}
+
+.dialog Input,
+.dialog Select {
+    width: 100%;
+}
+
+.dialog Input {
+    background: $background;
+    border: solid $border-blurred;
+}
+
+.dialog Input:focus {
+    border: solid $primary;
+}
+
+#dialog-error {
+    height: auto;
+    margin-top: 1;
+    color: $error;
+}
+
+.dialog-buttons {
+    height: auto;
+    margin-top: 1;
+    align-horizontal: right;
+}
+
+.dialog-buttons Button {
+    margin-left: 1;
+    border: none;
+    min-width: 10;
+}
+
+Toast {
+    background: $panel;
+    border-left: outer $primary;
+}
+
+RecordEditor {
+    background: $background;
+}
+
+.editor-title {
+    width: 100%;
+    padding: 0 2;
+    background: $panel;
+    color: $primary;
+    text-style: bold;
+}
+
+.editor-form {
+    margin: 1 2 0 2;
+    padding: 0 2 1 2;
+    background: $surface;
+    border: solid $primary;
+}
+
+.editor-form Input,
+.editor-form Select {
+    width: 100%;
+    background: $background;
+    border: solid $border-blurred;
+}
+
+.editor-form Input:focus,
+.editor-form TextArea:focus {
+    border: solid $primary;
+}
+
+.editor-area {
+    height: 6;
+    background: $background;
+    border: solid $border-blurred;
+}
+
+.editor-area.longtext {
+    height: 8;
+}
+
+#editor-error {
+    height: auto;
+    margin-top: 1;
+    color: $error;
+}
+
+.field-row {
+    height: auto;
+}
+
+.field-row Input {
+    width: 1fr;
+}
+
+.browse-button {
+    min-width: 10;
+    margin-left: 1;
+    border: none;
+}
+
+.swatch {
+    width: 8;
+    height: 3;
+    margin-left: 1;
+    content-align: center middle;
+    border: solid $border-blurred;
+}
+
+.picker {
+    width: 80;
+    height: 80%;
+}
+
+.picker OptionList {
+    height: 1fr;
+    margin-top: 1;
+    background: $background;
+    border: solid $border-blurred;
+}
+
+.picker OptionList:focus {
+    border: solid $primary;
+}
+
+#category-select {
+    width: 100%;
+    margin: 0 0 1 0;
+}