theme update is working

apps/web/src/api/buster_rest/dictionaries/queryRequests.ts

@@ -9,7 +9,7 @@ export const useColorDictionaryThemes = () => {
   });
 };
 
-export const prefetchColorThemes = async (queryClientProp?: QueryClient) => {
+export const prefetchColorPalettes = async (queryClientProp?: QueryClient) => {
   const queryClient = queryClientProp || new QueryClient();
 
   await queryClient.prefetchQuery({

apps/web/src/api/query_keys/dictionaries.ts

@@ -6,7 +6,7 @@ export const colorPalettes = queryOptions<ColorPaletteDictionariesResponse>({
   queryKey: ['dictionaries', 'color-palettes', 'list'] as const,
   initialData: [],
   initialDataUpdatedAt: 0,
-  staleTime: 1000 // 7 days
+  staleTime: 1000 * 60 * 60 * 1 // 1 hour
 });
 
 export const getCurrencies = queryOptions<CurrencyResponse>({

apps/web/src/components/features/settings/DefaultColorThemeCard.tsx

@@ -3,8 +3,6 @@
 import React from 'react';
 import { SettingsCards } from './SettingsCard';
 import { Text } from '@/components/ui/typography';
-import { useMount } from '../../../hooks';
-import { prefetchColorThemes } from '../../../api/buster_rest/dictionaries';
 import { ThemeColorDots } from '../colors/ThemeList/ThemeColorDots';
 import { Popover } from '../../ui/popover';
 import { DefaultThemeSelector } from '../colors/DefaultThemeSelector';

apps/web/src/context-hooks/usePalettes.ts

@@ -11,6 +11,8 @@ const useGetOrganizationPalettes = () => {
   const organizationPalettes: ColorPalette[] =
     organization?.organizationColorPalettes.palettes || [];
   const selectedPaletteId = organization?.organizationColorPalettes.selectedId;
+  const selectedDictionaryPalette =
+    organization?.organizationColorPalettes.selectedDictionaryPalette;
 
   return useMemo(() => {
     const defaultOrganizationPalette = organizationPalettes.find(
@@ -20,20 +22,28 @@ const useGetOrganizationPalettes = () => {
     return {
       organizationPalettes,
       selectedPaletteId: selectedPaletteId || null,
-      defaultOrganizationPalette
+      defaultOrganizationPalette,
+      selectedDictionaryPalette
     };
-  }, [organizationPalettes, selectedPaletteId]);
+  }, [organizationPalettes, selectedPaletteId, selectedDictionaryPalette]);
 };
 
 export const useGetPalettes = () => {
-  const { organizationPalettes, selectedPaletteId } = useGetOrganizationPalettes();
+  const { organizationPalettes, selectedPaletteId, selectedDictionaryPalette } =
+    useGetOrganizationPalettes();
   const { data: dictionaryPalettes, isError: isErrorDictionaryPalettes } =
     useColorDictionaryThemes();
 
   return useMemo(() => {
     const allPalettes = [...dictionaryPalettes, ...organizationPalettes];
-    const defaultPalette =
-      allPalettes.find((palette) => palette.id === selectedPaletteId) || dictionaryPalettes[0];
+    const isSelectedDictionaryPalette =
+      selectedPaletteId &&
+      selectedDictionaryPalette &&
+      selectedPaletteId === selectedDictionaryPalette?.id;
+    const defaultPalette = isSelectedDictionaryPalette
+      ? selectedDictionaryPalette
+      : organizationPalettes.find((palette) => palette.id === selectedPaletteId) ||
+        dictionaryPalettes[0];
 
     return {
       allPalettes,

apps/web/src/context-hooks/useThemeOperations.ts

@@ -2,9 +2,11 @@ import { useMemoizedFn } from '@/hooks/useMemoizedFn';
 import { useGetMyUserInfo } from '@/api/buster_rest/users/queryRequests';
 import { useUpdateOrganization } from '@/api/buster_rest/organizations/queryRequests';
 import type { IColorPalette } from '@/components/features/colors/ThemeList';
+import { useGetPalettes } from './usePalettes';
 
 export const useThemeOperations = () => {
   const { data: userData } = useGetMyUserInfo();
+  const { dictionaryPalettes } = useGetPalettes();
   const { mutateAsync: updateOrganization } = useUpdateOrganization();
 
   const organization = userData?.organizations?.[0];
@@ -14,7 +16,8 @@ export const useThemeOperations = () => {
     await updateOrganization({
       organizationColorPalettes: {
         selectedId: theme.id,
-        palettes: [theme, ...organization.organizationColorPalettes.palettes]
+        palettes: [theme, ...organization.organizationColorPalettes.palettes],
+        selectedDictionaryPalette: null
       }
     });
   });
@@ -29,7 +32,10 @@ export const useThemeOperations = () => {
         selectedId: isSelectedTheme ? null : currentThemeId,
         palettes: organization.organizationColorPalettes.palettes.filter(
           (theme: { id: string }) => theme.id !== themeId
-        )
+        ),
+        selectedDictionaryPalette: isSelectedTheme
+          ? null
+          : organization.organizationColorPalettes.selectedDictionaryPalette
       }
     });
   });
@@ -42,7 +48,8 @@ export const useThemeOperations = () => {
         selectedId: organization.organizationColorPalettes.selectedId,
         palettes: organization.organizationColorPalettes.palettes.map((t: IColorPalette) =>
           t.id === themeId ? theme : t
-        )
+        ),
+        selectedDictionaryPalette: organization.organizationColorPalettes.selectedDictionaryPalette
       }
     });
   });
@@ -51,11 +58,13 @@ export const useThemeOperations = () => {
     if (!organization) return;
 
     const isSelectedTheme = organization.organizationColorPalettes.selectedId === theme.id;
+    const isDictionaryTheme = dictionaryPalettes.some((palette) => palette.id === theme.id);
 
     await updateOrganization({
       organizationColorPalettes: {
         selectedId: isSelectedTheme ? null : theme.id,
-        palettes: organization.organizationColorPalettes.palettes
+        palettes: organization.organizationColorPalettes.palettes,
+        selectedDictionaryPalette: isDictionaryTheme && !isSelectedTheme ? theme : null
       }
     });
   });

apps/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/MetricStylingApp.tsx

@@ -16,7 +16,6 @@ import { StylingAppColors } from './StylingAppColors';
 import { StylingAppStyling } from './StylingAppStyling';
 import { StylingAppVisualize } from './StylingAppVisualize';
 import { useMount } from '@/hooks';
-import { prefetchColorThemes } from '@/api/buster_rest/dictionaries';
 import { useSelectedColorPalette } from '@/context-hooks/usePalettes';
 
 export const MetricStylingApp: React.FC<{
@@ -29,10 +28,6 @@ export const MetricStylingApp: React.FC<{
   const { data: metricData } = useGetMetricData({ id: metricId }, { enabled: false });
   const colors = useSelectedColorPalette(chartConfig?.colors);
 
-  useMount(() => {
-    prefetchColorThemes();
-  });
-
   if (!chartConfig) return null;
 
   const columnMetadata = metricData?.data_metadata?.column_metadata || [];

packages/database/drizzle/0083_wild_thor_girl.sql

@@ -0,0 +1,9 @@
+ALTER TABLE "organizations" ALTER COLUMN "organization_color_palettes" SET DEFAULT '{"selectedId": null, "palettes": [], "selectedDictionaryPalette": null}'::jsonb;--> statement-breakpoint
+UPDATE "organizations" 
+SET "organization_color_palettes" = 
+  CASE 
+    WHEN "organization_color_palettes" ? 'selectedDictionaryPalette' 
+    THEN "organization_color_palettes"
+    ELSE "organization_color_palettes" || '{"selectedDictionaryPalette": null}'::jsonb
+  END
+WHERE "organization_color_palettes" IS NOT NULL;--> statement-breakpoint

packages/database/drizzle/meta/_journal.json

@@ -582,6 +582,13 @@
       "when": 1752766533457,
       "tag": "0082_sleepy_taskmaster",
       "breakpoints": true
+    },
+    {
+      "idx": 83,
+      "version": "7",
+      "when": 1752866508221,
+      "tag": "0083_wild_thor_girl",
+      "breakpoints": true
     }
   ]
 }

packages/database/src/queries/organizations/update-organization/organization-color-palettes.ts

@@ -30,7 +30,7 @@ export const OrganizationColorPalettesSchema = z
       },
       { message: 'All color palette IDs must be unique' }
     ),
-    selectedDictionaryPalette: OrganizationColorPaletteSchema.nullable(),
+    selectedDictionaryPalette: OrganizationColorPaletteSchema.nullable().default(null),
   })
   .refine(
     (data) => {

packages/server-shared/src/dictionary/index.ts

@@ -1,2 +1,2 @@
-export * from './color-themes';
+export * from './color-palettes';
 export * from './currency';

packages/server-shared/src/organization/organization.types.ts

@@ -20,6 +20,7 @@ export const ColorPalettesSchema = z.object({
 export const OrganizationColorPaletteSchema = z.object({
   selectedId: z.string().nullable(),
   palettes: z.array(ColorPalettesSchema),
+  selectedDictionaryPalette: ColorPalettesSchema.nullable().default(null),
 });
 
 export const OrganizationSchema = z.object({