From 82d64489ce9780a9f9e78e0f48c04d9f5a5487f3 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 16 Jul 2026 21:03:41 -0700
Subject: [PATCH] wrap Autocomplete component

---
 .../tag-editor/components/song-edit-modal.tsx |  2 +-
 .../components/tag-editor-settings.tsx        |  2 +-
 .../autocomplete/autocomplete.module.css      | 49 +++++++++++++++++++
 .../components/autocomplete/autocomplete.tsx  | 46 +++++++++++++++++
 4 files changed, 97 insertions(+), 2 deletions(-)
 create mode 100644 src/shared/components/autocomplete/autocomplete.module.css
 create mode 100644 src/shared/components/autocomplete/autocomplete.tsx

diff --git a/src/renderer/features/tag-editor/components/song-edit-modal.tsx b/src/renderer/features/tag-editor/components/song-edit-modal.tsx
index f8aadec6d..055bc2d15 100644
--- a/src/renderer/features/tag-editor/components/song-edit-modal.tsx
+++ b/src/renderer/features/tag-editor/components/song-edit-modal.tsx
@@ -1,4 +1,3 @@
-import { Autocomplete } from '@mantine/core';
 import { closeAllModals } from '@mantine/modals';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,6 +11,7 @@ import { TagEditorSettings } from './tag-editor-settings';
 import { TagFieldRow } from './tag-field-row';
 
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Autocomplete } from '/@/shared/components/autocomplete/autocomplete';
 import { Button } from '/@/shared/components/button/button';
 import { Checkbox } from '/@/shared/components/checkbox/checkbox';
 import { Group } from '/@/shared/components/group/group';
diff --git a/src/renderer/features/tag-editor/components/tag-editor-settings.tsx b/src/renderer/features/tag-editor/components/tag-editor-settings.tsx
index 26534a099..b4ce3a2fe 100644
--- a/src/renderer/features/tag-editor/components/tag-editor-settings.tsx
+++ b/src/renderer/features/tag-editor/components/tag-editor-settings.tsx
@@ -1,4 +1,3 @@
-import { Autocomplete } from '@mantine/core';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RiAddLine, RiCloseLine } from 'react-icons/ri';
@@ -7,6 +6,7 @@ import { KNOWN_TAG_MAP, KNOWN_TAGS, resolveTagKey } from '../utils/known-tags';
 
 import { useSettingsStoreActions, useTagEditorSettings } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Autocomplete } from '/@/shared/components/autocomplete/autocomplete';
 import { Fieldset } from '/@/shared/components/fieldset/fieldset';
 import { Group } from '/@/shared/components/group/group';
 import { Stack } from '/@/shared/components/stack/stack';
diff --git a/src/shared/components/autocomplete/autocomplete.module.css b/src/shared/components/autocomplete/autocomplete.module.css
new file mode 100644
index 000000000..3a61a0c4d
--- /dev/null
+++ b/src/shared/components/autocomplete/autocomplete.module.css
@@ -0,0 +1,49 @@
+.root {
+    & [data-disabled='true'] {
+        opacity: 0.6;
+    }
+}
+
+.input {
+    width: 100%;
+    border: 1px solid transparent;
+
+    &[data-variant='default'] {
+        color: var(--theme-colors-surface-foreground);
+        background: var(--theme-colors-surface);
+    }
+
+    &[data-variant='filled'] {
+        color: var(--theme-colors-foreground);
+        background: var(--theme-colors-background);
+    }
+}
+
+.input:focus,
+.input:focus-visible {
+    border-color: lighten(var(--theme-colors-border), 10%);
+}
+
+.label {
+    margin-bottom: var(--theme-spacing-sm);
+}
+
+.section {
+    color: var(--theme-colors-foreground-muted);
+}
+
+.dropdown {
+    padding: var(--theme-spacing-xs);
+    color: var(--theme-colors-surface-foreground);
+    background: var(--theme-colors-surface);
+    border: 1px solid var(--theme-colors-border);
+}
+
+.option {
+    position: relative;
+    padding: var(--theme-spacing-sm) var(--theme-spacing-md);
+}
+
+.option:hover {
+    background: lighten(var(--theme-colors-surface), 5%);
+}
diff --git a/src/shared/components/autocomplete/autocomplete.tsx b/src/shared/components/autocomplete/autocomplete.tsx
new file mode 100644
index 000000000..9070c7d70
--- /dev/null
+++ b/src/shared/components/autocomplete/autocomplete.tsx
@@ -0,0 +1,46 @@
+import type { AutocompleteProps as MantineAutocompleteProps } from '@mantine/core';
+
+import { Autocomplete as MantineAutocomplete } from '@mantine/core';
+import { CSSProperties, forwardRef } from 'react';
+
+import styles from './autocomplete.module.css';
+
+export interface AutocompleteProps extends MantineAutocompleteProps {
+    maxWidth?: CSSProperties['maxWidth'];
+    width?: CSSProperties['width'];
+}
+
+export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
+    (
+        {
+            classNames,
+            maxWidth,
+            size = 'sm',
+            style,
+            variant = 'default',
+            width,
+            ...props
+        }: AutocompleteProps,
+        ref,
+    ) => {
+        return (
+            <MantineAutocomplete
+                classNames={{
+                    dropdown: styles.dropdown,
+                    input: styles.input,
+                    label: styles.label,
+                    option: styles.option,
+                    root: styles.root,
+                    section: styles.section,
+                    ...classNames,
+                }}
+                ref={ref}
+                size={size}
+                spellCheck={false}
+                style={{ maxWidth, width, ...style }}
+                variant={variant}
+                {...props}
+            />
+        );
+    },
+);