refactor(frontend): split hooks/ into shared, scanner, admin (Phase 5)

CHANGELOG.md

@@ -41,6 +41,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   `client.test.ts`, `adminClient.ts`) and `services/audio/` (`player.ts`,
   `beep.ts`). All `@/services/*` imports across components and hooks have
   been updated to the new paths. No runtime behaviour change.
+- Frontend `hooks/` directory split into `hooks/shared/` (`useAuthInit`,
+  `useTheme`, `useTokenRefresh`, `useWebSocket`), `hooks/scanner/`
+  (`useScanner`, `useAudioPlayer`, `useTGSelectionSync`, `useActiveUnit`),
+  and `hooks/admin/` (`useAdminWebSocket`, `useAdminWsOps`,
+  `useAdminActivity`, `useAdminLogs`, `useWsQuery`), each with a barrel
+  `index.ts`. All call sites have been updated to the new specific paths.
+  No runtime behaviour change.
 
 ### Fixed
 

frontend/src/components/admin/ActivityPanel.tsx

@@ -1,4 +1,4 @@
-import { useAdminActivity } from "@/hooks/useAdminActivity";
+import { useAdminActivity } from "@/hooks/admin/useAdminActivity";
 import type { ChartBucket } from "@/app/slices/activitySlice";
 import {
   Activity,

frontend/src/components/admin/AdminLayout.tsx

@@ -36,7 +36,7 @@ import {
   clearCredentials,
   usePostLogoutMutation,
 } from "@/app/slices/authSlice";
-import { useAdminWebSocket } from "@/hooks/useAdminWebSocket";
+import { useAdminWebSocket } from "@/hooks/admin/useAdminWebSocket";
 import UsersPanel from "@/components/admin/UsersPanel";
 import SystemsPanel from "@/components/admin/SystemsPanel";
 import GroupsTagsPanel from "@/components/admin/GroupsTagsPanel";

frontend/src/components/admin/ApiKeysPanel.test.tsx

@@ -60,7 +60,7 @@ const deleteApiKeyMutate = vi.fn((_arg: unknown) => ({
   unwrap: deleteApiKeyUnwrap,
 }));
 
-vi.mock("@/hooks/useAdminWsOps", () => ({
+vi.mock("@/hooks/admin/useAdminWsOps", () => ({
   useListApiKeysQuery: () => ({ data: mockKeys, isLoading: false }),
   useListSystemsQuery: () => ({ data: mockSystems, isLoading: false }),
   useGetConfigQuery: () => ({ data: { settings: [] }, isLoading: false }),

frontend/src/components/admin/ApiKeysPanel.tsx

@@ -7,7 +7,7 @@ import {
   useDeleteApiKeyMutation,
   useListSystemsQuery,
   useGetConfigQuery,
-} from "@/hooks/useAdminWsOps";
+} from "@/hooks/admin/useAdminWsOps";
 import type { AdminApiKey } from "@/types";
 
 // ─── Form state ───

frontend/src/components/admin/DirMonitorPanel.tsx

@@ -8,7 +8,7 @@ import {
   useDeleteDirMonitorMutation,
   useListSystemsQuery,
   useListTalkgroupsQuery,
-} from "@/hooks/useAdminWsOps";
+} from "@/hooks/admin/useAdminWsOps";
 import type { AdminDirMonitor } from "@/types";
 
 const DIRMONITOR_TYPES = [

frontend/src/components/admin/DownstreamsPanel.tsx

@@ -6,7 +6,7 @@ import {
   useUpdateDownstreamMutation,
   useDeleteDownstreamMutation,
   useListSystemsQuery,
-} from "@/hooks/useAdminWsOps";
+} from "@/hooks/admin/useAdminWsOps";
 import type { AdminDownstream } from "@/types";
 
 interface DownstreamFormState {

frontend/src/components/admin/GroupsTagsPanel.tsx

@@ -9,7 +9,7 @@ import {
   useCreateTagMutation,
   useUpdateTagMutation,
   useDeleteTagMutation,
-} from "@/hooks/useAdminWsOps";
+} from "@/hooks/admin/useAdminWsOps";
 import type { AdminGroup, AdminTag } from "@/types";
 
 // ─── Generic label CRUD table ───

frontend/src/components/admin/LogsPanel.tsx

@@ -9,8 +9,8 @@ import {
   X,
 } from "lucide-react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useUpdateConfigMutation } from "@/hooks/useAdminWsOps";
-import { useAdminLogs, useAdminLogLevel } from "@/hooks/useAdminLogs";
+import { useUpdateConfigMutation } from "@/hooks/admin/useAdminWsOps";
+import { useAdminLogs, useAdminLogLevel } from "@/hooks/admin/useAdminLogs";
 import type { AdminLog } from "@/types";
 
 // ─── Constants ──────────────────────────────────────────────

frontend/src/components/admin/OptionsPanel.tsx

@@ -10,7 +10,7 @@ import {
 import {
   useGetConfigQuery,
   useUpdateConfigMutation,
-} from "@/hooks/useAdminWsOps";
+} from "@/hooks/admin/useAdminWsOps";
 import { useNavigationGuard } from "@/components/admin/NavigationGuardContext";
 import type { AdminSetting } from "@/types";
 

frontend/src/components/admin/RadioReferenceCard.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef, useCallback } from "react";
 import { Upload, CheckCircle, XCircle, AlertTriangle } from "lucide-react";
 import { useRrPreviewCSVMutation } from "@/app/slices/adminSlice";
-import { useRrApplyMutation, useListSystemsQuery } from "@/hooks/useAdminWsOps";
+import { useRrApplyMutation, useListSystemsQuery } from "@/hooks/admin/useAdminWsOps";
 import type {
   RRPreviewResponse,
   RRPreviewRow,

frontend/src/components/admin/SharedLinksPanel.tsx

@@ -2,7 +2,7 @@ import { Trash2, ExternalLink } from "lucide-react";
 import {
   useGetSharedLinksQuery,
   useDeleteSharedLinkMutation,
-} from "@/hooks/useAdminWsOps";
+} from "@/hooks/admin/useAdminWsOps";
 
 function formatDate(unix: number): string {
   return new Date(unix * 1000).toLocaleString();

frontend/src/components/admin/SystemsPanel.test.tsx

@@ -52,7 +52,7 @@ const noopMutate = vi.fn(() => ({
   unwrap: vi.fn().mockResolvedValue(undefined),
 }));
 
-vi.mock("@/hooks/useAdminWsOps", () => ({
+vi.mock("@/hooks/admin/useAdminWsOps", () => ({
   useListSystemsQuery: () => ({ data: mockSystems, isLoading: false }),
   useCreateSystemMutation: () => [createSystemMutate, {}],
   useUpdateSystemMutation: () => [updateSystemMutate, {}],

frontend/src/components/admin/SystemsPanel.tsx

@@ -18,7 +18,7 @@ import {
   useListTagsQuery,
   useGetConfigQuery,
   useUpdateConfigMutation,
-} from "@/hooks/useAdminWsOps";
+} from "@/hooks/admin/useAdminWsOps";
 import type { AdminSystem, AdminTalkgroup, AdminUnit } from "@/types";
 
 // ─── System card ───

frontend/src/components/admin/ToolsPanel.tsx

@@ -20,7 +20,7 @@ import {
   useLazyExportTagsQuery,
   useImportConfigMutation,
   useListSystemsQuery,
-} from "@/hooks/useAdminWsOps";
+} from "@/hooks/admin/useAdminWsOps";
 import { selectToken } from "@/app/slices/authSlice";
 import { useAppSelector } from "@/app/store";
 import RadioReferenceCard from "@/components/admin/RadioReferenceCard";

frontend/src/components/admin/TranscriptionPanel.tsx

@@ -7,7 +7,7 @@ import {
   useTranscriptionDeleteMutation,
   useTranscriptionStatsQuery,
   useUpdateConfigMutation,
-} from "@/hooks/useAdminWsOps";
+} from "@/hooks/admin/useAdminWsOps";
 import type { WhisperModel } from "@/types";
 
 const KNOWN_MODELS = [

frontend/src/components/admin/UsersPanel.test.tsx

@@ -64,7 +64,7 @@ const deleteUserMutate = vi.fn((_arg: unknown) => ({
   unwrap: deleteUserUnwrap,
 }));
 
-vi.mock("@/hooks/useAdminWsOps", () => ({
+vi.mock("@/hooks/admin/useAdminWsOps", () => ({
   useListUsersQuery: () => ({ data: mockUsers, isLoading: false }),
   useListSystemsQuery: () => ({ data: mockSystems, isLoading: false }),
   useCreateUserMutation: () => [createUserMutate, {}],

frontend/src/components/admin/UsersPanel.tsx

@@ -6,7 +6,7 @@ import {
   useCreateUserMutation,
   useUpdateUserMutation,
   useDeleteUserMutation,
-} from "@/hooks/useAdminWsOps";
+} from "@/hooks/admin/useAdminWsOps";
 import type { AdminUser, CreateUserPayload, UpdateUserPayload } from "@/types";
 
 interface UserFormState {

frontend/src/components/admin/WebhooksPanel.tsx

@@ -5,7 +5,7 @@ import {
   useCreateWebhookMutation,
   useUpdateWebhookMutation,
   useDeleteWebhookMutation,
-} from "@/hooks/useAdminWsOps";
+} from "@/hooks/admin/useAdminWsOps";
 import type { AdminWebhook } from "@/types";
 
 interface WebhookFormState {

frontend/src/components/scanner/DisplayPanel.tsx

@@ -12,7 +12,7 @@ import { useGetBookmarkIDsQuery, useToggleBookmarkMutation } from "@/app/api";
 import { useShareCallMutation } from "@/app/slices/shareSlice";
 import { HistoryPanel } from "@/components/scanner/HistoryPanel";
 import { TranscriptPanel } from "@/components/scanner/TranscriptPanel";
-import { useActiveUnit } from "@/hooks/useActiveUnit";
+import { useActiveUnit } from "@/hooks/scanner/useActiveUnit";
 import { useAppSelector } from "@/app/store";
 import type { AvoidEntry, Call } from "@/types";
 

frontend/src/components/scanner/LEDPanel.test.tsx

@@ -15,7 +15,7 @@ import type { Call, ScannerConfig } from "@/types";
 const mockToggle = vi.fn();
 let mockIsDark = true;
 
-vi.mock("@/hooks/useTheme", () => ({
+vi.mock("@/hooks/shared/useTheme", () => ({
   useTheme: () => ({
     isDark: mockIsDark,
     toggle: mockToggle,

frontend/src/components/scanner/LEDPanel.tsx

@@ -9,7 +9,7 @@ import {
 } from "lucide-react";
 import { useState, useRef, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { useTheme } from "@/hooks/useTheme";
+import { useTheme } from "@/hooks/shared/useTheme";
 import { useAppSelector, useAppDispatch } from "@/app/store";
 import {
   selectToken,

frontend/src/hooks/admin/index.ts

@@ -0,0 +1,5 @@
+export * from "./useAdminActivity";
+export * from "./useAdminLogs";
+export * from "./useAdminWebSocket";
+export * from "./useAdminWsOps";
+export * from "./useWsQuery";

frontend/src/hooks/useAdminWsOps.ts → frontend/src/hooks/admin/useAdminWsOps.ts

@@ -1,4 +1,4 @@
-import { useWsQuery, useWsMutation, useLazyWsQuery } from "@/hooks/useWsQuery";
+import { useWsQuery, useWsMutation, useLazyWsQuery } from "@/hooks/admin/useWsQuery";
 import type {
   AdminUser,
   AdminSystem,

frontend/src/hooks/index.ts

@@ -0,0 +1,7 @@
+// Barrel re-export for the hooks tree. Prefer specific imports
+// (`@/hooks/shared/useTheme`) in new code; this barrel exists as a
+// safety net for callers that want to grab a hook without thinking
+// about which subfolder it lives in.
+export * from "./admin";
+export * from "./scanner";
+export * from "./shared";

frontend/src/hooks/scanner/index.ts

@@ -0,0 +1,4 @@
+export * from "./useActiveUnit";
+export * from "./useAudioPlayer";
+export * from "./useScanner";
+export * from "./useTGSelectionSync";

frontend/src/hooks/useScanner.ts → frontend/src/hooks/scanner/useScanner.ts

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { useAppDispatch, useAppSelector } from "@/app/store";
-import { useWebSocket } from "@/hooks/useWebSocket";
-import { useAudioPlayer } from "@/hooks/useAudioPlayer";
+import { useWebSocket } from "@/hooks/shared/useWebSocket";
+import { useAudioPlayer } from "@/hooks/scanner/useAudioPlayer";
 import {
   togglePause,
   toggleLive,

frontend/src/hooks/shared/index.ts

@@ -0,0 +1,4 @@
+export * from "./useAuthInit";
+export * from "./useTheme";
+export * from "./useTokenRefresh";
+export * from "./useWebSocket";

frontend/src/hooks/useAuthInit.test.tsx → frontend/src/hooks/shared/useAuthInit.test.tsx

@@ -8,7 +8,7 @@ import { authSlice } from "@/app/slices/authSlice";
 import { callsSlice } from "@/app/slices/callsSlice";
 import { api } from "@/app/api";
 import type { RootState } from "@/app/store";
-import { useAuthInit } from "@/hooks/useAuthInit";
+import { useAuthInit } from "@/hooks/shared/useAuthInit";
 
 // ── Mock the refresh mutation ─────────────────────────────────────────────
 

frontend/src/hooks/useTokenRefresh.test.tsx → frontend/src/hooks/shared/useTokenRefresh.test.tsx

@@ -6,7 +6,7 @@ import { scannerSlice } from "@/app/slices/scannerSlice";
 import { authSlice, setCredentials } from "@/app/slices/authSlice";
 import { callsSlice } from "@/app/slices/callsSlice";
 import { api } from "@/app/api";
-import { useTokenRefresh } from "@/hooks/useTokenRefresh";
+import { useTokenRefresh } from "@/hooks/shared/useTokenRefresh";
 
 // ── Mocks ────────────────────────────────────────────────────────────────
 

frontend/src/main.tsx

@@ -5,8 +5,8 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { store } from "@/app/store";
 import { useAppSelector } from "@/app/store";
 import { selectAuthReady } from "@/app/slices/authSlice";
-import { useAuthInit } from "@/hooks/useAuthInit";
-import { useTokenRefresh } from "@/hooks/useTokenRefresh";
+import { useAuthInit } from "@/hooks/shared/useAuthInit";
+import { useTokenRefresh } from "@/hooks/shared/useTokenRefresh";
 import "@/index.css";
 
 const Scanner = lazy(() => import("@/pages/Scanner"));

frontend/src/pages/Scanner.tsx

@@ -9,8 +9,8 @@ import {
   setLive,
   resetDisplay,
 } from "@/app/slices/scannerSlice";
-import { useScanner } from "@/hooks/useScanner";
-import { useTGSelectionSync } from "@/hooks/useTGSelectionSync";
+import { useScanner } from "@/hooks/scanner/useScanner";
+import { useTGSelectionSync } from "@/hooks/scanner/useTGSelectionSync";
 import { LEDPanel } from "@/components/scanner/LEDPanel";
 import { DisplayPanel } from "@/components/scanner/DisplayPanel";
 import { ControlToolbar } from "@/components/scanner/ControlToolbar";