feat: add dynamic select for effects (#24)

Instead having a circle for each effect, would be easier to just have a
Select field.

Since this select is dynamic, it won't fit on the current Select made by
@moovmooov, so we implemented a `DynamicSelect` for this exceptional
case (which can happen in the future).


![image](https://github.com/user-attachments/assets/f2c02086-8f01-4658-8e30-585e12121e15)

Author: danielhe4rt

lefthook.yml

@@ -9,9 +9,9 @@ pre-commit:
   parallel: false
   commands:
     lint:
-      run: pnpx @biomejs/biome check --no-errors-on-unmatched --files-ignore-unknown=true -- {staged_files}
+      run: pnpx @biomejs/biome@1.8.3 check --no-errors-on-unmatched --files-ignore-unknown=true -- {staged_files}
 pre-push:
   parallel: false
   commands:
     lint:
-      run: pnpx @biomejs/biome check --no-errors-on-unmatched --files-ignore-unknown=true -- {push_files}
+      run: pnpx @biomejs/biome@1.8.3 check --no-errors-on-unmatched --files-ignore-unknown=true -- {push_files}

locales/en/messages.json

@@ -139,5 +139,8 @@
   },
   "pronounsItIts": {
     "message": "It/Its"
+  },
+  "effectsLabel": {
+    "message": "Select your effect"
   }
 }

locales/pt_BR/messages.json

@@ -154,5 +154,8 @@
   },
   "themes": {
     "message": "Temas"
+  },
+  "effectsLabel": {
+    "message": "Selecione um Efeito"
   }
 }

package.json

@@ -76,6 +76,7 @@
       "identity",
       "*://*.twitch.tv/*",
       "https://*.danielheart.dev/*",
+      "https://*.basementdevs.com.br/*",
       "*://localhost/*",
       "storage"
     ]

pnpm-lock.yaml

@@ -1,7 +1,10 @@
+import DynamicSelect from "@/components/ui/dynamic-select";
+import SelectField from "@/components/ui/select-field";
 import { useUserSettings } from "@/hooks/use-user-settings";
 import { useAccessToken } from "@/providers/access-token-provider";
 import { usePatchUserSettingsMutation } from "@/services/settings-service";
 import type { Effect } from "@/types/types";
+import { PRONOUNS_ITEMS } from "@/utils/pronouns";
 import { useStorage } from "@plasmohq/storage/hook";
 import { Check } from "lucide-react";
 
@@ -21,7 +24,12 @@ const EffectCustomize = ({
   const { activeSettings } = useUserSettings(liveProfile, channelName);
 
   const effectList = effects || [];
-
+  console.log(effectList);
+  const mappedEffects = effectList.map((effect) => ({
+    name: effect.name,
+    apiValue: effect.id.toString(),
+  }));
+  console.log(mappedEffects);
   const handleChange = (key: string, value: number | undefined) => {
     mutate({
       authorization: accessToken,
@@ -34,22 +42,16 @@ const EffectCustomize = ({
 
   return (
     <div className="flex space-x-4">
-      {effectList.map((effect) => (
-        <div key={effect.id} className="relative">
-          <button
-            type="button"
-            className={`w-8 h-8 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-white
-                ${activeSettings?.effect_id === effect.id ? "ring-2 ring-white" : ""}`}
-            style={{ backgroundColor: effect.hex ?? "#000" }}
-            onClick={() => handleChange("effect_id", effect.id)}
-          />
-          {activeSettings?.effect_id === effect.id && (
-            <div className="absolute -top-1 -right-1 bg-icon-high border-helper-outline rounded-full p-0.5">
-              <Check size={12} className="text-elevation-surface font-bold" />
-            </div>
-          )}
-        </div>
-      ))}
+      <DynamicSelect
+        id="effects"
+        label="effectsLabel"
+        items={mappedEffects}
+        value={activeSettings?.effect_id.toString()}
+        onChange={(effect) =>
+          handleChange("effect_id", Number.parseInt(effect))
+        }
+        disabled={!activeSettings?.enabled}
+      />
     </div>
   );
 };

src/components/effect-customize.tsx

@@ -1,6 +1,7 @@
 import { env } from "@/config/env";
 import { useUserSettings } from "@/hooks/use-user-settings";
 import type UserStorageService from "@/services/user/user-storage-service";
+import { cn } from "@/utils/cn";
 import { t } from "@/utils/i18n";
 
 type ChatAppearanceProps = {
@@ -34,7 +35,12 @@ export default function ChatAppearance({
           alt="Occupation icon"
           className="rounded"
         />
-        <span className="font-bold text-gray text-xs">
+        <span
+          className={cn(
+            "font-bold text-gray text-xs",
+            activeSettings?.effect.class_name,
+          )}
+        >
           {userService.user.name}
         </span>
         <span className="font-medium text-text-low text-xs">

src/components/ui/chat-appearance.tsx

@@ -0,0 +1,55 @@
+import { t } from "@/utils/i18n";
+import { ChevronDown } from "lucide-react";
+import React, { useState, type MutableRefObject } from "react";
+
+type DynamicSelectProps = {
+  id: string;
+  label: string;
+  items: { name: string; apiValue: string }[];
+  value?: string;
+  disabled?: boolean;
+  onChange: (value: string) => void;
+  children?: React.ReactNode;
+};
+
+const DynamicSelect = React.forwardRef<HTMLSelectElement, DynamicSelectProps>(
+  ({ id, label, items, value, onChange, disabled, children }, ref) => {
+    return (
+      <div className="flex flex-col gap-3 w-full">
+        <div className="flex flex-row gap-x-5 items-center">
+          <label className="font-medium text-text-high" htmlFor={id}>
+            {t(label)}
+          </label>
+        </div>
+        <div className="relative">
+          <select
+            ref={ref as MutableRefObject<HTMLSelectElement>}
+            id={id}
+            onChange={(e) => onChange(e.target.value)}
+            value={value}
+            className="flex w-full items-center justify-between px-4 py-2 border border-helper-outline hover:border-icon-medium focus:border-primary-600 focus:outline-none font-medium bg-elevation-surface rounded-md appearance-none pr-10 disabled:cursor-not-allowed disabled:opacity-50"
+            disabled={disabled}
+          >
+            {items.map(({ name, apiValue }) => (
+              <option
+                key={name}
+                value={apiValue}
+                className="bg-helper-outline font-primary text-text-medium focus:border-primary-600"
+              >
+                {name}
+              </option>
+            ))}
+          </select>
+          <ChevronDown
+            size="16"
+            className="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none text-icon-medium"
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+DynamicSelect.displayName = "DynamicSelect";
+
+export default DynamicSelect;

src/components/ui/dynamic-select.tsx

@@ -9,10 +9,11 @@ type SelectFieldProps = {
   value?: string;
   disabled?: boolean;
   onChange: (value: string) => void;
+  children?: React.ReactNode;
 };
 
 const SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(
-  ({ id, label, items, value, onChange, disabled }, ref) => {
+  ({ id, label, items, value, onChange, disabled, children }, ref) => {
     return (
       <div className="flex flex-col gap-3 w-full">
         <div className="flex flex-row gap-x-5 items-center">