feat(ui): table views for users, the journal and both payment lists

Closes #64, and carries the same treatment to the three other lists where every row holds
the same handful of facts. Each keeps its cards; the table is the default and the choice
is remembered per list, in this browser, because it is a working preference rather than a
per-visit one.

Users: user, status, online, traffic, expiry, devices, groups, actions.
Journal: what happened, to whom, the details, who did it, when.
Pending orders keep both decisions in the row; history is read-only and dated by when an
order settled, falling back to when it was raised for one that never did.

Decisions worth recording:

- Narrow screens drop columns rather than scroll. A horizontal scrollbar on a phone is
  worse than three fewer columns, and everything hidden is one tap away in the detail
  sheet — the user's name is the button that opens it. Which columns survive lives next
  to the cells they match.
- Row actions are icons. Two labelled buttons per row spent most of the row's width on
  the two things every row repeats; the words survive as the accessible name and the
  hover title. IconButton gained a link form, because a control that navigates has to BE
  an anchor — middle-click, "open in new tab" and the status-bar preview all come from
  the element, not a click handler — and target=_blank now carries rel=noopener.
- The groups column shows the first badge and a "+N" chip carrying the rest as hover
  text; one account in four groups used to stretch every row on the page.
- Icon-only controls set aria-label from their title. Hover text never reaches a touch
  device and a screen reader announces nothing without it.
- One definition, not four: TableShell/THead/TR/TD and ViewSwitch live in ui.tsx, and
  useViewMode owns the persistence, so the surface and the toggle cannot drift apart.
  Verified in the built bundle — the surface class list appears exactly once.
- The per-user journal inside the detail modal keeps its cards: it is narrow, and there
  is nothing to align it with.

Storage is guarded everywhere: Safari in private mode throws on access, and a display
preference is never worth failing a render over.

Author: AppsGanin

web/src/EventsPanel.tsx

@@ -2,13 +2,15 @@ import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { getEventCatalog, listEvents } from "./api";
 import { actionMeta, actorOptions, EventList } from "./events";
+import { useViewMode } from "./hooks";
 import { errMessage, notifyError } from "./notify";
-import { Select, SettingCard } from "./ui";
+import { Select, SettingCard, ViewSwitch } from "./ui";
 
 // The global audit trail: every recorded action across all users, newest first,
 // filterable by action and by who performed it.
 export function EventsPanel() {
   const { t } = useTranslation();
+  const [view, setView] = useViewMode("events");
   const [keys, setKeys] = useState<string[]>([]);
   const [action, setAction] = useState("");
   const [actor, setActor] = useState("");
@@ -39,6 +41,15 @@ export function EventsPanel() {
     <SettingCard
       title={t("events.title")}
       description={t("events.description", { days: RETENTION_DAYS })}
+      action={
+        <ViewSwitch
+          value={view}
+          onChange={setView}
+          tableLabel={t("usersPanel.viewTable")}
+          cardsLabel={t("usersPanel.viewCards")}
+        />
+      }
+      stackAction
     >
       <div className="flex flex-col gap-4">
         <div className="grid gap-3 sm:grid-cols-2">
@@ -55,7 +66,7 @@ export function EventsPanel() {
             data={actorOptions()}
           />
         </div>
-        <EventList load={load} showUser />
+        <EventList load={load} showUser table={view === "table"} />
       </div>
     </SettingCard>
   );