Fix dashboard toggle and hopefully fix csp issue in production.

Author: flusterIO

apps/fluster/src-tauri/tauri.conf.json

@@ -24,7 +24,7 @@
         "style-src": "'self' 'unsafe-inline'",
         "img-src": "*",
         "script-src": "'self' 'unsafe-inline' 'unsafe-eval' *",
-        "connect-src": "*",
+        "connect-src": "'self' 'unsafe-inline' 'unsafe-eval' *",
         "frame-src": "*"
       },
       "assetProtocol": {

apps/fluster/src/features/dashboard/presentation/dashboards/dashboard/v0_dashboard.tsx

@@ -150,7 +150,7 @@ export function Dashboard() {
                         </CardDescription>
                     </CardHeader>
                     <CardContent>
-                        <div className="grid grid-cols-1 @[450px]/dashboard:grid-cols-2 gap-3 @[600px]/dashboard:grid-cols-4 @[900px]/dashboard:grid-cols-6">
+                        <div className="grid grid-cols-1 @[450px]/dashboard:grid-cols-2 gap-3 @[600px]/dashboard:grid-cols-3 @[900px]/dashboard:grid-cols-6">
                             {dashboardStaticData.quickCreateItems.map((item) => (
                                 <QuickActionCard key={`quick-action-${item.id}`} item={item} />
                             ))}

apps/fluster/src/features/settings/presentation/pages/general.tsx

@@ -10,7 +10,7 @@ import {
     showToast,
     SwitchInput,
 } from "@fluster.io/dev";
-import React, { type ReactNode } from "react";
+import React, { useEffect, type ReactNode } from "react";
 import { SettingPageTitle } from "../components/setting_page_title";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -137,6 +137,7 @@ export const GeneralSettingsPage = connector(
             }
         );
 
+        form.watch((formState) => console.log("formState: ", formState))
         return (
             <Form {...form}>
                 <SettingPageContainer>

packages/fluster_developer/src/components/inputs/checkbox_group/index.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from "react";
+import React, { useMemo, type ReactNode } from "react";
 import { Checkbox } from "../../shad/checkbox";
 import { Label } from "../../shad/label";
 import { FormInputProps } from "../types";
@@ -18,6 +18,7 @@ interface CheckboxGroupProps<T extends FieldValues, J extends ValidValue>
     items: CheckboxGroupItem<J>[];
 }
 
+
 export const CheckboxGroup = <T extends FieldValues, J extends ValidValue>(
     props: CheckboxGroupProps<T, J>
 ): ReactNode => {
@@ -31,13 +32,8 @@ export const CheckboxGroup = <T extends FieldValues, J extends ValidValue>(
                 {props.items.map((item) => {
                     return (
                         <div
-                            className="flex items-start gap-3 cursor-pointer"
-                            onClick={() => {
-                                props.form.setValue(
-                                    props.name,
-                                    item.value as PathValue<T, typeof props.name>
-                                );
-                            }}
+                            key={`checkbox-item-${item.label}-${item.value}`}
+                            className="flex items-start gap-3"
                         >
                             <Checkbox
                                 id="terms-2"