feat(settings): ✨ support specify logseq api config in web [skip ci]

Author: haydenull

src/Agenda3/components/modals/SettingsModal/GeneralSettingsForm.tsx

@@ -1,12 +1,19 @@
-import { Checkbox, Select, Tooltip } from 'antd'
+import { useLocalStorageValue } from '@react-hookz/web'
+import { Checkbox, Input, Select, Tooltip } from 'antd'
 import { useTranslation } from 'react-i18next'
+import { FaRegCircleQuestion } from 'react-icons/fa6'
 
+import { DEFAULT_LOGSEQ_API_CONFIG, LOGSEQ_API_CONFIG_KEY } from '@/Agenda3/helpers/logseq'
 import useSettings from '@/Agenda3/hooks/useSettings'
 import type { Filter, Language } from '@/Agenda3/models/settings'
 
 const GeneralSettingsForm = () => {
   const { t, i18n } = useTranslation()
   const { settings, setSettings } = useSettings()
+  const { value: apiConfig, set: setApiConfig } = useLocalStorageValue(LOGSEQ_API_CONFIG_KEY, {
+    defaultValue: DEFAULT_LOGSEQ_API_CONFIG,
+    initializeWithValue: true,
+  })
 
   const onChange = (key: string, value: number | string | boolean | undefined | Filter[] | string[]) => {
     setSettings(key, value)
@@ -62,6 +69,44 @@ const GeneralSettingsForm = () => {
             ]}
           />
         </div>
+        {import.meta.env.VITE_MODE === 'web' ? (
+          <>
+            <div className="mt-4">
+              <div className="flex cursor-pointer items-center gap-2 text-gray-500">
+                Logseq API Server
+                <FaRegCircleQuestion title="This configuration requires reloading the page to take effect." />
+              </div>
+              <Input
+                className="w-[300px]"
+                placeholder={DEFAULT_LOGSEQ_API_CONFIG.apiServer}
+                value={apiConfig?.apiServer}
+                onChange={(e) =>
+                  setApiConfig((config) => ({
+                    ...config,
+                    apiServer: e.target.value?.trim() || DEFAULT_LOGSEQ_API_CONFIG.apiServer,
+                  }))
+                }
+              />
+            </div>
+            <div className="mt-4">
+              <div className="flex cursor-pointer items-center gap-2 text-gray-500">
+                Logseq API Token
+                <FaRegCircleQuestion title="This configuration requires reloading the page to take effect." />
+              </div>
+              <Input.Password
+                className="w-[300px]"
+                placeholder={DEFAULT_LOGSEQ_API_CONFIG.apiToken}
+                value={apiConfig?.apiToken}
+                onChange={(e) =>
+                  setApiConfig((config) => ({
+                    ...config,
+                    apiToken: e.target.value?.trim() || DEFAULT_LOGSEQ_API_CONFIG.apiToken,
+                  }))
+                }
+              />
+            </div>
+          </>
+        ) : null}
       </div>
     </>
   )

src/Agenda3/helpers/logseq.ts

@@ -11,3 +11,22 @@ export const navToLogseqBlock = (task: AgendaEntity, currentGraph?: { name: stri
     window.open(`logseq://graph/${currentGraph.name}?block-id=${uuid}`, '_blank')
   }
 }
+
+export const LOGSEQ_API_CONFIG_KEY = 'logseq-api-config'
+export const DEFAULT_LOGSEQ_API_CONFIG = {
+  apiServer: import.meta.env.VITE_LOGSEQ_API_SERVER,
+  apiToken: import.meta.env.VITE_LOGSEQ_API_TOKEN,
+}
+type LogseqApiConfig = { apiServer: string; apiToken: string }
+/**
+ * 获取 logseq api 配置
+ */
+export const getLogseqApiConfig = (): LogseqApiConfig => {
+  try {
+    const _config = JSON.parse(localStorage.getItem(LOGSEQ_API_CONFIG_KEY) || '{}') as LogseqApiConfig
+    return { ...DEFAULT_LOGSEQ_API_CONFIG, ..._config }
+  } catch (error) {
+    console.error('Failed to parse logseq api config', localStorage.getItem(LOGSEQ_API_CONFIG_KEY), error)
+    return DEFAULT_LOGSEQ_API_CONFIG
+  }
+}

src/Agenda3/locales/en/translation.json

@@ -49,5 +49,6 @@
   "month": "month",
   "Exit": "Exit",
   "Title cannot be empty": "Title cannot be empty",
-  "Pleasse specify start or deadline": "Pleasse specify start or deadline"
+  "Pleasse specify start or deadline": "Pleasse specify start or deadline",
+  "This configuration requires reloading the page to take effect.": "This configuration requires reloading the page to take effect."
 }

src/Agenda3/locales/zh-CN/translation.json

@@ -49,5 +49,6 @@
   "month": "本月",
   "Exit": "退出",
   "Title cannot be empty": "标题不能为空",
-  "Pleasse specify start or deadline": "请指定开始或截止日期"
+  "Pleasse specify start or deadline": "请指定开始或截止日期",
+  "This configuration requires reloading the page to take effect.": "此配置需要重新加载页面才能生效。"
 }

src/main.tsx

@@ -25,6 +25,7 @@ import initializeTodoist from '@/register/todoist'
 import { getInitialSettings, initializeSettings } from '@/util/baseInfo'
 import { listenEsc, log, managePluginTheme, setPluginTheme, toggleAppTransparent } from '@/util/util'
 
+import { getLogseqApiConfig } from './Agenda3/helpers/logseq'
 import { track } from './Agenda3/helpers/umami'
 import Agenda3App from './apps/Agenda3App'
 import TaskListApp from './apps/TaskListApp'
@@ -45,18 +46,15 @@ echarts.use([
   LegendComponent,
 ])
 
-const isDevelopment = import.meta.env.DEV
 let root: Root | null = null
 
 if (import.meta.env.VITE_MODE === 'web') {
   // run in browser
-  console.log('[faiz:] === meta.env.VITE_LOGSEQ_API_SERVER', import.meta.env.VITE_LOGSEQ_API_SERVER)
+  const { apiServer, apiToken } = getLogseqApiConfig()
+  console.log('[faiz:] === LOGSEQ_API_SERVER', apiServer)
   console.log(`%c[version]: v${__APP_VERSION__}`, 'background-color: #60A5FA; color: white; padding: 4px;')
   proxyLogseq({
-    config: {
-      apiServer: import.meta.env.VITE_LOGSEQ_API_SERVER,
-      apiToken: import.meta.env.VITE_LOGSEQ_API_TOKEN,
-    },
+    config: { apiServer, apiToken },
     settings: window.mockSettings,
   })
   // logseq.provideStyle(`.drawer[data-drawer-name="agenda"] {display: none;}`)