refactor(settings-button): update to use dropdown menu item instead of button

src/components/settings-button.tsx

@@ -1,41 +1,16 @@
 "use client";
 
-import {
+import { Settings } from "lucide-react";
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "./ui/tooltip";
-import { cn } from "@/lib/utils";
-import { SettingsIcon } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import { useSettingsStore } from "@/store/useSettingsStore";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 
-interface SettingsButtonProps {
+export function SettingsButton() {
-  className?: string;
-}
-
-export default function SettingsButton({
-  className,
-  ...props
-}: SettingsButtonProps) {
   const { setDialogOpen } = useSettingsStore();
 
   return (
-    <TooltipProvider delayDuration={0}>
+    <DropdownMenuItem onClick={() => setDialogOpen(true)}>
-      <Tooltip>
+      <Settings />
-        <TooltipTrigger asChild>
+      Settings
-          <Button
+    </DropdownMenuItem>
-            variant="ghost"
-            className={cn("h-8 w-auto p-2", className)}
-            onClick={() => setDialogOpen(true)}
-            {...props}
-          >
-            <SettingsIcon size={16} aria-hidden="true" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent className="px-2 py-1 text-xs">Settings</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
   );
 }