From ac03c49abbf128e3211788cc0f646b694223c230 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Sun, 5 Oct 2025 11:41:05 +0100
Subject: [PATCH] Fix TypeScript errors in legacy UI refactor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update RefObject types to accept null in hooks
- Fix useLocalStorageState return type to support updater functions
- Remove unused Group import from LegacyToolSurface

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/components/tools/LegacyToolSurface.tsx | 2 +-
 frontend/src/hooks/tools/useFocusTrap.ts            | 2 +-
 frontend/src/hooks/tools/useLocalStorageState.ts    | 4 ++--
 frontend/src/hooks/tools/useToolPanelGeometry.ts    | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/tools/LegacyToolSurface.tsx b/frontend/src/components/tools/LegacyToolSurface.tsx
index a621bc554..5677313ee 100644
--- a/frontend/src/components/tools/LegacyToolSurface.tsx
+++ b/frontend/src/components/tools/LegacyToolSurface.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from 'react';
-import { ActionIcon, Group, ScrollArea, Switch, Text, Tooltip } from '@mantine/core';
+import { ActionIcon, ScrollArea, Switch, Text, Tooltip } from '@mantine/core';
 import ViewSidebarRoundedIcon from '@mui/icons-material/ViewSidebarRounded';
 import { useTranslation } from 'react-i18next';
 import ToolSearch from './toolPicker/ToolSearch';
diff --git a/frontend/src/hooks/tools/useFocusTrap.ts b/frontend/src/hooks/tools/useFocusTrap.ts
index 7a66bd809..863d0930a 100644
--- a/frontend/src/hooks/tools/useFocusTrap.ts
+++ b/frontend/src/hooks/tools/useFocusTrap.ts
@@ -9,7 +9,7 @@ const FOCUSABLE_ELEMENTS = [
   '[tabindex]:not([tabindex="-1"])',
 ].join(', ');
 
-export function useFocusTrap(containerRef: RefObject<HTMLElement>, enabled: boolean = true) {
+export function useFocusTrap(containerRef: RefObject<HTMLElement | null>, enabled: boolean = true) {
   useEffect(() => {
     if (!enabled || !containerRef.current) {
       return;
diff --git a/frontend/src/hooks/tools/useLocalStorageState.ts b/frontend/src/hooks/tools/useLocalStorageState.ts
index ad7ed8438..739251f4e 100644
--- a/frontend/src/hooks/tools/useLocalStorageState.ts
+++ b/frontend/src/hooks/tools/useLocalStorageState.ts
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Dispatch, SetStateAction } from 'react';
 
-export function useLocalStorageState<T>(key: string, defaultValue: T): [T, (value: T) => void] {
+export function useLocalStorageState<T>(key: string, defaultValue: T): [T, Dispatch<SetStateAction<T>>] {
   const [state, setState] = useState<T>(() => {
     if (typeof window === 'undefined') {
       return defaultValue;
diff --git a/frontend/src/hooks/tools/useToolPanelGeometry.ts b/frontend/src/hooks/tools/useToolPanelGeometry.ts
index bd198fdc7..af47408ba 100644
--- a/frontend/src/hooks/tools/useToolPanelGeometry.ts
+++ b/frontend/src/hooks/tools/useToolPanelGeometry.ts
@@ -9,8 +9,8 @@ export interface ToolPanelGeometry {
 
 interface UseToolPanelGeometryOptions {
   enabled: boolean;
-  toolPanelRef: RefObject<HTMLDivElement>;
-  quickAccessRef: RefObject<HTMLDivElement>;
+  toolPanelRef: RefObject<HTMLDivElement | null>;
+  quickAccessRef: RefObject<HTMLDivElement | null>;
 }
 
 export function useToolPanelGeometry({