feat: Add a config parameter to keep option details open

src/@/components/BookmarkForm.tsx

@@ -42,8 +42,13 @@ import { Label } from './ui/Label.tsx';
 
 let configured = false;
 let duplicated = false;
+
+let keepOptionsDetailsOpen = false;
+
 const BookmarkForm = () => {
-  const [openOptions, setOpenOptions] = useState<boolean>(false);
+  const [openOptions, setOpenOptions] = useState<boolean>(
+    keepOptionsDetailsOpen
+  );
   const [openCollections, setOpenCollections] = useState<boolean>(false);
   const [uploadImage, setUploadImage] = useState<boolean>(false);
   const [state, setState] = useState<'capturing' | 'uploading' | null>(null);
@@ -124,6 +129,10 @@ const BookmarkForm = () => {
         form.setValue('collection', {
           name: config.defaultCollection,
         });
+        if (openOptions !== config.keepOptionsDetailsOpen) {
+          keepOptionsDetailsOpen = config.keepOptionsDetailsOpen;
+          setOpenOptions(config.keepOptionsDetailsOpen);
+        }
       });
     });
     const getConfigUse = async () => {

src/@/components/OptionsForm.tsx

@@ -37,6 +37,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from './ui/Select.tsx'; // Import the Select component
+import { Checkbox } from './ui/CheckBox.tsx';
+import { Label } from './ui/Label.tsx';
 
 const OptionsForm = () => {
   const form = useForm<optionsFormValues>({
@@ -47,6 +49,7 @@ const OptionsForm = () => {
       username: '',
       password: '',
       apiKey: '',
+      keepOptionsDetailsOpen: false,
       syncBookmarks: false,
       defaultCollection: 'Unorganized',
     },
@@ -79,6 +82,7 @@ const OptionsForm = () => {
         username: '',
         password: '',
         apiKey: '',
+        keepOptionsDetailsOpen: false,
         syncBookmarks: false,
         defaultCollection: 'Unorganized',
       });
@@ -157,6 +161,7 @@ const OptionsForm = () => {
         baseUrl: values.baseUrl,
         defaultCollection: values.defaultCollection,
         syncBookmarks: values.syncBookmarks,
+        keepOptionsDetailsOpen: values.keepOptionsDetailsOpen,
         apiKey:
           values.method === 'apiKey' && values.apiKey
             ? values.apiKey
@@ -303,6 +308,21 @@ const OptionsForm = () => {
             </>
           )}
 
+          <FormField
+            control={control}
+            name="keepOptionsDetailsOpen"
+            render={({ field }) => (
+              <FormItem>
+                <Label className="flex items-center gap-2 w-fit cursor-pointer">
+                  <Checkbox
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                  Show more options by default
+                </Label>
+              </FormItem>
+            )}
+          />
           {/* Commented out fields */}
           {/* 
           <FormField

src/@/components/ui/CheckBox.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "@radix-ui/react-icons"
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from '@radix-ui/react-icons';
 
 import { cn } from '../../lib/utils.ts';
 
@@ -11,18 +11,18 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className
     )}
     {...props}
   >
     <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
+      className={cn('flex items-center justify-center text-current')}
     >
       <CheckIcon className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox }
+export { Checkbox };

src/@/lib/config.ts

@@ -5,6 +5,7 @@ const DEFAULTS: configType = {
   baseUrl: '',
   apiKey: '',
   defaultCollection: 'Unorganized',
+  keepOptionsDetailsOpen: false,
   syncBookmarks: false,
 };
 
@@ -36,6 +37,7 @@ export async function clearConfig() {
       baseUrl: '',
       apiKey: '',
       defaultCollection: 'Unorganized',
+      keepOptionsDetailsOpen: false,
       syncBookmarks: false,
     })
   );

src/@/lib/validators/config.ts

@@ -5,6 +5,7 @@ export const configSchema = z.object({
   defaultCollection: z.string().optional().default('Unorganized'),
   apiKey: z.string(),
   syncBookmarks: z.boolean().optional().default(false),
+  keepOptionsDetailsOpen: z.boolean().optional().default(false),
 });
 
 export type configType = z.infer<typeof configSchema>;

src/@/lib/validators/optionsForm.ts

@@ -5,6 +5,7 @@ export const optionsFormSchema = z.object({
   username: z.string(),
   password: z.string(),
   syncBookmarks: z.boolean().default(false),
+  keepOptionsDetailsOpen: z.boolean().default(false),
   defaultCollection: z.string().optional().default('Unorganized'),
   useApiKey: z.boolean().default(false),
   apiKey: z.string().optional(),