Add form-select.tsx with reset to default button used in settings

src/components/ui/form-select.tsx

@@ -0,0 +1,64 @@
+/**
+ * Custom Form Component: Select with Reset Button
+ *
+ * A select/combobox field with an optional reset to default button.
+ * Built on top of shadcn/ui Select component.
+ *
+ * @author Andreas Weyer
+ * @license MIT
+ */
+
+import * as React from "react"
+import { RotateCcw } from "lucide-react"
+import { IconButtonWithTooltip } from "./icon-button-with-tooltip"
+import { Select, SelectTrigger, SelectValue, SelectContent } from "./select"
+import { cn } from "../../lib/utils"
+import { useTranslation } from "react-i18next"
+
+interface FormSelectProps {
+  value: string
+  onValueChange: (value: string) => void
+  showResetButton?: boolean
+  defaultValue?: string
+  children: React.ReactNode
+  triggerClassName?: string
+  placeholder?: string
+}
+
+export const FormSelect: React.FC<FormSelectProps> = ({
+  value,
+  onValueChange,
+  showResetButton = false,
+  defaultValue,
+  children,
+  triggerClassName,
+  placeholder,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex items-center gap-0">
+      <Select value={value} onValueChange={onValueChange}>
+        <SelectTrigger className={cn(
+          showResetButton && "rounded-r-none border-r-0 z-10",
+          triggerClassName
+        )}>
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        {children}
+      </Select>
+      {showResetButton && (
+        <IconButtonWithTooltip
+          type="button"
+          icon={<RotateCcw className="h-4 w-4" />}
+          tooltip={t('buttonResetToDefault')}
+          variant="outline"
+          size="icon"
+          className="h-9 w-9 rounded-l-none border-l-0"
+          onClick={() => onValueChange(defaultValue || '')}
+          tabIndex={-1}
+        />
+      )}
+    </div>
+  )
+}