Fixed nav menus.

src/app/(main)/admin/AdminLayout.tsx

@@ -21,6 +21,7 @@ export function AdminLayout({ children }: { children: ReactNode }) {
         border="right"
         backgroundColor
         marginRight="2"
+        padding="3"
       >
         <AdminNav />
       </Column>

src/app/(main)/admin/users/[userId]/UserEditForm.tsx

@@ -50,7 +50,7 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
           label={formatMessage(labels.role)}
           rules={{ required: formatMessage(labels.required) }}
         >
-          <Select defaultSelectedKey={user.role}>
+          <Select defaultValue={user.role}>
             <ListItem id={ROLES.viewOnly} data-test="dropdown-item-viewOnly">
               {formatMessage(labels.viewOnly)}
             </ListItem>

src/app/(main)/settings/SettingsLayout.tsx

@@ -14,6 +14,7 @@ export function SettingsLayout({ children }: { children: ReactNode }) {
         border="right"
         backgroundColor
         marginRight="2"
+        padding="3"
       >
         <SettingsNav />
       </Column>

src/app/(main)/settings/layout.tsx

@@ -3,7 +3,7 @@ import { SettingsLayout } from './SettingsLayout';
 
 export default function ({ children }) {
   if (process.env.cloudMode) {
-    //return null;
+    return null;
   }
 
   return <SettingsLayout>{children}</SettingsLayout>;

src/components/common/SideMenu.tsx

@@ -51,7 +51,7 @@ export function SideMenu({
   };
 
   return (
-    <Column gap overflowY="auto" justifyContent="space-between">
+    <Column gap overflowY="auto" justifyContent="space-between" position="sticky" top="20px">
       {title && (
         <Row padding>
           <Heading size="1">{title}</Heading>

src/components/hooks/queries/useUpdateQuery.ts

@@ -1,10 +1,11 @@
 import { useToast } from '@umami/react-zen';
+import type { ApiError } from '@/lib/types';
 import { useApi } from '../useApi';
 import { useModified } from '../useModified';
 
 export function useUpdateQuery(path: string, params?: Record<string, any>) {
   const { post, useMutation } = useApi();
-  const query = useMutation({
+  const query = useMutation<any, ApiError, Record<string, any>>({
     mutationFn: (data: Record<string, any>) => post(path, { ...data, ...params }),
   });
   const { touch } = useModified();

src/components/hooks/useMessages.ts

@@ -1,5 +1,6 @@
 import { FormattedMessage, type MessageDescriptor, useIntl } from 'react-intl';
 import { labels, messages } from '@/components/messages';
+import type { ApiError } from '@/lib/types';
 
 type FormatMessage = (
   descriptor: MessageDescriptor,
@@ -12,7 +13,7 @@ interface UseMessages {
   messages: typeof messages;
   labels: typeof labels;
   getMessage: (id: string) => string;
-  getErrorMessage: (error: unknown) => string | undefined;
+  getErrorMessage: (error: ApiError) => string | undefined;
   FormattedMessage: typeof FormattedMessage;
 }
 
@@ -25,7 +26,7 @@ export function useMessages(): UseMessages {
     return message ? formatMessage(message) : id;
   };
 
-  const getErrorMessage = (error: unknown) => {
+  const getErrorMessage = (error: ApiError) => {
     if (!error) {
       return undefined;
     }

src/lib/types.ts

@@ -136,3 +136,8 @@ export interface RealtimeData {
   urls: Record<string, number>;
   visitors: any[];
 }
+
+export interface ApiError extends Error {
+  code?: string;
+  message: string;
+}