Give header panel toggles a visible on-state (#513)

The three panel-toggle buttons in the header (sidebar / split /
inspector) previously signalled their state only through a **one-shade
text-colour shift** from `text-fg-3` to `text-fg-2` — so subtle that the
buttons looked identical whether the panel they controlled was open or
closed.

Each toggle now wears a **filled `bg-surface-2` pill with `text-fg`**
while active, matching the `data-active` convention already used by
`SubPanelTabBar` and `ScrollToBottom`. Inactive toggles keep their
existing hover treatment, so the contrast between "off" and "hovering
over off" stays intact.

*No behavioural change — the `active` prop wiring, the click handlers,
and the underlying panel stores are untouched; only the classList on
`PanelToggleIcon` was adjusted.*

### Try it locally

```sh
nix run github:juspay/kolu/fix/panel-toggle-active-indication
```

Author: srid

packages/client/src/Header.tsx

@@ -45,8 +45,12 @@ const PanelToggleIcon: Component<{
     <Tip label={props.label}>
       <button
         data-testid={props["data-testid"]}
-        class="flex items-center justify-center w-6 h-6 rounded hover:bg-surface-2 text-fg-3 hover:text-fg transition-colors cursor-pointer"
-        classList={{ "text-fg-2": props.active }}
+        class="flex items-center justify-center w-6 h-6 rounded transition-colors cursor-pointer"
+        classList={{
+          "bg-surface-2 text-fg": props.active,
+          "text-fg-3 hover:bg-surface-2 hover:text-fg": !props.active,
+        }}
+        data-active={props.active ? "" : undefined}
         onClick={props.onClick}
         aria-label={props.label}
       >