Settings refactor.

src/components/common/ConfirmationForm.tsx

@@ -25,10 +25,17 @@ export function ConfirmationForm({
 
   return (
     <Form onSubmit={onConfirm} error={error}>
-      <Row marginY="4">{message}</Row>
+      <Row marginY="4" gap="2">
+        {message}
+      </Row>
       <FormButtons>
         <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
-        <FormSubmitButton data-test="button-confirm" isLoading={isLoading} variant={buttonVariant}>
+        <FormSubmitButton
+          data-test="button-confirm"
+          isLoading={isLoading}
+          variant={buttonVariant}
+          isDisabled={false}
+        >
           {buttonLabel || formatMessage(labels.ok)}
         </FormSubmitButton>
       </FormButtons>

src/components/hooks/queries/useTeamQuery.ts

@@ -1,10 +1,17 @@
 import { useApi } from '../useApi';
+import { useModified } from '@/components/hooks';
+import { keepPreviousData } from '@tanstack/react-query';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useTeamQuery(teamId: string) {
+export function useTeamQuery(teamId: string, options?: ReactQueryOptions<any>) {
   const { get, useQuery } = useApi();
+  const { modified } = useModified(`teams:${teamId}`);
+
   return useQuery({
-    queryKey: ['teams', teamId],
+    queryKey: ['teams', { teamId, modified }],
     queryFn: () => get(`/teams/${teamId}`),
     enabled: !!teamId,
+    placeholderData: keepPreviousData,
+    ...options,
   });
 }

src/components/hooks/queries/useUserQuery.ts

@@ -1,11 +1,17 @@
 import { useApi } from '../useApi';
+import { useModified } from '@/components/hooks';
+import { keepPreviousData } from '@tanstack/react-query';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useUserQuery(userId: string, options?: Record<string, any>) {
+export function useUserQuery(userId: string, options?: ReactQueryOptions<any>) {
   const { get, useQuery } = useApi();
+  const { modified } = useModified(`user:${userId}`);
+
   return useQuery({
-    queryKey: ['users', userId],
+    queryKey: ['users', { userId, modified }],
     queryFn: () => get(`/users/${userId}`),
     enabled: !!userId,
+    placeholderData: keepPreviousData,
     ...options,
   });
 }

src/components/hooks/queries/useWebsiteQuery.ts

@@ -1,12 +1,17 @@
 import { useApi } from '../useApi';
+import { useModified } from '@/components/hooks';
+import { keepPreviousData } from '@tanstack/react-query';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useWebsiteQuery(websiteId: string, options?: Record<string, any>) {
+export function useWebsiteQuery(websiteId: string, options?: ReactQueryOptions<any>) {
   const { get, useQuery } = useApi();
+  const { modified } = useModified(`website:${websiteId}`);
 
   return useQuery({
-    queryKey: ['website', { websiteId }],
+    queryKey: ['website', { websiteId, modified }],
     queryFn: () => get(`/websites/${websiteId}`),
     enabled: !!websiteId,
+    placeholderData: keepPreviousData,
     ...options,
   });
 }

src/components/input/FilterBar.tsx

@@ -62,7 +62,7 @@ export function FilterBar() {
         })}
       </Row>
       <TooltipTrigger delay={0}>
-        <Button variant="wrapper" onPress={handleResetFilter} style={{ alignSelf: 'flex-start' }}>
+        <Button variant="zero" onPress={handleResetFilter} style={{ alignSelf: 'flex-start' }}>
           <Icon>
             <Close />
           </Icon>

src/components/input/MenuButton.tsx

@@ -5,9 +5,11 @@ import { Ellipsis } from '@/components/icons';
 export function MenuButton({
   children,
   onAction,
+  isDisabled,
 }: {
   children: ReactNode;
   onAction?: (action: string) => void;
+  isDisabled?: boolean;
 }) {
   const handleAction = (key: Key) => {
     onAction?.(key.toString());
@@ -15,7 +17,7 @@ export function MenuButton({
 
   return (
     <DialogTrigger>
-      <Button variant="quiet">
+      <Button variant="quiet" isDisabled={isDisabled}>
         <Icon>
           <Ellipsis />
         </Icon>

src/components/messages.ts

@@ -334,6 +334,7 @@ export const labels = defineMessages({
   firstClick: { id: 'label.first-click', defaultMessage: 'First click' },
   lastClick: { id: 'label.last-click', defaultMessage: 'Last click' },
   online: { id: 'label.online', defaultMessage: 'Online' },
+  preferences: { id: 'label.preferences', defaultMessage: 'Preferences' },
 });
 
 export const messages = defineMessages({