You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
1. Introduction * This report outlines proposals for improving the User Interface (UI) and User Experience (UX) of the tldw-cli application. The suggestions are based on an analysis of the application's Python codebase (primarily tldw_app/app.py, widget files, and CSS). The goal is to enhance usability, clarity, and efficiency for you.
55
+
56
+
2. General UI/UX Principles Applied * Clarity: The UI should be easy to understand, and the purpose of different elements should be clear. * Consistency: Similar UI elements should behave similarly and be styled consistently. * Efficiency: You should be able to accomplish tasks with minimal effort and steps. * Feedback: The application should provide clear feedback for your actions. * Error Prevention & Handling: Minimize the chance of errors and provide helpful messages when errors occur.
57
+
58
+
3. Specific Improvement Proposals
59
+
60
+
**3.1. Tab Structure and Purpose**
61
+
* **Issue**: Significant functional overlap exists between `TAB_CHAT` and `TAB_CONV_CHAR`, particularly in managing and searching for conversations. This can lead to your confusion regarding where to perform these actions. Additionally, placeholder tabs (`TAB_MEDIA`, `TAB_SEARCH`, `TAB_INGEST`, `TAB_STATS`) add clutter to the interface without providing current functionality.
62
+
* **Proposals**:
63
+
* **Primary Recommendation: Merge `TAB_CHAT` and `TAB_CONV_CHAR` into a single "Conversations" Tab.**
64
+
* This unified tab would adopt a three-pane layout:
65
+
* Left Pane: List of all conversations (searchable/filterable), button to start a "New Chat".
66
+
* Center Pane: Message history of the selected/active conversation, including the chat input area.
67
+
* Right Pane: Contextual details (editable title, keywords, associated character info), chat-specific settings (e.g., system prompt for this chat), and export options.
68
+
* Global LLM settings (provider, model, default parameters) should be relocated to a dedicated "Application Settings" tab or a modal dialog.
69
+
* **Alternative (If Merging is Not Feasible): Clearly Differentiate `TAB_CHAT` and `TAB_CONV_CHAR`.**
70
+
* `TAB_CHAT`: Focus on active/new chats. Its left sidebar (`settings_sidebar`) should only contain LLM settings. No conversation history browsing.
71
+
* `TAB_CONV_CHAR`: Dedicated to archived conversations and character management, retaining its three-pane layout for detailed browsing and management.
72
+
* **Placeholder Tabs**: Remove `TAB_MEDIA`, `TAB_SEARCH`, `TAB_INGEST`, `TAB_STATS` from the default tab bar. List them in a "Help" or "About" section under "Future Features," or make their visibility configurable in `config.toml` (hidden by default).
73
+
* **Justification**: Merging or clearly differentiating conversation-related tabs will create a more intuitive workflow, reduce redundancy, and simplify the main navigation. Removing placeholder tabs declutters the UI.
74
+
75
+
**3.2. Sidebar Usage and Content**
76
+
* **Issue**: The Chat tab's left sidebar (`settings_sidebar` with `id_prefix="chat"`) is overloaded with diverse functionalities. The Notes tab sidebars exhibit redundant buttons and a fragmented save mechanism. A general issue is the excessive default width (`70` units) for all sidebars, which cramps main content areas.
77
+
* **Proposals**:
78
+
* **Chat Tab Left Sidebar (`settings_sidebar` for "chat")**:
79
+
* Relocate global LLM settings (provider, model, parameters) to a dedicated app settings area/modal.
80
+
* "Current Conversation Details" (title, keywords) should be part of the main chat context (e.g., in the right pane of the proposed merged "Conversations" tab).
81
+
* Remove the "Saved Conversations" section; this functionality belongs to the left pane of the merged "Conversations" tab.
* In `NotesSidebarLeft`, consolidate all note actions (Create New, Load, Save, Delete) within the "Notes Actions" `Collapsible`. Remove redundant standalone "New Note" and "Delete Selected Note" buttons.
84
+
* Unify the "Save Keywords" button (from `NotesSidebarRight`) with the main "Save Current Note" action to persist all note changes (title, content, keywords) simultaneously.
85
+
* **General Sidebar Width**: In `tldw_cli.tcss`, reduce the default width for `.sidebar` and `#character-sidebar` from `70` to a more appropriate `35` to `45` units.
86
+
* **Justification**: These changes will improve the information hierarchy within sidebars, reduce visual clutter, make main content areas more spacious and usable, and streamline your actions like saving notes.
87
+
88
+
**3.3. Layout of Multi-Pane Tabs**
89
+
* **Issue**: Multi-pane layouts in `TAB_CONV_CHAR` and `TAB_NOTES` can feel cramped and overwhelming, especially with the current wide sidebar definitions.
* Maintain the three-pane layout (Navigation | Content | Details) as it's powerful for management tasks.
93
+
* Crucially, implement the sidebar width reduction (e.g., side panes to 25-30% or fixed 35-45 units).
94
+
* Use `Collapsible` sections within the right pane if its content grows, to maintain organization.
95
+
* **`TAB_NOTES`**:
96
+
* After significantly reducing sidebar widths, further improve by adopting a two-pane layout.
97
+
* **Recommended**: Remove `NotesSidebarRight`. Integrate its content (note title `Input`, keywords `TextArea`) into `NotesSidebarLeft`, perhaps below the notes list or in a dedicated collapsible section for "Selected Note Details."
98
+
* This results in a clearer layout: Left Pane (Note List & Details/Actions) and Center Pane (Note Editor).
99
+
* **Justification**: Optimizing layouts for the terminal's typically constrained horizontal space is key. These changes aim to provide more room for primary content (chat messages, note editing) while keeping necessary controls accessible.
100
+
101
+
**3.4. UI Consistency**
102
+
* **Issue**: Minor inconsistencies observed in sidebar toggle iconography, search input behavior, button styling/phrasing, default states of collapsibles, and user feedback mechanisms.
103
+
* **Proposals**:
104
+
* **Sidebar Toggles**: Standardize toggle icons (e.g., "☰" for most, "👤" for character sidebar is fine). Aim for consistent placement logic relative to the sidebar they control.
105
+
* **Search Functionality**: Apply debouncing to search inputs where appropriate (already done for conversations, consider for notes if search becomes intensive). Standardize placeholder text (e.g., "Search [item type]...") and the presentation of "no results" messages.
106
+
* **Buttons**:
107
+
* Strive for consistent sizing for common action buttons in sidebars/control areas, unless specific context demands otherwise.
108
+
* Standardize button labels for similar actions (e.g., prefer "New Note" over "Create New Note" if "New" is used elsewhere for creation).
109
+
* Continue consistent use of semantic variants (`primary` for confirmation, `success` for positive actions, `error` for destructive actions).
110
+
* **Collapsible Sections**: Ensure the default collapsed/expanded state is logical and consistent (e.g., less-used options collapsed by default).
111
+
* **Error Messages & Notifications**: Consistently use `app.notify()` for non-blocking information, warnings, or success confirmations. For errors displayed directly in the UI (like in `ChatMessage`), maintain a standard, clear format (e.g., `[bold red]Error: ...[/]`).
112
+
* **Justification**: A consistent UI is more intuitive, easier to learn, and feels more polished and predictable for you.
113
+
114
+
4. Summary of Key Recommendations * Merge TAB_CHAT and TAB_CONV_CHAR: Create a single, unified "Conversations" tab for all chat-related activities. * Overhaul Chat Tab's Left Sidebar: Relocate global LLM settings and remove duplicated conversation management features. * Reduce Sidebar Widths: Change default sidebar width from 70 to ~35-45 units. * Streamline Notes Tab: Convert to a two-pane layout (List & Details | Editor) by consolidating elements from the right sidebar into the left. * Systematically Enhance UI Consistency: Focus on toggles, search, buttons, collapsibles, and user feedback.
115
+
116
+
5. Next Steps (for implementation) * Discuss these proposals with the project stakeholders and development team. * Prioritize the suggested changes based on their potential impact on usability and the effort required for implementation. * Implement changes iteratively, ideally gathering your feedback at various stages to validate improvements.
0 commit comments