feat: add prompt category selection (#1)

package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "build": "nx run-many --target=build --all",
+    "build": "nx run-many --target=build --parallel=3",
+    "build:watch": "nx watch --all -- nx run-many --target=build --parallel=3",
     "test": "nx run-many --target=test --all",
     "lint": "nx run-many --target=lint --all",
     "format:check": "nx format:check --all",
@@ -38,6 +39,7 @@
     "@swc/cli": "~0.1.62",
     "@swc/core": "~1.3.51",
     "@testing-library/react": "14.0.0",
+    "@types/chrome": "^0.0.235",
     "@types/jest": "^29.4.0",
     "@types/node": "18.14.2",
     "@types/react": "18.0.28",
@@ -57,6 +59,7 @@
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
+    "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.1",
     "husky": "^8.0.3",
     "jest": "^29.4.1",

packages/chrome-extension/.eslintrc.json

@@ -1,6 +1,9 @@
 {
   "extends": ["../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
+  "globals": {
+    "chrome": "readonly"
+  },
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

packages/chrome-extension/project.json

@@ -14,10 +14,7 @@
         "baseHref": "/",
         "main": "packages/chrome-extension/src/index.ts",
         "tsConfig": "packages/chrome-extension/tsconfig.app.json",
-        "assets": [
-          "packages/chrome-extension/src/assets",
-          "packages/chrome-extension/src/styles.css"
-        ],
+        "assets": ["packages/chrome-extension/src/assets"],
         "scripts": [],
         "isolatedConfig": true,
         "webpackConfig": "packages/chrome-extension/webpack.config.js"

packages/chrome-extension/src/components/EnabledPrompts/index.tsx

@@ -0,0 +1,96 @@
+/// <reference types="chrome" />
+import { Select, Space, Tag } from 'antd';
+import type { CustomTagProps } from 'rc-select/lib/BaseSelect';
+import React, { useEffect, useState } from 'react';
+
+const { Option } = Select;
+
+interface PromptCategory {
+  name: string;
+  emoji: string;
+}
+
+interface SelectPromptCategoriesProps {
+  promptCategories: PromptCategory[];
+}
+
+const colorOptions: Record<string, string> = {
+  General: 'gold',
+  Code: 'cyan',
+};
+
+function SelectPromptCategories({
+  promptCategories,
+}: SelectPromptCategoriesProps) {
+  const localStorageKey = 'enabledPromptCategories';
+
+  const [enabledPromptCategories, setEnabledPromptCategories] = useState<
+    string[]
+  >([]);
+
+  useEffect(() => {
+    chrome.storage.local.get(
+      [localStorageKey],
+      (result: { [x: string]: string }) => {
+        if (result[localStorageKey]) {
+          setEnabledPromptCategories(result[localStorageKey].split(','));
+        }
+      }
+    );
+  }, []);
+
+  const handleChange = async (values: string[]) => {
+    setEnabledPromptCategories(values);
+    await chrome.storage.local.set({ [localStorageKey]: values.join(',') });
+  };
+
+  const tagRender = (props: CustomTagProps) => {
+    const { label, value, closable, onClose } = props;
+
+    console.log(props);
+
+    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    return (
+      <Tag
+        color={colorOptions[value]}
+        onMouseDown={onPreventMouseDown}
+        closable={closable}
+        onClose={onClose}
+        style={{ marginRight: 3 }}
+      >
+        {label}
+      </Tag>
+    );
+  };
+
+  return (
+    <Select
+      title="Select prompt types to enable"
+      mode="multiple"
+      style={{ width: '100%' }}
+      placeholder="select prompt types to enable"
+      value={enabledPromptCategories}
+      onChange={handleChange}
+      optionLabelProp="label"
+      tagRender={tagRender}
+    >
+      {promptCategories
+        .filter((o) => !enabledPromptCategories.includes(o.name))
+        .map((promptCategory) => (
+          <Option value={promptCategory.name} label={promptCategory.name}>
+            <Space>
+              <span role="img" aria-label={promptCategory.name}>
+                {promptCategory.emoji}
+              </span>
+              {promptCategory.name}
+            </Space>
+          </Option>
+        ))}
+    </Select>
+  );
+}
+
+export default SelectPromptCategories;