feat: add Cubox integration for saving entries (#3385)

* feat(integration): enhance Cubox integration with auto memo mode

- Add Cubox integration with API token support
- Add enableCuboxAutoMemo setting for auto memo mode
- Add i18n translations for Cubox settings
- Support saving selected text as memo when auto memo mode is enabled

* update icon

* update changelog

---------

Co-authored-by: Stephen Zhou <[email protected]>

Author: LionChenA

apps/desktop/changelog/next.md

@@ -2,6 +2,8 @@
 
 ## New Features
 
+- Cubox integration (#3385)
+
 ## Improvements
 
 ## Bug Fixes

apps/desktop/src/renderer/src/hooks/biz/useEntryActions.tsx

@@ -122,6 +122,10 @@ export const useEntryActions = ({ entryId, view }: { entryId: string; view?: Fee
         id: COMMAND_ID.integration.saveToReadeck,
         onClick: runCmdFn(COMMAND_ID.integration.saveToReadeck, [{ entryId }]),
       },
+      {
+        id: COMMAND_ID.integration.saveToCubox,
+        onClick: runCmdFn(COMMAND_ID.integration.saveToCubox, [{ entryId }]),
+      },
       {
         id: COMMAND_ID.entry.tip,
         onClick: runCmdFn(COMMAND_ID.entry.tip, [

apps/desktop/src/renderer/src/modules/command/commands/id.ts

@@ -20,6 +20,7 @@ export const COMMAND_ID = {
     saveToObsidian: "integration:save-to-obsidian",
     saveToOutline: "integration:save-to-outline",
     saveToReadeck: "integration:save-to-readeck",
+    saveToCubox: "integration:save-to-cubox",
   },
   list: {
     edit: "list:edit",

apps/desktop/src/renderer/src/modules/command/commands/integration.tsx

@@ -1,4 +1,5 @@
 import {
+  SimpleIconsCubox,
   SimpleIconsEagle,
   SimpleIconsInstapaper,
   SimpleIconsObsidian,
@@ -33,6 +34,7 @@ export const useRegisterIntegrationCommands = () => {
   useRegisterObsidianCommands()
   useRegisterOutlineCommands()
   useRegisterReadeckCommands()
+  useRegisterCuboxCommands()
 }
 
 const useRegisterEagleCommands = () => {
@@ -453,3 +455,87 @@ const useRegisterReadeckCommands = () => {
     },
   )
 }
+
+const useRegisterCuboxCommands = () => {
+  const { t } = useTranslation()
+
+  const enableCubox = useIntegrationSettingKey("enableCubox")
+  const cuboxToken = useIntegrationSettingKey("cuboxToken")
+  const enableCuboxAutoMemo = useIntegrationSettingKey("enableCuboxAutoMemo")
+  const cuboxAvailable = enableCubox && !!cuboxToken
+
+  const buildUrlRequestBody = (entry: FlatEntryModel) => {
+    return {
+      type: "url",
+      content: entry.entries.url || "",
+      title: entry.entries.title || "",
+      description: entry.entries.description || "",
+      tags: [],
+      folder: "",
+    }
+  }
+
+  const buildMemoRequestBody = (entry: FlatEntryModel, selectedText: string) => {
+    return {
+      type: "memo",
+      content: selectedText,
+      title: entry.entries.title || "",
+      description: entry.entries.description || "",
+      tags: [],
+      folder: "",
+      source_url: entry.entries.url,
+    }
+  }
+
+  useRegisterCommandEffect(
+    !cuboxAvailable
+      ? []
+      : defineFollowCommand({
+          id: COMMAND_ID.integration.saveToCubox,
+          label: t("entry_actions.save_to_cubox"),
+          icon: <SimpleIconsCubox />,
+          run: async ({ entryId }) => {
+            const entry = useEntryStore.getState().flatMapEntries[entryId]
+            if (!entry) {
+              toast.error("Failed to save to Cubox: entry is not available", { duration: 3000 })
+              return
+            }
+            try {
+              tracker.integration({
+                type: "cubox",
+                event: "save",
+              })
+
+              const selectedText = window.getSelection()?.toString() || ""
+
+              const requestBody =
+                selectedText && enableCuboxAutoMemo
+                  ? buildMemoRequestBody(entry, selectedText)
+                  : buildUrlRequestBody(entry)
+
+              await ofetch(cuboxToken, {
+                method: "POST",
+                body: requestBody,
+                headers: {
+                  "Content-Type": "application/json",
+                },
+              })
+
+              toast.success(t("entry_actions.saved_to_cubox"), {
+                duration: 3000,
+              })
+            } catch (error) {
+              toast.error(
+                `${t("entry_actions.failed_to_save_to_cubox")}: ${(error as FetchError)?.message || ""}`,
+                {
+                  duration: 3000,
+                },
+              )
+            }
+          },
+        }),
+    {
+      deps: [cuboxAvailable, cuboxToken, enableCuboxAutoMemo],
+    },
+  )
+}

apps/desktop/src/renderer/src/modules/command/commands/types.ts

@@ -120,12 +120,18 @@ export type SaveToReadeckCommand = Command<{
   fn: (payload: { entryId: string }) => void
 }>
 
+export type SaveToCuboxCommand = Command<{
+  id: typeof COMMAND_ID.integration.saveToCubox
+  fn: (payload: { entryId: string }) => void
+}>
+
 export type IntegrationCommand =
   | SaveToEagleCommand
   | SaveToReadwiseCommand
   | SaveToInstapaperCommand
   | SaveToObsidianCommand
   | SaveToOutlineCommand
   | SaveToReadeckCommand
+  | SaveToCuboxCommand
 
 export type BasicCommand = EntryCommand | SettingsCommand | IntegrationCommand

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

@@ -1,5 +1,6 @@
 import { Divider } from "@follow/components/ui/divider/index.js"
 import {
+  SimpleIconsCubox,
   SimpleIconsEagle,
   SimpleIconsInstapaper,
   SimpleIconsObsidian,
@@ -174,6 +175,41 @@ export const SettingIntegration = () => {
             type: "password",
             description: t("integration.readeck.token.description"),
           }),
+          {
+            type: "title",
+            value: (
+              <span className="flex items-center gap-2 font-bold">
+                <SimpleIconsCubox />
+                {t("integration.cubox.title")}
+              </span>
+            ),
+          },
+          defineSettingItem("enableCubox", {
+            label: t("integration.cubox.enable.label"),
+            description: t("integration.cubox.enable.description"),
+          }),
+          defineSettingItem("cuboxToken", {
+            label: t("integration.cubox.token.label"),
+            vertical: true,
+            type: "password",
+            description: (
+              <>
+                {t("integration.cubox.token.description")}{" "}
+                <a
+                  target="_blank"
+                  className="underline"
+                  rel="noreferrer noopener"
+                  href="https://cubox.pro/my/settings/extensions"
+                >
+                  https://cubox.pro/my/settings/extensions
+                </a>
+              </>
+            ),
+          }),
+          defineSettingItem("enableCuboxAutoMemo", {
+            label: t("integration.cubox.autoMemo.label"),
+            description: t("integration.cubox.autoMemo.description"),
+          }),
           BottomTip,
         ]}
       />

locales/app/en.json

@@ -89,6 +89,7 @@
   "entry_actions.deleted": "Deleted.",
   "entry_actions.export_as_pdf": "Export as PDF",
   "entry_actions.failed_to_delete": "Failed to delete.",
+  "entry_actions.failed_to_save_to_cubox": "Failed to save to Cubox.",
   "entry_actions.failed_to_save_to_eagle": "Failed to save to Eagle.",
   "entry_actions.failed_to_save_to_instapaper": "Failed to save to Instapaper.",
   "entry_actions.failed_to_save_to_obsidian": "Failed to save to Obsidian",
@@ -101,11 +102,13 @@
   "entry_actions.open_in_browser": "Open In {{which}}",
   "entry_actions.recent_reader": "Recent reader:",
   "entry_actions.save_media_to_eagle": "Save Media To Eagle",
+  "entry_actions.save_to_cubox": "Save to Cubox",
   "entry_actions.save_to_instapaper": "Save To Instapaper",
   "entry_actions.save_to_obsidian": "Save to Obsidian",
   "entry_actions.save_to_outline": "Save To Outline",
   "entry_actions.save_to_readeck": "Save To Readeck",
   "entry_actions.save_to_readwise": "Save To Readwise",
+  "entry_actions.saved_to_cubox": "Saved to Cubox",
   "entry_actions.saved_to_eagle": "Saved To Eagle.",
   "entry_actions.saved_to_instapaper": "Saved To Instapaper.",
   "entry_actions.saved_to_obsidian": "Saved to Obsidian",

locales/app/zh-CN.json

@@ -89,6 +89,7 @@
   "entry_actions.deleted": "已删除",
   "entry_actions.export_as_pdf": "导出为 PDF",
   "entry_actions.failed_to_delete": "删除失败",
+  "entry_actions.failed_to_save_to_cubox": "保存到 Cubox 失败。",
   "entry_actions.failed_to_save_to_eagle": "保存到 Eagle 失败。",
   "entry_actions.failed_to_save_to_instapaper": "保存到 Instapaper 失败。",
   "entry_actions.failed_to_save_to_obsidian": "保存到 Obsidian 失败。",
@@ -106,6 +107,7 @@
   "entry_actions.save_to_outline": "保存到 Outline",
   "entry_actions.save_to_readeck": "保存到 Readeck",
   "entry_actions.save_to_readwise": "保存到 Readwise",
+  "entry_actions.saved_to_cubox": "已保存到 Cubox",
   "entry_actions.saved_to_eagle": "已保存到 Eagle。",
   "entry_actions.saved_to_instapaper": "已保存到 Instapaper。",
   "entry_actions.saved_to_obsidian": "已保存到 Obsidian。",

locales/settings/en.json

@@ -220,6 +220,13 @@
   "general.timeline": "Timeline",
   "general.unread": "Unread",
   "general.voices": "Voices",
+  "integration.cubox.autoMemo.description": "Automatically use Memo mode when text is selected to save to Cubox.",
+  "integration.cubox.autoMemo.label": "Auto Memo Mode",
+  "integration.cubox.enable.description": "Show 'Save to Cubox' button if available.",
+  "integration.cubox.enable.label": "Enable",
+  "integration.cubox.title": "Cubox",
+  "integration.cubox.token.description": "Please enter the complete Cubox API URL, format: https://cubox.pro/c/api/save/xxxxxxxxx. You can get it here: ",
+  "integration.cubox.token.label": "Cubox API URL",
   "integration.eagle.enable.description": "Display 'Save media to Eagle' button when available.",
   "integration.eagle.enable.label": "Enable",
   "integration.eagle.title": "Eagle",

locales/settings/zh-CN.json

@@ -220,6 +220,13 @@
   "general.timeline": "时间线",
   "general.unread": "未读",
   "general.voices": "声音",
+  "integration.cubox.autoMemo.description": "自动使用 Memo 模式保存选中的文本到 Cubox。",
+  "integration.cubox.autoMemo.label": "自动 Memo 模式",
+  "integration.cubox.enable.description": "显示「保存到 Cubox」按钮（如果可用）。",
+  "integration.cubox.enable.label": "启用",
+  "integration.cubox.title": "Cubox",
+  "integration.cubox.token.description": "请输入完整的 Cubox API URL，格式如：https://cubox.pro/c/api/save/xxxxxxxxx。你可以在此获取：",
+  "integration.cubox.token.label": "Cubox API URL",
   "integration.eagle.enable.description": "显示「保存到 Eagle」按钮（如果可用）。",
   "integration.eagle.enable.label": "启用",
   "integration.eagle.title": "Eagle",

packages/components/src/ui/platform-icon/collections/cubox.tsx

@@ -0,0 +1,24 @@
+import { cn } from "@follow/utils/utils"
+import type { SVGProps } from "react"
+
+export function SimpleIconsCubox({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("rounded", className)}
+      {...props}
+    >
+      <path d="M0 0 H100 V100 H0 Z" fill="currentColor" />
+      <path d="M10,100 A40,40 0 0,1 90,100 Z" fill="black" />
+
+      <circle cx="40" cy="75" r="8" fill="white" />
+      <circle cx="42" cy="75" r="3" fill="black" />
+
+      <circle cx="60" cy="75" r="8" fill="white" />
+      <circle cx="62" cy="75" r="3" fill="black" />
+    </svg>
+  )
+}

packages/components/src/ui/platform-icon/icons.ts

@@ -1,3 +1,4 @@
+export * from "./collections/cubox"
 export * from "./collections/eagle"
 export * from "./collections/instapaper"
 export * from "./collections/obsidian"

packages/shared/src/settings/defaults.ts

@@ -114,6 +114,11 @@ export const defaultIntegrationSettings: IntegrationSettings = {
   enableReadeck: false,
   readeckEndpoint: "",
   readeckToken: "",
+
+  // cubox
+  enableCubox: false,
+  cuboxToken: "",
+  enableCuboxAutoMemo: false,
 }
 
 export const defaultSettings = {

packages/shared/src/settings/interface.ts

@@ -100,4 +100,9 @@ export interface IntegrationSettings {
   enableReadeck: boolean
   readeckEndpoint: string
   readeckToken: string
+
+  // cubox
+  enableCubox: boolean
+  cuboxToken: string
+  enableCuboxAutoMemo: boolean
 }