Refactor and improve layout resizing

src-web/hooks/useKeyValue.ts

@@ -1,4 +1,5 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
+import { useCallback } from 'react';
 import { buildKeyValueKey, getKeyValue, setKeyValue } from '../lib/keyValueStore';
 
 const DEFAULT_NAMESPACE = 'app';
@@ -13,7 +14,8 @@ export function keyValueQueryKey({
   return ['key_value', { namespace, key: buildKeyValueKey(key) }];
 }
 
-export function useKeyValue<T extends string | number | boolean>({
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function useKeyValue<T extends Object>({
   namespace = DEFAULT_NAMESPACE,
   key,
   defaultValue,
@@ -31,9 +33,23 @@ export function useKeyValue<T extends string | number | boolean>({
     mutationFn: (value) => setKeyValue<T>({ namespace, key, value }),
   });
 
+  const set = useCallback(
+    (value: ((v: T) => T) | T) => {
+      if (typeof value === 'function') {
+        mutate.mutate(value(query.data ?? defaultValue));
+      } else {
+        mutate.mutate(value);
+      }
+    },
+    [query.data, defaultValue],
+  );
+
+  const reset = useCallback(() => mutate.mutate(defaultValue), [defaultValue]);
+
   return {
     value: query.data,
     isLoading: query.isLoading,
-    set: (value: T) => mutate.mutate(value),
+    set,
+    reset,
   };
 }