From 890ff7e7030b679ef4fa4d73bdb6fe7fe9f4ffa3 Mon Sep 17 00:00:00 2001
From: Lava <34743145+CanglongCl@users.noreply.github.com>
Date: Sun, 8 Sep 2024 23:43:10 -0700
Subject: [PATCH] feat: make currencies selection popover scrollable

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 31 +++++++++++++
 src/components/ui/scroll-area.tsx             | 46 +++++++++++++++++++
 .../accounts/components/account-form.tsx      | 41 +++++++++--------
 src/pages/settings/general/general-form.tsx   | 41 +++++++++--------
 5 files changed, 122 insertions(+), 38 deletions(-)
 create mode 100644 src/components/ui/scroll-area.tsx

diff --git a/package.json b/package.json
index d56d881..c83831f 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4931cd1..9856c85 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ dependencies:
   '@radix-ui/react-radio-group':
     specifier: ^1.2.0
     version: 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+  '@radix-ui/react-scroll-area':
+    specifier: ^1.1.0
+    version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
   '@radix-ui/react-select':
     specifier: ^2.1.1
     version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
@@ -1451,6 +1454,34 @@ packages:
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
+  /@radix-ui/react-scroll-area@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-9ArIZ9HWhsrfqS765h+GZuLoxaRHD/j0ZWOWilsCvYTpYJp8XwCqNG7Dt9Nu/TItKOdgLGkOPCodQvDc+UMwYg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@types/react': 18.3.4
+      '@types/react-dom': 18.3.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@radix-ui/react-select@2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-8iRDfyLtzxlprOo9IicnzvpsO1wNCkuwzzCM+Z5Rb5tNOpCdMvcc2AkzX0Fz+Tz9v6NJ5B/7EEgyZveo4FBRfQ==}
     peerDependencies:
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..cf253cf
--- /dev/null
+++ b/src/components/ui/scroll-area.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/src/pages/settings/accounts/components/account-form.tsx b/src/pages/settings/accounts/components/account-form.tsx
index ba7c174..d17b5d8 100644
--- a/src/pages/settings/accounts/components/account-form.tsx
+++ b/src/pages/settings/accounts/components/account-form.tsx
@@ -50,6 +50,7 @@ const accountTypes = [
 import { worldCurrencies } from '@/lib/currencies';
 import { newAccountSchema } from '@/lib/schemas';
 import { createAccount, updateAccount } from '@/commands/account';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 type NewAccount = z.infer<typeof newAccountSchema>;
 
@@ -119,7 +120,7 @@ export function AccountForm({ defaultValues, onSuccess = () => {} }: AccountForm
           </DialogDescription>
         </DialogHeader>
 
-        <div className="grid gap-10 p-4 ">
+        <div className="grid gap-10 p-4">
           {/* add input hidden for id */}
           <input type="hidden" name="id" />
 
@@ -181,7 +182,7 @@ export function AccountForm({ defaultValues, onSuccess = () => {} }: AccountForm
               render={({ field }) => (
                 <FormItem className="flex flex-col">
                   <FormLabel>Currency</FormLabel>
-                  <Popover>
+                  <Popover modal={true}>
                     <PopoverTrigger asChild>
                       <FormControl>
                         <Button
@@ -202,23 +203,25 @@ export function AccountForm({ defaultValues, onSuccess = () => {} }: AccountForm
                         <CommandInput placeholder="Search currency..." />
                         <CommandEmpty>No currency found.</CommandEmpty>
                         <CommandGroup>
-                          {worldCurrencies.map((currency) => (
-                            <CommandItem
-                              value={currency.label}
-                              key={currency.value}
-                              onSelect={() => {
-                                form.setValue(field.name, currency.value);
-                              }}
-                            >
-                              <Icons.Check
-                                className={cn(
-                                  'mr-2 h-4 w-4',
-                                  currency.value === field.value ? 'opacity-100' : 'opacity-0',
-                                )}
-                              />
-                              {currency.label}
-                            </CommandItem>
-                          ))}
+                          <ScrollArea className="max-h-96 overflow-y-auto">
+                            {worldCurrencies.map((currency) => (
+                              <CommandItem
+                                value={currency.label}
+                                key={currency.value}
+                                onSelect={() => {
+                                  form.setValue(field.name, currency.value);
+                                }}
+                              >
+                                <Icons.Check
+                                  className={cn(
+                                    'mr-2 h-4 w-4',
+                                    currency.value === field.value ? 'opacity-100' : 'opacity-0',
+                                  )}
+                                />
+                                {currency.label}
+                              </CommandItem>
+                            ))}
+                          </ScrollArea>
                         </CommandGroup>
                       </Command>
                     </PopoverContent>
diff --git a/src/pages/settings/general/general-form.tsx b/src/pages/settings/general/general-form.tsx
index f786ef3..0615671 100644
--- a/src/pages/settings/general/general-form.tsx
+++ b/src/pages/settings/general/general-form.tsx
@@ -25,6 +25,7 @@ import {
   CommandItem,
 } from '@/components/ui/command';
 import { useSettingsContext } from '@/lib/settings-provider';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 const appearanceFormSchema = z.object({
   baseCurrency: z.string({ required_error: 'Please select a base currency.' }),
@@ -61,9 +62,9 @@ export function GeneralSettingForm() {
           render={({ field }) => (
             <FormItem className="flex flex-col">
               <FormLabel>Currency</FormLabel>
-              <Popover>
+              <Popover modal={true}>
                 <PopoverTrigger asChild>
-                  <FormControl className="w-[300px] ">
+                  <FormControl className="w-[300px]">
                     <Button
                       variant="outline"
                       role="combobox"
@@ -81,23 +82,25 @@ export function GeneralSettingForm() {
                     <CommandInput placeholder="Search currency..." />
                     <CommandEmpty>No currency found.</CommandEmpty>
                     <CommandGroup>
-                      {worldCurrencies.map((currency) => (
-                        <CommandItem
-                          value={currency.label}
-                          key={currency.value}
-                          onSelect={() => {
-                            form.setValue(field.name, currency.value);
-                          }}
-                        >
-                          <Icons.Check
-                            className={cn(
-                              'mr-2 h-4 w-4',
-                              currency.value === field.value ? 'opacity-100' : 'opacity-0',
-                            )}
-                          />
-                          {currency.label}
-                        </CommandItem>
-                      ))}
+                      <ScrollArea className="max-h-96 overflow-y-auto">
+                        {worldCurrencies.map((currency) => (
+                          <CommandItem
+                            value={currency.label}
+                            key={currency.value}
+                            onSelect={() => {
+                              form.setValue(field.name, currency.value);
+                            }}
+                          >
+                            <Icons.Check
+                              className={cn(
+                                'mr-2 h-4 w-4',
+                                currency.value === field.value ? 'opacity-100' : 'opacity-0',
+                              )}
+                            />
+                            {currency.label}
+                          </CommandItem>
+                        ))}
+                      </ScrollArea>
                     </CommandGroup>
                   </Command>
                 </PopoverContent>