Switch selectorwin group header to use images

src/app/img.py

@@ -65,6 +65,8 @@
 }
 
 # Re-exported from PIL.
+ROTATE_CW: Final = Image.Transpose.ROTATE_270
+ROTATE_CCW: Final = Image.Transpose.ROTATE_90
 FLIP_LEFT_RIGHT: Final = Image.Transpose.FLIP_LEFT_RIGHT
 FLIP_TOP_BOTTOM: Final = Image.Transpose.FLIP_TOP_BOTTOM
 FLIP_ROTATE: Final = Image.Transpose.ROTATE_180

src/app/selector_win.py

@@ -42,10 +42,10 @@
 ICON_CROSS = img.Handle.builtin('icons/cross', 16, 16)
 
 # Arrows used to indicate the state of the group - collapsed or expanded
-GRP_COLL: Final = '◁'
-GRP_COLL_HOVER: Final = '◀'
-GRP_EXP: Final = '▽'
-GRP_EXP_HOVER: Final = '▼'
+IMG_GRP_EXP: Final = img.Handle.builtin('icons/group_arrow', 16, 16)
+IMG_GRP_EXP_HOVER: Final = img.Handle.builtin('icons/group_arrow_hover', 16, 16)
+IMG_GRP_COLL: Final = IMG_GRP_EXP.crop(transpose=img.ROTATE_CW)
+IMG_GRP_COLL_HOVER: Final = IMG_GRP_EXP_HOVER.crop(transpose=img.ROTATE_CW)
 
 BTN_PLAY: Final = '▶'
 BTN_STOP: Final = '■'
@@ -159,22 +159,22 @@ def _evt_toggle(self, _: object = None) -> None:
         """Toggle the header on or off."""
         self.parent.group_visible[self.id] = vis = not self.parent.group_visible.get(self.id)
         self.parent.items_dirty.set()
-        self._ui_set_arrow(GRP_EXP_HOVER if vis else GRP_COLL_HOVER)
+        self._ui_set_arrow(IMG_GRP_EXP_HOVER if vis else IMG_GRP_COLL_HOVER)
 
     def _evt_hover_start(self, _: object | None = None) -> None:
         """When hovered over, fill in the triangle."""
         self._ui_set_arrow(
-            GRP_EXP_HOVER
+            IMG_GRP_EXP_HOVER
             if self.parent.group_visible.get(self.id) else
-            GRP_COLL_HOVER
+            IMG_GRP_COLL_HOVER
         )
 
     def _evt_hover_end(self, _: object | None = None) -> None:
         """When leaving, hollow the triangle."""
         self._ui_set_arrow(
-            GRP_EXP
+            IMG_GRP_EXP
             if self.parent.group_visible.get(self.id) else
-            GRP_COLL
+            IMG_GRP_COLL
         )
 
     @abstractmethod
@@ -183,7 +183,7 @@ def _ui_reassign(self, group_id: str,  title: TransToken, /) -> None:
         self.id = group_id
 
     @abstractmethod
-    def _ui_set_arrow(self, arrow: str, /) -> None:
+    def _ui_set_arrow(self, arrow: img.Handle, /) -> None:
         """Set the arrow for a group."""
         raise NotImplementedError
 
@@ -231,7 +231,7 @@ class SelectorWinBase[ButtonT, GroupHeaderT: GroupHeaderBase]:
     _loading: bool  # This overrides readonly.
     modal: bool
     attrs: list[AttrDef]
-    # Event set whenever the items needs to be redrawn/reflowed.
+    # Event set whenever the items need to be redrawn/re-flowed.
     items_dirty: trio.Event
 
     # Current list of item IDs we display.

src/ui_tk/selector_win.py

@@ -74,11 +74,7 @@ def __init__(self, win: 'SelectorWin') -> None:
         sep_right.grid(row=0, column=2, sticky='EW')
         frame.columnconfigure(2, weight=1)
 
-        self.arrow = ttk.Label(
-            frame,
-            text='',
-            width=2,
-        )
+        self.arrow = ttk.Label(frame, width=2)
         self.arrow.grid(row=0, column=10)
 
         # For the mouse events to work, we need to bind on all the children too.
@@ -106,9 +102,9 @@ def _ui_reassign(self, group_id: str, title: TransToken) -> None:
         self.menu_pos = None
 
     @override
-    def _ui_set_arrow(self, arrow: str) -> None:
+    def _ui_set_arrow(self, arrow: img.Handle) -> None:
         """Set the arrow glyph."""
-        self.arrow['text'] = arrow
+        TK_IMG.apply(self.arrow, arrow)
 
 
 class SelectorWin(SelectorWinBase[ttk.Button, GroupHeader]):

src/ui_wx/selector_win.py

@@ -133,7 +133,7 @@ def __init__(self, win: SelectorWin) -> None:
         self.menu_item = None
         self.panel.SetMinSize((10, 24))
 
-        self._arrow = '-'
+        self.arrow_slot = ImageSlot(self.panel)
         self.title = TransToken.BLANK
         self.suggested = False
         self.panel.Bind(wx.EVT_PAINT, self._on_paint)
@@ -162,9 +162,9 @@ def _ui_reassign(self, group_id: str, title: TransToken) -> None:
         self.panel.Refresh()
 
     @override
-    def _ui_set_arrow(self, arrow: str) -> None:
+    def _ui_set_arrow(self, arrow: img.Handle) -> None:
         """Set the arrow glyph."""
-        self.arrow = arrow
+        self.arrow_slot.set_handle(arrow)
         self.panel.Refresh()
 
     def _on_paint(self, event: wx.PaintEvent) -> None:
@@ -182,14 +182,12 @@ def _on_paint(self, event: wx.PaintEvent) -> None:
             alignment=wx.ALIGN_CENTRE_HORIZONTAL | wx.ALIGN_CENTRE_VERTICAL,
         )
         dc.SetFont(FONT_GROUP_HEADER)
-        arrow_rect = dc.DrawLabel(
-            self.arrow, wx.NullBitmap, size,
-            alignment=wx.ALIGN_RIGHT | wx.ALIGN_CENTRE_VERTICAL,
-        )
+        arrow_left = size.Width - 24
+        self.arrow_slot.draw(dc, arrow_left, (size.Height - 16) // 2)
         y = size.Height // 2
         dc.SetPen(PEN_GROUP_HEADER)
         dc.DrawLine(4, y, title_rect.Left - 4, y)
-        dc.DrawLine(title_rect.Right + 4, y, arrow_rect.Left - 4, y)
+        dc.DrawLine(title_rect.Right + 4, y, arrow_left - 4, y)
 
 
 class SelectorWin(SelectorWinBase[ItemSlot, GroupHeader]):
@@ -279,7 +277,11 @@ def __init__(self, parent: wx.TopLevelWindow, opt: Options) -> None:
         self.splitter.SetSashGravity(1.0)
         sizer_outer.Add(self.splitter, 1, wx.EXPAND, 0)
 
-        self.wid_itemlist = wid_itemlist = wx.ScrolledWindow(self.splitter, style=wx.VSCROLL | wx.ALWAYS_SHOW_SB)
+        self.wid_itemlist = wid_itemlist = wx.ScrolledWindow(
+            self.splitter,
+            style=wx.VSCROLL | wx.ALWAYS_SHOW_SB | wx.BORDER_SUNKEN,
+        )
+        wid_itemlist.SetBackgroundColour(img.PETI_ITEM_BG)
         self.wid_panel_info = wx.Panel(self.splitter)
         self.splitter.SplitVertically(wid_itemlist, self.wid_panel_info)
 
@@ -451,6 +453,12 @@ async def _redraw_on_langchange(self) -> None:
             await CURRENT_LANG.wait_transition()
             self.wid_itemlist.Refresh()
 
+    def _evt_window_resized(self, event: object) -> None:
+        """When resizing, we must always force the group headers to redraw."""
+        super()._evt_window_resized(event)
+        for header in self.group_widgets.values():
+            header.panel.Refresh()
+
     async def _update_menu_task(self) -> None:
         """When the item changes, update which menu options are set."""
         last_checked: wx.MenuItem | None = None