fix: setting item support props

Signed-off-by: Innei <i@innei.in>

src/renderer/src/atoms/settings/integration.ts

@@ -4,9 +4,9 @@ import { createSettingAtom } from "./helper"
 
 export const createDefaultSettings = (): IntegrationSettings => ({
   enableEagle: true,
-  enableReadwise: true,
+  enableReadwise: false,
   readwiseToken: "",
-  enableInstapaper: true,
+  enableInstapaper: false,
   instapaperUsername: "",
   instapaperPassword: "",
 })

src/renderer/src/hooks/common/useInputComposition.ts

@@ -57,10 +57,17 @@ export const useInputComposition = <E = HTMLInputElement>(
     [onKeyDown],
   )
 
-  return {
+  const ret = {
     onCompositionEnd: handleCompositionEnd,
     onCompositionStart: handleCompositionStart,
     onKeyDown: handleKeyDown,
-    isCompositionRef,
+
+  }
+  Object.defineProperty(ret, "isCompositionRef", {
+    value: isCompositionRef,
+    enumerable: false,
+  })
+  return ret as typeof ret & {
+    isCompositionRef: typeof isCompositionRef
   }
 }

src/renderer/src/modules/settings/control.tsx

@@ -53,14 +53,32 @@ export const SettingInput: Component<{
   value: string
   onChange: ChangeEventHandler<HTMLInputElement>
   type: string
-}> = ({ value, label, onChange, className, type }) => {
+  vertical?: boolean
+  labelClassName?: string
+}> = ({
+  value,
+  label,
+  onChange,
+  labelClassName,
+  className,
+  type,
+  vertical,
+}) => {
   const id = useId()
 
   return (
     <div
-      className={cn("mb-1 flex items-center justify-between gap-12", className)}
+      className={cn(
+        "mb-1 flex",
+        vertical ?
+          "mb-2 flex-col gap-3" :
+          "flex-row items-center justify-between gap-12",
+        className,
+      )}
     >
-      <Label className="shrink-0" htmlFor={id}>{label}</Label>
+      <Label className={cn("shrink-0", labelClassName)} htmlFor={id}>
+        {label}
+      </Label>
       <Input
         type={type}
         id={id}

src/renderer/src/modules/settings/setting-builder.tsx

@@ -22,6 +22,14 @@ export type SettingItem<T, K extends keyof T = keyof T> = {
   description?: string
   onChange: (value: T[K]) => void
   type?: "password"
+
+  vertical?: boolean
+
+  componentProps?: {
+    labelClassName?: string
+    className?: string
+    [key: string]: any
+  }
 } & SharedSettingItem
 
 type SectionSettingItem = {
@@ -97,6 +105,8 @@ export const createSettingBuilder =
               case "string": {
                 ControlElement = (
                   <SettingInput
+                    vertical={assertSetting.vertical}
+                    labelClassName={assertSetting.componentProps?.labelClassName}
                     type={assertSetting.type || "text"}
                     className="mt-4"
                     value={settingObject[assertSetting.key] as string}

src/renderer/src/modules/settings/tabs/integration.tsx

@@ -49,6 +49,7 @@ export const SettingIntegration = () => (
           }),
           defineSettingItem("readwiseToken", {
             label: "Readwise Access Token",
+            vertical: true,
             type: "password",
             description: <>You can get it here: <a target="_blank" className="underline" rel="noreferrer noopener" href="https://readwise.io/access_token">readwise.io/access_token</a>.</>,
           }),
@@ -62,10 +63,16 @@ export const SettingIntegration = () => (
           }),
           defineSettingItem("instapaperUsername", {
             label: "Instapaper Username",
+            componentProps: {
+              labelClassName: "w-[150px]",
+            },
           }),
           defineSettingItem("instapaperPassword", {
             label: "Instapaper Password",
             type: "password",
+            componentProps: {
+              labelClassName: "w-[150px]",
+            },
           }),
         ]}
       />