Refactor SwitchField to Toggle component

.github/workflows/release.yml

@@ -25,6 +25,7 @@ jobs:
       license: ${{ steps.get-package.outputs.license }}
       deb-pkg-name: ${{ steps.get-package.outputs.name }}_${{ steps.get-package.outputs.version }}_amd64.deb 
       deb-pkg-path: ./src-tauri/target/release/bundle/deb/
+      tag-exists: ${{ steps.get-package.outputs.tag_exists }}
     steps:
       - uses: actions/checkout@v3
       - name: setup node
@@ -37,12 +38,15 @@ jobs:
           echo "name=$(node -p "require('./package.json').name")" >> $GITHUB_OUTPUT
           echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
           echo "description=$(node -p "require('./package.json').description")" >> $GITHUB_OUTPUT
+
       # - uses: dev-drprasad/[email protected]
       #   with:
       #     tag_name: ${{ steps.get-package.outputs.version }}
       #     github_token: ${{ secrets.GITHUB_TOKEN }}
+
 
   build-tauri:
+    if: ${{ needs.setup.outputs.tag-exists }} == 'true'
     needs: [setup]
     permissions:
       contents: write
@@ -52,6 +56,7 @@ jobs:
         platform: [macos-latest, ubuntu-latest, windows-latest]
     runs-on: ${{ matrix.platform }}
     env:
+      TAG_EXISTS: ${{ needs.setup.outputs.tag-exists }}
       BIN_PATH: ${{ needs.setup.outputs.name-bin }}
       DESCRIPTION: ${{ needs.setup.outputs.description }}
       LICENSE: ${{ needs.setup.outputs.license }}
@@ -71,12 +76,22 @@ jobs:
         with:
           node-version: 20
 
+      - uses: mukunku/[email protected]
+        id: checkTag
+        with: 
+          tag: '${{ env.PACKAGE_VERSION }}'
+
+      - name: stop jobs if tag exist
+        if: steps.checkTag.outputs.exists == 'true'
+        run: exit 1
+
       - name: install rust stable
         uses: dtolnay/rust-toolchain@stable
 
       - name: install dependencies (ubuntu only)
         if: matrix.platform == 'ubuntu-latest'
         run: |
+          echo "${{ steps.checkTag.outputs.exists }}"
           sudo apt-get update
           wget http://nz2.archive.ubuntu.com/ubuntu/pool/main/o/openssl/libssl1.1_1.1.1f-1ubuntu2.20_amd64.deb
           sudo dpkg -i libssl1.1_1.1.1f-1ubuntu2.20_amd64.deb

package.json

@@ -22,15 +22,13 @@
     ]
   },
   "dependencies": {
-    "@kobalte/core": "^0.11.2",
     "@tauri-apps/api": "^1.5.1",
     "dayjs": "^1.11.10",
     "solid-icons": "^1.1.0",
     "solid-js": "^1.8.7",
     "tauri-plugin-autostart-api": "https://github.com/tauri-apps/tauri-plugin-autostart"
   },
   "devDependencies": {
-    "@kobalte/tailwindcss": "^0.9.0",
     "@tauri-apps/cli": "^1.5.7",
     "@types/node": "^20.10.4",
     "autoprefixer": "^10.4.16",

prettier.config.mjs

@@ -0,0 +1,9 @@
+// prettier.config.js
+export default {
+  trailingComma: "es5",
+  singleQuote: false,
+  printWidth: 120,
+  tabWidth: 2,
+  arrowParens: "always",
+  plugins: ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"],
+};

src/components/elements/Dropdown.tsx

@@ -1,5 +1,3 @@
-import { Combobox, createFilter } from "@kobalte/core";
-import { FiCheck } from "solid-icons/fi";
 import { VsArrowSwap } from "solid-icons/vs";
 import { Component, createSignal } from "solid-js";
 import { GlobalShortcutKeysType } from "../../utils/constants";
@@ -11,48 +9,26 @@ interface DropdownProps {
 }
 
 export const Dropdown: Component<DropdownProps> = (props) => {
-  const filter = createFilter({ sensitivity: "base" });
-  const [options, setOptions] = createSignal(props.items);
-
-  const onOpenChange = (isOpen: boolean, triggerMode?: Combobox.ComboboxTriggerMode) =>
-    isOpen && triggerMode === "manual" && setOptions(props.items);
-
-  const onInputChange = (value: string) => setOptions(props.items.filter((option) => filter.contains(option, value)));
+  const [selectRef, setSelectRef] = createSignal<HTMLSelectElement>();
 
   return (
-    <Combobox.Root
-      options={options()}
-      onInputChange={onInputChange}
-      onOpenChange={onOpenChange}
-      onChange={props.onChange}
-      defaultValue={props.value}
-      itemComponent={(p) => (
-        <Combobox.Item
-          item={p.item}
-          class={`${
-            p.item.rawValue === props.value ? "bg-indigo-600 text-white" : "text-white"
-          } flex cursor-pointer items-center justify-between px-2 hover:bg-indigo-600`}
-        >
-          <Combobox.ItemLabel>{p.item.rawValue}</Combobox.ItemLabel>
-          <Combobox.ItemIndicator>
-            <FiCheck />
-          </Combobox.ItemIndicator>
-        </Combobox.Item>
-      )}
+    <div
+      onClick={() => selectRef()?.dispatchEvent(new MouseEvent("mousedown"))}
+      class="group flex items-center rounded-md border border-gray-300 p-1 text-sm focus:outline-none focus:ring-0 dark:border-dark-light dark:bg-dark-light dark:text-white"
     >
-      <Combobox.Control class="rounded-md border border-gray-300 p-1 focus:outline-none dark:border-dark-light dark:bg-dark-light dark:text-white dark:focus:bg-dark-dark">
-        <Combobox.Trigger class="group flex items-center">
-          <Combobox.Input class="w-8 cursor-pointer bg-transparent text-center outline-none" />
-          <Combobox.Icon>
-            <VsArrowSwap class="rotate-90 group-hover:text-indigo-200" />
-          </Combobox.Icon>
-        </Combobox.Trigger>
-      </Combobox.Control>
-      <Combobox.Portal>
-        <Combobox.Content>
-          <Combobox.Listbox class="absolute -top-1.5 z-10 max-h-24 w-full overflow-auto rounded-md bg-dark-light text-sm shadow-lg" />
-        </Combobox.Content>
-      </Combobox.Portal>
-    </Combobox.Root>
+      <select
+        ref={setSelectRef}
+        value={props.value}
+        onChange={(e) => props.onChange(e.target.value)}
+        class="appearance-none bg-transparent text-sm focus:outline-none focus:ring-0"
+      >
+        {props.items.map((item) => (
+          <option value={item} selected={item === props.value} class="!text-red-500 dark:!text-red-600">
+            {item}
+          </option>
+        ))}
+      </select>
+      <VsArrowSwap class="rotate-90 group-hover:text-indigo-200" />
+    </div>
   );
 };

src/components/elements/Toggle.tsx

@@ -0,0 +1,34 @@
+import { FiCheck } from "solid-icons/fi";
+import { VsClose } from "solid-icons/vs";
+import { Component, Setter } from "solid-js";
+
+type SwitchProps = {
+  checked?: boolean;
+  onChange: (val: boolean) => Promise<void> | Setter<boolean> | undefined;
+};
+
+const Toggle: Component<SwitchProps> = (props) => {
+  return (
+    <div class="relative inline-flex cursor-pointer items-center">
+      <input
+        type="checkbox"
+        checked={props.checked}
+        onChange={() => props.onChange(!props.checked)}
+        class="peer sr-only"
+      />
+      <div
+        class={`peer relative h-4 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-transparent after:bg-white after:transition-all after:content-[''] peer-checked:bg-indigo-600 peer-checked:after:translate-x-[150%] peer-checked:after:border-transparent peer-focus:outline-none rtl:peer-checked:after:-translate-x-full dark:border-gray-600 ${
+          props.checked ? "dark:bg-gray-700" : "dark:bg-red-600"
+        } dark:bg-opacity-20 after:dark:bg-zinc-700`}
+      >
+        {props.checked ? (
+          <FiCheck class="absolute left-0 top-0 z-50 translate-x-[160%]" />
+        ) : (
+          <VsClose class="absolute left-0 top-0 z-50" />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Toggle;

src/components/pages/app/ViewMore.tsx

@@ -6,7 +6,7 @@ import SettingsStore from "../../../store/SettingsStore";
 
 import { ViewMoreName } from "../../../utils/constants";
 import { createAboutWindow, createSettingsWindow } from "../../../utils/helpers";
-import SwitchField from "../../elements/SwitchField";
+import Toggle from "../../elements/Toggle";
 
 interface ViewMoreProps {}
 
@@ -35,9 +35,7 @@ export const ViewMore: Component<ViewMoreProps> = ({}) => {
             </div>
             <p class="px-4 text-base font-semibold">{name}</p>
           </div>
-          {name === "Sync Clipboard History" && (
-            <SwitchField checked={settings()?.synchronize} onChange={async () => {}} />
-          )}
+          {name === "Sync Clipboard History" && <Toggle checked={settings()?.synchronize} onChange={async () => {}} />}
         </div>
         <hr class="border-zinc-700" />
       </button>

src/components/pages/settings/SettingsBackup.tsx

@@ -5,8 +5,8 @@ import { RiDeviceSave3Fill } from "solid-icons/ri";
 import { TbDatabaseStar } from "solid-icons/tb";
 import { Component, Show, createEffect, createSignal, on } from "solid-js";
 import SettingsStore from "../../../store/SettingsStore";
-import SwitchField from "../../elements/SwitchField";
 import { TextBlock } from "../../elements/TextBlock";
+import Toggle from "../../elements/Toggle";
 
 interface SettingsBackupProps {}
 
@@ -30,7 +30,7 @@ export const SettingsBackup: Component<SettingsBackupProps> = ({}) => {
             <h6 class="text-sm">Synchronize clipboard history</h6>
           </div>
           <div>
-            <SwitchField checked={settings()?.synchronize || false} onChange={() => syncClipboard()} />
+            <Toggle checked={settings()?.synchronize || false} onChange={() => syncClipboard()} />
           </div>
         </div>
       </TextBlock>

src/components/pages/settings/SettingsGeneral.tsx

@@ -6,8 +6,8 @@ import { VsRocket } from "solid-icons/vs";
 import { Component, Show } from "solid-js";
 import HotkeyStore from "../../../store/HotkeyStore";
 import SettingsStore from "../../../store/SettingsStore";
-import SwitchField from "../../elements/SwitchField";
 import { TextBlock } from "../../elements/TextBlock";
+import Toggle from "../../elements/Toggle";
 import { DarkMode } from "../../utils/DarkMode";
 import { Shortcut } from "../../utils/Shortcut";
 
@@ -34,7 +34,7 @@ export const SettingsGeneral: Component<SettingsGeneralProps> = ({}) => {
             <h6 class="text-sm">Start Clippy on system startup.</h6>
           </div>
           <div>
-            <SwitchField
+            <Toggle
               checked={settings()?.startup}
               onChange={async (check: boolean) => updateSettings({ ...settings()!, startup: check })}
             />
@@ -47,7 +47,7 @@ export const SettingsGeneral: Component<SettingsGeneralProps> = ({}) => {
             <h6 class="text-sm">Show desktop notifications.</h6>
           </div>
           <div>
-            <SwitchField
+            <Toggle
               checked={settings()?.notification}
               onChange={(check: boolean) => updateSettings({ ...settings()!, notification: check })}
             />

src/components/utils/DarkMode.tsx

@@ -1,7 +1,7 @@
 import { Component, createEffect } from "solid-js";
 import AppStore from "../../store/AppStore";
 import SettingsStore from "../../store/SettingsStore";
-import SwitchField from "../elements/SwitchField";
+import Toggle from "../elements/Toggle";
 
 interface DarkModeProps {}
 
@@ -12,7 +12,7 @@ export const DarkMode: Component<DarkModeProps> = ({}) => {
   createEffect(darkMode);
 
   return (
-    <SwitchField
+    <Toggle
       checked={settings()?.dark_mode}
       onChange={(dark_mode) =>
         updateSettings({

src/settings.tsx

@@ -21,7 +21,7 @@ const Settings = () => {
   return (
     <div class="absolute flex h-full w-full flex-col bg-white text-black dark:bg-dark dark:text-white">
       <Tabs />
-      <div class="p-5 dark:text-white">
+      <div class="px-5 pt-5 dark:text-white">
         <Show when={getCurrentTab()?.name === "General"}>
           <SettingsGeneral />
         </Show>

tailwind.config.js

@@ -16,11 +16,5 @@ export default {
       },
     },
   },
-  plugins: [
-    // default prefix is "ui"
-    require("@kobalte/tailwindcss"),
-
-    // or with a custom prefix:
-    require("@kobalte/tailwindcss")({ prefix: "kb" }),
-  ],
+  plugins: [],
 };

tsconfig.json

@@ -17,7 +17,7 @@
 
     /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },