From a358a20556fa08c19531531671dcf13fdd7448c1 Mon Sep 17 00:00:00 2001 From: NamPDT Date: Tue, 18 Aug 2026 09:15:31 +0900 Subject: [PATCH] fix(ui): assistant takes the page's own colours and name; collapsed rail stops sliding MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The panel still said "Trợ lý App". I reported that name as changed several turns ago — I had added help_agent.badge for the launcher pill and never touched help_agent.title, so the panel header kept the old name in all three languages. It is "AI Assistant" now, as the audit page names it. Colours were invented rather than read. docs/ui-audit.html draws the assistant in a fixed teal — .fab background #E6F6F4, border #7FD0C4, .spark #0F9B8A, pill text #0F6E62 — and the app was using the theme accent instead. The dot, the hover pill, the edge tab and the sparkle now use those values, so the floating assistant is one recognisable object rather than something that changes colour with the theme. The panel header also shows the sparkle instead of the app's own icon.png, which is what made the header look unrelated to the dot that opens it. Collapsed rail: the nav tree kept sizing its column to the widest label, so at 54px it was ~100px wide inside a 66px viewport and grew a horizontal scrollbar — which slid the icons off the x they hold while the rail is open. The column now stretches to the viewport and horizontal scrolling is off; the first item's x is 0 in both states, measured. Co-Authored-By: Claude Opus 5 (1M context) --- app.py | 7 +++++++ i18n.py | 4 +++- ui/help_agent_widget.py | 29 ++++++++++++++++++----------- 3 files changed, 28 insertions(+), 12 deletions(-) diff --git a/app.py b/app.py index c42017a..e76c8ba 100644 --- a/app.py +++ b/app.py @@ -448,6 +448,13 @@ class MainWindow(QMainWindow): tree.setIndentation(0) tree.setRootIsDecorated(False) tree.setUniformRowHeights(True) + # The column follows the viewport instead of the widest label. Left + # to size itself it stayed ~100px wide inside the 54px collapsed + # rail, so a horizontal scrollbar appeared and slid the icons out of + # the position they hold while the rail is open. + from PySide6.QtWidgets import QHeaderView + tree.header().setSectionResizeMode(0, QHeaderView.Stretch) + tree.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff) return tree def _nav_rows(self): diff --git a/i18n.py b/i18n.py index 6adb66b..788b5f3 100644 --- a/i18n.py +++ b/i18n.py @@ -486,7 +486,9 @@ STRINGS: Dict[str, Dict[str, str]] = { "chat.assistant": {"en": "Assistant", "ja": "アシスタント", "vi": "Assistant"}, "chat.error": {"en": "Error", "ja": "エラー", "vi": "Lỗi"}, "help_agent.title": { - "en": "App Assistant", "ja": "アプリアシスタント", "vi": "Trợ lý App"}, + # The audit page names this AI Assistant, and keeps it the same in every + # language — it is a product name, not a description. + "en": "AI Assistant", "ja": "AI Assistant", "vi": "AI Assistant"}, "help_agent.greeting": { "en": "Hello {name}, have a great working day! How can I help you use the app?", "ja": "こんにちは {name} さん、良い一日を！アプリの使い方について何かお手伝いできますか？", diff --git a/ui/help_agent_widget.py b/ui/help_agent_widget.py index e6224d7..016982e 100644 --- a/ui/help_agent_widget.py +++ b/ui/help_agent_widget.py @@ -42,6 +42,12 @@ _PILL_PAD = 12 # extra width for the label when hovered _TAB_W, _TAB_H = 28, 48 # the "show" tab when hidden at the edge (was 16 wide) _PANEL_W, _PANEL_H = 340, 460 # expanded chat panel size +# Straight from docs/ui-audit.html (.wf .fab / .fabpill / .spark): the +# assistant is teal, not the app accent, and the same in both themes — +# it is one recognisable object floating over every screen. +_TEAL_BG, _TEAL_LINE = "#E6F6F4", "#7FD0C4" +_TEAL_TEXT, _TEAL_SPARK = "#0F6E62", "#0F9B8A" + # The three states the floating assistant cycles through. _HIDDEN, _LAUNCHER_ST, _PANEL = "hidden", "launcher", "panel" @@ -140,8 +146,8 @@ class HelpAgentWidget(QWidget): self._pal = self._compute_palette() self._apply_style() muted = self._pal.text_muted - self.edge_tab.setIcon(icon("chevron-left", color=muted)) - self.launcher.setIcon(icon("sparkle", size=_DOT_ICON, color=self._pal.accent)) + self.edge_tab.setIcon(icon("chevron-left", color=_TEAL_TEXT)) + self.launcher.setIcon(icon("sparkle", size=_DOT_ICON, color=_TEAL_SPARK)) self.min_btn.setIcon(icon("minus", color=muted)) self._render() @@ -154,16 +160,16 @@ class HelpAgentWidget(QWidget): self.setStyleSheet(f""" /* Closed launcher: a {_DOT}px dot. `pill` flips to true on hover, when the label comes out and the shape stretches to a rounded bar. */ - #helpLauncher {{ background: {p.surface}; border: 1px solid {p.border}; - border-radius: {_DOT // 2}px; color: {p.text}; font-weight: 600; + #helpLauncher {{ background: {_TEAL_BG}; border: 1px solid {_TEAL_LINE}; + border-radius: {_DOT // 2}px; color: {_TEAL_TEXT}; font-weight: 700; font-size: 12px; padding: 0; text-align: center; }} #helpLauncher[pill="true"] {{ text-align: left; padding-left: 6px; }} - #helpLauncher:hover {{ background: {p.hover}; border-color: {p.border_strong}; }} - #helpLauncher:focus {{ border: 1px solid {p.focus_ring}; }} - #helpEdgeTab {{ background: {p.surface}; border: 1px solid {p.border}; + #helpLauncher:hover {{ background: #D5EFEA; border-color: {_TEAL_SPARK}; }} + #helpLauncher:focus {{ border: 1px solid {_TEAL_SPARK}; }} + #helpEdgeTab {{ background: {_TEAL_BG}; border: 1px solid {_TEAL_LINE}; border-right: none; border-top-left-radius: {r}px; border-bottom-left-radius: {r}px; }} - #helpEdgeTab:hover {{ background: {p.hover}; }} + #helpEdgeTab:hover {{ background: #D5EFEA; }} #helpPanel {{ background: {p.surface}; border: 1px solid {p.border}; border-radius: {rl}px; color: {p.text}; }} #helpHeader {{ background: {p.surface}; border-bottom: 1px solid {p.border}; @@ -196,7 +202,7 @@ class HelpAgentWidget(QWidget): # assistant back (chevron points left = "slide out"). self.edge_tab = QPushButton(self) self.edge_tab.setObjectName("helpEdgeTab") - self.edge_tab.setIcon(icon("chevron-left", color=self._pal.text_muted)) + self.edge_tab.setIcon(icon("chevron-left", color=_TEAL_TEXT)) self.edge_tab.setCursor(Qt.PointingHandCursor) self.edge_tab.setToolTip(tr("help_agent.show_tooltip")) self.edge_tab.clicked.connect(self._show_launcher) @@ -207,7 +213,7 @@ class HelpAgentWidget(QWidget): # is gone — hiding to the edge is now a line in the panel's ⋯ menu. self.launcher = _HoverPill(self) self.launcher.setObjectName("helpLauncher") - self.launcher.setIcon(icon("sparkle", size=_DOT_ICON, color=self._pal.accent)) + self.launcher.setIcon(icon("sparkle", size=_DOT_ICON, color=_TEAL_SPARK)) self.launcher.setCursor(Qt.PointingHandCursor) self.launcher.setToolTip(tr("help_agent.open_tooltip")) self.launcher.clicked.connect(self._expand) @@ -226,7 +232,8 @@ class HelpAgentWidget(QWidget): hb = QHBoxLayout(header) hb.setContentsMargins(12, 8, 8, 8) self.title_icon = QLabel(header) - self.title_icon.setPixmap(_app_icon().pixmap(20, 20)) + self.title_icon.setPixmap( + icon("sparkle", size=16, color=_TEAL_SPARK).pixmap(16, 16)) hb.addWidget(self.title_icon) self.title = QLabel(tr("help_agent.title"), header) self.title.setObjectName("helpTitle")