Merge pull request #79 from CanglongCl/fix-currency-scroll

feat: make currencies selection popover scrollable

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",

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 }

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>

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>