From f9405008c8a39912814d047a1d6ed82da1d61a01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89ric=20D=2E?= <15271+edas@users.noreply.github.com>
Date: Fri, 30 May 2025 16:02:21 +0200
Subject: [PATCH 1/2] feat: Add a config parameter to keep option details open

Added a config parameter `keepOptionsDetailsOpen` as a checkbox (default to `false`).

Modified the bookmark form to have the details panel open by default if the configuration checkbox is checked.

Fixes #linkwarden/linkwarden/issues/1124
---
 src/@/components/BookmarkForm.tsx   | 12 +++++++++++-
 src/@/components/OptionsForm.tsx    | 24 ++++++++++++++++++++++++
 src/@/lib/config.ts                 |  2 ++
 src/@/lib/validators/config.ts      |  1 +
 src/@/lib/validators/optionsForm.ts |  1 +
 5 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/@/components/BookmarkForm.tsx b/src/@/components/BookmarkForm.tsx
index 52057e0..1a7c0d7 100644
--- a/src/@/components/BookmarkForm.tsx
+++ b/src/@/components/BookmarkForm.tsx
@@ -42,8 +42,14 @@ import { Label } from './ui/Label.tsx';
 
 let configured = false;
 let duplicated = false;
+
+// Remember the status of the keepOptionsDetailsOpen configuration checkbox
+// so that the next invocation of the bookmark form will have the
+// correct behaviour without any lag
+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 +130,10 @@ const BookmarkForm = () => {
         form.setValue('collection', {
           name: config.defaultCollection,
         });
+        if (openOptions !== config.keepOptionsDetailsOpen) {
+          keepOptionsDetailsOpen = config.keepOptionsDetailsOpen;
+          setOpenOptions(config.keepOptionsDetailsOpen);
+        }
       });
     });
     const getConfigUse = async () => {
diff --git a/src/@/components/OptionsForm.tsx b/src/@/components/OptionsForm.tsx
index b93a33e..ceda9c4 100644
--- a/src/@/components/OptionsForm.tsx
+++ b/src/@/components/OptionsForm.tsx
@@ -47,6 +47,7 @@ const OptionsForm = () => {
       username: '',
       password: '',
       apiKey: '',
+      keepOptionsDetailsOpen: false,
       syncBookmarks: false,
       defaultCollection: 'Unorganized',
     },
@@ -79,6 +80,7 @@ const OptionsForm = () => {
         username: '',
         password: '',
         apiKey: '',
+        keepOptionsDetailsOpen: false,
         syncBookmarks: false,
         defaultCollection: 'Unorganized',
       });
@@ -157,6 +159,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 +306,27 @@ const OptionsForm = () => {
             </>
           )}
 
+          <FormField
+            control={control}
+            name="keepOptionsDetailsOpen"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Keep details open</FormLabel>
+                <FormDescription>
+                  <FormControl>
+                    <input type="checkbox"
+                      checked={field.value}
+                      onChange={field.onChange}
+                      className="mr-2"
+                    /> 
+                  </FormControl>
+                  When saving a link, always open the details panel 
+                </FormDescription>
+                
+                <FormMessage />
+              </FormItem>
+            )}
+          />
           {/* Commented out fields */}
           {/* 
           <FormField
diff --git a/src/@/lib/config.ts b/src/@/lib/config.ts
index 7f6f4d6..dadd72f 100644
--- a/src/@/lib/config.ts
+++ b/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,
     })
   );
diff --git a/src/@/lib/validators/config.ts b/src/@/lib/validators/config.ts
index 2c3d6c5..c9b2597 100644
--- a/src/@/lib/validators/config.ts
+++ b/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>;
diff --git a/src/@/lib/validators/optionsForm.ts b/src/@/lib/validators/optionsForm.ts
index 2caccbe..5588e70 100644
--- a/src/@/lib/validators/optionsForm.ts
+++ b/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(),

From 497831db7975007932c654a7fa4c97bb05592790 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Thu, 5 Jun 2025 06:45:54 -0400
Subject: [PATCH 2/2] minor improvement

---
 src/@/components/BookmarkForm.tsx |  7 +++----
 src/@/components/OptionsForm.tsx  | 22 +++++++++-------------
 src/@/components/ui/CheckBox.tsx  | 16 ++++++++--------
 3 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/src/@/components/BookmarkForm.tsx b/src/@/components/BookmarkForm.tsx
index 1a7c0d7..21d72a1 100644
--- a/src/@/components/BookmarkForm.tsx
+++ b/src/@/components/BookmarkForm.tsx
@@ -43,13 +43,12 @@ import { Label } from './ui/Label.tsx';
 let configured = false;
 let duplicated = false;
 
-// Remember the status of the keepOptionsDetailsOpen configuration checkbox
-// so that the next invocation of the bookmark form will have the
-// correct behaviour without any lag
 let keepOptionsDetailsOpen = false;
 
 const BookmarkForm = () => {
-  const [openOptions, setOpenOptions] = useState<boolean>(keepOptionsDetailsOpen);
+  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);
diff --git a/src/@/components/OptionsForm.tsx b/src/@/components/OptionsForm.tsx
index ceda9c4..2a853fb 100644
--- a/src/@/components/OptionsForm.tsx
+++ b/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>({
@@ -311,19 +313,13 @@ const OptionsForm = () => {
             name="keepOptionsDetailsOpen"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Keep details open</FormLabel>
-                <FormDescription>
-                  <FormControl>
-                    <input type="checkbox"
-                      checked={field.value}
-                      onChange={field.onChange}
-                      className="mr-2"
-                    /> 
-                  </FormControl>
-                  When saving a link, always open the details panel 
-                </FormDescription>
-                
-                <FormMessage />
+                <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>
             )}
           />
diff --git a/src/@/components/ui/CheckBox.tsx b/src/@/components/ui/CheckBox.tsx
index 803e735..1ddfb8e 100644
--- a/src/@/components/ui/CheckBox.tsx
+++ b/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 };