feat(ui): add chevrons to dropdowns

Team-Falkor · Jan 5, 2025 · c526a8f · c526a8f
1 parent 1a06c2b
commit c526a8f
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 14 deletions.
diff --git a/src/components/buttonWithIcon.tsx b/src/components/buttonWithIcon.tsx
@@ -0,0 +1,51 @@
+import { cn } from "@/lib";
+import React, { ButtonHTMLAttributes, forwardRef } from "react";
+import { Button } from "./ui/button";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  startIcon?: React.ReactElement;
+  endIcon?: React.ReactElement;
+  divClassName?: string;
+}
+
+export const ButtonWithIcon = forwardRef<HTMLButtonElement, Props>(
+  (
+    { className, type, startIcon, endIcon, divClassName, children, ...props },
+    ref
+  ) => {
+    const StartIcon = startIcon;
+    const EndIcon = endIcon;
+
+    return (
+      <Button
+        className={cn(
+          "flex items-center relative overflow-hidden justify-center w-full px-4",
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {StartIcon && (
+          <div className="absolute left-1.5 top-1/2 transform -translate-y-1/2 text-muted-foreground">
+            {startIcon}
+          </div>
+        )}
+
+        <span
+          className={cn("truncate capitalize", {
+            "pl-6": startIcon,
+            "pr-6": endIcon,
+          })}
+        >
+          {children}
+        </span>
+
+        {EndIcon && (
+          <div className="absolute transform -translate-y-1/2 right-3 top-1/2 text-muted-foreground">
+            {endIcon}
+          </div>
+        )}
+      </Button>
+    );
+  }
+);
diff --git a/src/features/settings/components/tabs/accounts/addAccountButton.tsx b/src/features/settings/components/tabs/accounts/addAccountButton.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button";
+import { ButtonWithIcon } from "@/components/buttonWithIcon";
 import { Dialog } from "@/components/ui/dialog";
 import {
   DropdownMenu,
@@ -10,18 +10,32 @@ import {
 } from "@/components/ui/dropdown-menu";
 import RealDebridDialogContent from "@/features/realDebrid/components/realDebridDialogContent";
 import TorBoxDialogContent from "@/features/torBox/components/torBoxDialogContent";
+import { cn } from "@/lib";
 import { useAccountServices } from "@/stores/account-services";
+import { ChevronDown } from "lucide-react";
 import { useState } from "react";
 
 const AddAccountButton = () => {
   const [isRealDebridDialogOpen, setIsRealDebridDialogOpen] = useState(false);
   const [isTorBoxDialogOpen, setIsTorBoxDialogOpen] = useState(false);
+  const [open, setOpen] = useState(false);
   const { realDebrid, torBox } = useAccountServices();
 
   return (
-    <DropdownMenu>
+    <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger asChild>
-        <Button>Add Account</Button>
+        <ButtonWithIcon
+          endIcon={
+            <ChevronDown
+              className={cn("transition-all overflow-hidden truncate w-full", {
+                "rotate-180": open,
+                "rotate-0": !open,
+              })}
+            />
+          }
+        >
+          Add Account
+        </ButtonWithIcon>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start">
         <DropdownMenuLabel>Choose an account</DropdownMenuLabel>

diff --git a/src/features/settings/components/tabs/accounts/index.tsx b/src/features/settings/components/tabs/accounts/index.tsx
@@ -18,8 +18,10 @@ const AccountSettings = () => {
 
       <SettingsContainer>
         <SettingsSection>
-          <div className="flex gap-4">
-            <AddAccountButton />
+          <div className="flex gap-2">
+            <div className="w-2/12">
+              <AddAccountButton />
+            </div>
             <div className="flex items-center space-x-2">
               <Switch
                 id="use-accounts-for-downloads"

diff --git a/src/features/settings/components/tabs/general/settings/language.tsx b/src/features/settings/components/tabs/general/settings/language.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button";
+import { ButtonWithIcon } from "@/components/buttonWithIcon";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -9,11 +9,14 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { useLanguageContext } from "@/contexts/I18N";
 import { useSettings } from "@/hooks";
-import { useMemo } from "react";
+import { cn } from "@/lib";
+import { ChevronDown } from "lucide-react";
+import { useMemo, useState } from "react";
 
 const LanguageDropdown = () => {
   const { languages, i18n } = useLanguageContext();
   const { settings, updateSetting } = useSettings();
+  const [open, setOpen] = useState(false);
 
   const currentLanguage = useMemo(() => {
     return Object.entries(languages).find(([key, _value]) => {
@@ -23,12 +26,23 @@ const LanguageDropdown = () => {
   }, [languages, settings.language, i18n.language]);
 
   return (
-    <DropdownMenu>
+    <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger asChild>
-        <Button className="w-full">{currentLanguage?.[1].nativeName}</Button>
+        <ButtonWithIcon
+          endIcon={
+            <ChevronDown
+              className={cn("transition-all overflow-hidden truncate w-full", {
+                "rotate-180": open,
+                "rotate-0": !open,
+              })}
+            />
+          }
+        >
+          {currentLanguage?.[1].nativeName}
+        </ButtonWithIcon>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent className="w-64" align="start">
+      <DropdownMenuContent className="w-64" align="start" side="bottom">
         <DropdownMenuLabel>Choose Language</DropdownMenuLabel>
         <DropdownMenuSeparator />
         {Object.entries(languages).map(([key, value]) => (

diff --git a/src/features/settings/components/tabs/general/settings/title-bar.tsx b/src/features/settings/components/tabs/general/settings/title-bar.tsx
@@ -1,5 +1,5 @@
 import { SettingsTitleBarStyle } from "@/@types";
-import { Button } from "@/components/ui/button";
+import { ButtonWithIcon } from "@/components/buttonWithIcon";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,16 +10,31 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useSettings } from "@/hooks";
+import { cn } from "@/lib";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
 
 const TitleBarDropdown = () => {
   const { settings, updateSetting } = useSettings();
+  const [open, setOpen] = useState(false);
 
   return (
-    <DropdownMenu>
+    <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger asChild>
-        <Button className="w-full capitalize">{settings?.titleBarStyle}</Button>
+        <ButtonWithIcon
+          endIcon={
+            <ChevronDown
+              className={cn("transition-all overflow-hidden truncate w-full", {
+                "rotate-180": open,
+                "rotate-0": !open,
+              })}
+            />
+          }
+        >
+          {settings?.titleBarStyle}
+        </ButtonWithIcon>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-64">
+      <DropdownMenuContent className="w-64" side="bottom">
         <DropdownMenuLabel>Title Bar Style</DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuRadioGroup