feat(all): tool support for ChatGPT, search, translation and customiz…

…ation

.changeset/mighty-mirrors-eat.md

@@ -0,0 +1,5 @@
+---
+'anki-templates': minor
+---
+
+feat(all): tool support for ChatGPT, search, translation and customization (工具支持ChatGPT、搜索、翻译和自定义)

build/rollup.js

@@ -15,7 +15,6 @@ import autoprefixer from 'autoprefixer';
 import cssnano from 'cssnano';
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import * as R from 'remeda';
 import postcss from 'rollup-plugin-postcss';
 import { swc } from 'rollup-plugin-swc3';
 import { visualizer } from 'rollup-plugin-visualizer';
@@ -31,7 +30,7 @@ export async function rollupOptions(config) {
       .readFile(
         path.resolve(
           import.meta.dirname,
-          '../locales/',
+          '../translations/',
           `${config.locale}.json`,
         ),
         { encoding: 'utf8' },
@@ -42,13 +41,11 @@ export async function rollupOptions(config) {
       input: 'entry',
       plugins: [
         virtual({
-          'at/options': dataToEsm(templates[config.id]),
-          'at/locale': dataToEsm({
+          'at/options': dataToEsm({
+            ...templates[config.id],
             locale: config.locale,
           }),
-          'at/i18n': dataToEsm(
-            R.mapKeys(i18nMap, (key) => `t${R.capitalize(key)}`),
-          ),
+          'at/i18n': dataToEsm(i18nMap),
           entry: buildEntry(),
         }),
         replace({
@@ -164,6 +161,9 @@ ${buildFields()}
               compress: {
                 drop_console: true,
               },
+              format: {
+                comments: false,
+              },
             }),
           false,
         ),

package.json

@@ -5,7 +5,7 @@
   "description": "",
   "scripts": {
     "build": "node build/cli.js",
-    "dev": "node build/cli.js --dev",
+    "dev": "ROLLUP_WATCH=true node build/cli.js --dev",
     "lint": "pnpm eslint .",
     "format": "pnpm eslint --fix .",
     "test": "vitest"
@@ -58,7 +58,6 @@
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.2",
-    "@headlessui/react": "^2.1.4",
     "ahooks": "^3.8.1",
     "clsx": "^2.1.1",
     "jotai": "^2.9.3",

src/components/about.tsx

@@ -1,5 +1,5 @@
 import { version } from '../../package.json';
-import { locale } from 'at/locale';
+import { locale } from 'at/options';
 import clsx from 'clsx';
 
 export const EnAbout = () => (

src/components/block.tsx

@@ -1,19 +1,40 @@
+import { Button } from './button';
+import { ToolsContext } from './tools/context';
+import { selectionMenuAtom } from '@/store/settings';
 import clsx from 'clsx';
-import { PropsWithChildren, ReactNode, forwardRef } from 'react';
+import { useAtomValue } from 'jotai/react';
+import { FC, PropsWithChildren, ReactNode } from 'react';
 
-export const Block = forwardRef<
-  HTMLDivElement,
-  PropsWithChildren & { name: ReactNode; className?: string; id?: string }
->(({ children, className, name, id }, ref) => (
-  <div className={clsx('mb-6', className)} ref={ref} id={id}>
-    <div className="mb-1 px-4 text-sm text-gray-500">{name}</div>
-    <div
-      className={clsx(
-        'rounded-xl border bg-white px-4 py-5',
-        'dark:border-gray-500 dark:bg-opacity-5',
-      )}
-    >
-      {children}
+export const Block: FC<
+  PropsWithChildren & {
+    name: ReactNode;
+    action?: string;
+    onAction?: () => void;
+    className?: string;
+    id?: string;
+    enableTools?: boolean;
+  }
+> = ({ children, className, name, id, enableTools, action, onAction }, ref) => {
+  const prefSelectionMenu = useAtomValue(selectionMenuAtom);
+
+  return (
+    <div className={clsx('mb-6', className)} ref={ref} id={id}>
+      <div className="mb-1 px-4 text-sm text-gray-500 flex justify-between">
+        <span>{name}</span>
+        {action ? <Button onClick={onAction}>{action}</Button> : null}
+      </div>
+      <div
+        className={clsx(
+          'rounded-xl border bg-white px-4 py-5',
+          'dark:border-gray-500 dark:bg-opacity-5',
+        )}
+      >
+        {enableTools && prefSelectionMenu ? (
+          <ToolsContext>{children}</ToolsContext>
+        ) : (
+          children
+        )}
+      </div>
     </div>
-  </div>
-));
+  );
+};

src/components/button.tsx

@@ -1,16 +1,24 @@
 import clsx from 'clsx';
 import { FC, PropsWithChildren } from 'react';
 
-export const Button: FC<
-  PropsWithChildren & { onClick?: () => void; className?: string }
-> = ({ onClick, children, className }) => (
+interface ButtonProps {
+  status?: 'normal' | 'danger';
+  onClick?: () => void;
+  className?: string;
+}
+
+export const Button: FC<PropsWithChildren & ButtonProps> = ({
+  status = 'normal',
+  onClick,
+  children,
+  className,
+}) => (
   <button
     type="button"
-    className={clsx(
-      'inline-flex justify-center rounded-md border border-transparent bg-indigo-100 px-4 py-2 text-sm font-medium text-indigo-900 hover:bg-indigo-200 focus:outline-none',
-      className,
-      'dark:bg-white dark:bg-opacity-10 dark:text-white dark:hover:bg-opacity-20',
-    )}
+    className={clsx('font-bold', className, {
+      'text-indigo-500': status === 'normal',
+      'text-red-500': status === 'danger',
+    })}
     onClick={onClick}
   >
     {children}