diff --git a/icons/mgc/department_cute_re.svg b/icons/mgc/department_cute_re.svg new file mode 100644 index 000000000..b21777794 --- /dev/null +++ b/icons/mgc/department_cute_re.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/src/atoms/settings/helper.ts b/src/renderer/src/atoms/settings/helper.ts index 13bfec8ef..eb2e9c33c 100644 --- a/src/renderer/src/atoms/settings/helper.ts +++ b/src/renderer/src/atoms/settings/helper.ts @@ -101,7 +101,7 @@ export const createDefineSettingItem = key: K, options: { label: string - description?: string + description?: string | JSX.Element onChange?: (value: T[K]) => void hide?: boolean }, diff --git a/src/renderer/src/atoms/settings/integration.ts b/src/renderer/src/atoms/settings/integration.ts new file mode 100644 index 000000000..7e47e5fa9 --- /dev/null +++ b/src/renderer/src/atoms/settings/integration.ts @@ -0,0 +1,19 @@ +import type { IntegrationSettings } from "@shared/interface/settings" + +import { createSettingAtom } from "./helper" + +export const createDefaultSettings = (): IntegrationSettings => ({ + enableEagle: true, + enableReadwise: true, + readwiseToken: "", +}) + +export const { + useSettingKey: useIntegrationSettingKey, + useSettingSelector: useIntegrationSettingSelector, + setSetting: setIntegrationSetting, + clearSettings: clearIntegrationSettings, + initializeDefaultSettings: initializeDefaultIntegrationSettings, + getSettings: getIntegrationSettings, + useSettingValue: useIntegrationSettingValue, +} = createSettingAtom("integration", createDefaultSettings) diff --git a/src/renderer/src/components/ui/platform-icon/collections/readwise.tsx b/src/renderer/src/components/ui/platform-icon/collections/readwise.tsx new file mode 100644 index 000000000..cd1cddcbe --- /dev/null +++ b/src/renderer/src/components/ui/platform-icon/collections/readwise.tsx @@ -0,0 +1,22 @@ +import { cn } from "@renderer/lib/utils" +import type { SVGProps } from "react" + +export function SimpleIconsReadwise(props: SVGProps) { + return ( + + + + + + + + + ) +} diff --git a/src/renderer/src/components/ui/platform-icon/icons.ts b/src/renderer/src/components/ui/platform-icon/icons.ts index c7cd070eb..1d0fd8339 100644 --- a/src/renderer/src/components/ui/platform-icon/icons.ts +++ b/src/renderer/src/components/ui/platform-icon/icons.ts @@ -1,2 +1,3 @@ export * from "./collections/eagle" +export * from "./collections/readwise" export * from "./collections/rss3" diff --git a/src/renderer/src/modules/settings/control.tsx b/src/renderer/src/modules/settings/control.tsx index 510dd17e6..5d6d18945 100644 --- a/src/renderer/src/modules/settings/control.tsx +++ b/src/renderer/src/modules/settings/control.tsx @@ -1,10 +1,11 @@ import { Button } from "@renderer/components/ui/button" import { Checkbox } from "@renderer/components/ui/checkbox" +import { Input } from "@renderer/components/ui/input" import { Label } from "@renderer/components/ui/label" import { SegmentGroup, SegmentItem } from "@renderer/components/ui/segement" import { Switch } from "@renderer/components/ui/switch" import { cn } from "@renderer/lib/utils" -import type { ReactNode } from "react" +import type { ChangeEventHandler, ReactNode } from "react" import { useId, useState } from "react" export const SettingCheckbox: Component<{ @@ -47,6 +48,27 @@ export const SettingSwitch: Component<{ ) } +export const SettingInput: Component<{ + label: string + value: string + onChange: ChangeEventHandler +}> = ({ value, label, onChange, className }) => { + const id = useId() + return ( +
+ + +
+ ) +} + export const SettingTabbedSegment: Component<{ label: string value: string diff --git a/src/renderer/src/modules/settings/setting-builder.tsx b/src/renderer/src/modules/settings/setting-builder.tsx index c557b66d8..e822c1aca 100644 --- a/src/renderer/src/modules/settings/setting-builder.tsx +++ b/src/renderer/src/modules/settings/setting-builder.tsx @@ -7,6 +7,7 @@ import { isValidElement } from "react" import { SettingActionItem, SettingDescription, + SettingInput, SettingSwitch, } from "./control" import { SettingItemGroup, SettingSectionTitle } from "./section" @@ -93,7 +94,16 @@ export const createSettingBuilder = break } case "string": { - return null + ControlElement = ( + + assertSetting.onChange(event.target.value as T[keyof T])} + label={assertSetting.label} + /> + ) + break } default: { return null diff --git a/src/renderer/src/modules/settings/tabs/integration.tsx b/src/renderer/src/modules/settings/tabs/integration.tsx new file mode 100644 index 000000000..272886107 --- /dev/null +++ b/src/renderer/src/modules/settings/tabs/integration.tsx @@ -0,0 +1,90 @@ +import { createSetting } from "@renderer/atoms/settings/helper" +import { + setIntegrationSetting, + useIntegrationSettingValue, +} from "@renderer/atoms/settings/integration" +import { + createDefaultSettings, + setUISetting, + useUISettingSelector, +} from "@renderer/atoms/settings/ui" +import { SimpleIconsEagle, SimpleIconsReadwise } from "@renderer/components/ui/platform-icon/icons" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@renderer/components/ui/select" +import { tipcClient } from "@renderer/lib/client" +import { useQuery } from "@tanstack/react-query" + +import { SettingsTitle } from "../title" + +const { defineSettingItem, SettingBuilder } = createSetting( + useIntegrationSettingValue, + setIntegrationSetting, +) +export const SettingIntegration = () => ( + <> + +
+ Eagle, + }, + defineSettingItem("enableEagle", { + label: "Enable", + description: <>Display Save media to Eagle button when available., + }), + { + type: "title", + value: Readwise, + }, + defineSettingItem("enableReadwise", { + label: "Enable", + description: <>Display Save to Readwise button when available., + }), + defineSettingItem("readwiseToken", { + label: "Readwise Access Token", + description: <>You can get it here: readwise.io/access_token., + }), + ]} + /> +
+ +) + +export const VoiceSelector = () => { + const { data } = useQuery({ + queryFn: () => tipcClient?.getVoices(), + queryKey: ["voices"], + }) + const voice = useUISettingSelector((state) => state.voice) + + return ( +
+ Voices + +
+ ) +} diff --git a/src/renderer/src/pages/settings/(settings)/integration.tsx b/src/renderer/src/pages/settings/(settings)/integration.tsx new file mode 100644 index 000000000..b96519afe --- /dev/null +++ b/src/renderer/src/pages/settings/(settings)/integration.tsx @@ -0,0 +1,16 @@ +import { SettingIntegration } from "@renderer/modules/settings/tabs/integration" +import { defineSettingPage } from "@renderer/modules/settings/utils" + +const iconName = "i-mgc-department-cute-re" +const name = "Integration" +const priority = 1025 + +export const loader = defineSettingPage({ + iconName, + name, + priority, +}) + +export function Component() { + return +} diff --git a/src/shared/src/interface/settings.ts b/src/shared/src/interface/settings.ts index 2ea53125f..f4f92c387 100644 --- a/src/shared/src/interface/settings.ts +++ b/src/shared/src/interface/settings.ts @@ -33,3 +33,9 @@ export interface UISettings { // tts voice: string } + +export interface IntegrationSettings { + enableEagle: boolean + enableReadwise: boolean + readwiseToken: string +}