Repository: MakePrisms/boardwalkcash
Pull request #383: Nits
Author: login: gudnuf
Created: 2025-05-20T01:40:33Z | Merged: 2025-05-22T05:33:34Z

Other than basic ui changes I added an `inline` variant to MoneyWithConvertedAmount to show in places like the account-selector



Diff:
diff --git a/app/components/numpad.tsx b/app/components/numpad.tsx
index 9f9e06220..8ed899e3f 100644
--- a/app/components/numpad.tsx
+++ b/app/components/numpad.tsx
@@ -1,6 +1,7 @@
 import { Delete } from 'lucide-react';
 import { useEffect } from 'react';
 import { getLocaleDecimalSeparator } from '~/lib/locale';
+import { Button } from './ui/button';
 
 const buttons = [
   '1',
@@ -27,14 +28,13 @@ type NumpadButtonProps = React.ComponentProps<'button'>;
 
 const NumpadButton = ({ onClick, children, ...props }: NumpadButtonProps) => {
   return (
-    <button
-      type="button"
+    <Button
       onClick={onClick}
-      className="flex w-full cursor-pointer items-center justify-center rounded-lg border border-gray-200 bg-gray-100 px-6 py-2 font-semibold text-2xl text-gray-800 transition-all active:scale-95 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
+      className="flex h-full w-full cursor-pointer items-center justify-center px-6 text-xl transition-all active:scale-95"
       {...props}
     >
       {children}
-    </button>
+    </Button>
   );
 };
 
diff --git a/app/components/ui/card.tsx b/app/components/ui/card.tsx
index 09404f9cb..9cb39262e 100644
--- a/app/components/ui/card.tsx
+++ b/app/components/ui/card.tsx
@@ -23,7 +23,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    className={cn('flex flex-col space-y-1.5 p-6 pb-0', className)}
     {...props}
   />
 ));
@@ -60,7 +60,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  <div ref={ref} className={cn('p-6', className)} {...props} />
 ));
 CardContent.displayName = 'CardContent';
 
diff --git a/app/components/ui/drawer.tsx b/app/components/ui/drawer.tsx
index 761aa299a..39c9a85bf 100644
--- a/app/components/ui/drawer.tsx
+++ b/app/components/ui/drawer.tsx
@@ -41,7 +41,7 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        'fixed inset-x-0 bottom-0 z-50 mt-24 mb-14 flex h-auto flex-col rounded-t-[10px] border bg-background',
         className,
       )}
       {...props}
diff --git a/app/components/ui/toast.tsx b/app/components/ui/toast.tsx
index cdeadc8d1..a4b6d3c4d 100644
--- a/app/components/ui/toast.tsx
+++ b/app/components/ui/toast.tsx
@@ -23,7 +23,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',
+  'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-top-full data-[state=open]:slide-in-from-bottom-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-y-0 data-[swipe=end]:translate-y-[var(--radix-toast-swipe-end-y)] data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-y)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',
   {
     variants: {
       variant: {
@@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50',
+      'absolute top-2 right-2 rounded-md p-1 text-foreground/50 transition-opacity hover:text-foreground focus:outline-none focus:ring-2 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50',
       className,
     )}
     toast-close=""
diff --git a/app/components/ui/toaster.tsx b/app/components/ui/toaster.tsx
index 634c6f433..b3b681137 100644
--- a/app/components/ui/toaster.tsx
+++ b/app/components/ui/toaster.tsx
@@ -12,7 +12,7 @@ export function Toaster() {
   const { toasts } = useToast();
 
   return (
-    <ToastProvider>
+    <ToastProvider swipeDirection="up">
       {toasts.map(({ id, title, description, action, ...props }) => (
         <Toast key={id} {...props}>
           <div className="grid gap-1">
diff --git a/app/features/accounts/account-hooks.ts b/app/features/accounts/account-hooks.ts
index fd1cda34b..17f678b66 100644
--- a/app/features/accounts/account-hooks.ts
+++ b/app/features/accounts/account-hooks.ts
@@ -291,10 +291,12 @@ export function useAccounts<T extends AccountType = AccountType>(select?: {
     queryFn: () => accountRepository.getAll(user.id),
     staleTime: Number.POSITIVE_INFINITY,
     select: (data) => {
-      const extendedData = data.map((x) => ({
-        ...x,
-        isDefault: isDefaultAccount(user, x),
-      }));
+      const extendedData = data
+        .map((x) => ({
+          ...x,
+          isDefault: isDefaultAccount(user, x),
+        }))
+        .sort((_, b) => (b.isDefault ? 1 : -1)); // Sort the default account to the top
 
       if (!select) {
         return extendedData as ExtendedAccount<T>[];
diff --git a/app/features/accounts/account-selector.tsx b/app/features/accounts/account-selector.tsx
index f355f8422..b20825cec 100644
--- a/app/features/accounts/account-selector.tsx
+++ b/app/features/accounts/account-selector.tsx
@@ -8,7 +8,7 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from '~/components/ui/drawer';
-import { getDefaultUnit } from '../shared/currencies';
+import { MoneyWithConvertedAmount } from '../shared/money-with-converted-amount';
 import { type Account, getAccountBalance } from './account';
 import { AccountTypeIcon } from './account-icons';
 
@@ -19,15 +19,14 @@ export type AccountWithBadges<T extends Account = Account> = T & {
 
 function AccountItem({ account }: { account: AccountWithBadges }) {
   const balance = getAccountBalance(account);
+
   return (
     <div className="flex w-full items-center gap-4 px-3 py-4">
       <AccountTypeIcon type={account.type} />
       <div className="flex w-full flex-col justify-between gap-2 text-start">
         <span className="font-medium">{account.name}</span>
         <div className="flex items-center justify-between text-xs">
-          <span className="text-muted-foreground">
-            {balance.toLocaleString({ unit: getDefaultUnit(account.currency) })}
-          </span>
+          <MoneyWithConvertedAmount money={balance} variant="inline" />
           {account.badges && (
             <div className="flex gap-2">
               {account.badges.map((badge) => (
diff --git a/app/features/accounts/default-currency-switcher.tsx b/app/features/accounts/default-currency-switcher.tsx
index 6985f960c..d0271b15f 100644
--- a/app/features/accounts/default-currency-switcher.tsx
+++ b/app/features/accounts/default-currency-switcher.tsx
@@ -9,10 +9,9 @@ import {
 } from '~/components/ui/drawer';
 import { RadioGroup, RadioGroupItem } from '~/components/ui/radio-group';
 import { Separator } from '~/components/ui/separator';
-import { Skeleton } from '~/components/ui/skeleton';
-import { useExchangeRate } from '~/hooks/use-exchange-rate';
 import { useToast } from '~/hooks/use-toast';
 import type { Currency } from '~/lib/money/types';
+import { MoneyWithConvertedAmount } from '../shared/money-with-converted-amount';
 import { useSetDefaultCurrency, useUser } from '../user/user-hooks';
 import { useBalance } from './account-hooks';
 
@@ -40,14 +39,7 @@ type CurrencyOptionProps = {
 
 function CurrencyOption({ data, isSelected, onSelect }: CurrencyOptionProps) {
   const { label, currency } = data;
-  const otherCurrency = currency === 'BTC' ? 'USD' : 'BTC';
   const balance = useBalance(currency);
-  const { data: rate, isLoading: isRateLoading } = useExchangeRate(
-    `${currency}-${otherCurrency}`,
-  );
-  // we only show conversion for BTC to USD
-  const convertedBalance =
-    currency === 'BTC' && rate ? balance.convert('USD', rate) : undefined;
 
   return (
     <button
@@ -57,20 +49,7 @@ function CurrencyOption({ data, isSelected, onSelect }: CurrencyOptionProps) {
     >
       <div className="flex flex-col items-start gap-1">
         <span>{label}</span>
-        {balance && (
-          <span className="text-muted-foreground text-sm">
-            {balance.toLocaleString({
-              unit: currency === 'BTC' ? 'sat' : 'usd',
-            })}
-            {currency === 'BTC' &&
-              (isRateLoading ? (
-                <Skeleton className="h-4 w-4" />
-              ) : (
-                convertedBalance &&
-                ` (~${convertedBalance.toLocaleString({ unit: 'usd' })})`
-              ))}
-          </span>
-        )}
+        <MoneyWithConvertedAmount money={balance} variant="inline" />
       </div>
       <RadioGroup value={isSelected ? currency : undefined}>
         <RadioGroupItem value={currency} />
diff --git a/app/features/settings/accounts/$account_id.tsx b/app/features/settings/accounts/$account_id.tsx
index aa53a2757..fe97f769d 100644
--- a/app/features/settings/accounts/$account_id.tsx
+++ b/app/features/settings/accounts/$account_id.tsx
@@ -1,15 +1,33 @@
 import { PageContent } from '~/components/page';
+import { Badge } from '~/components/ui/badge';
 import { Button } from '~/components/ui/button';
-import type {
-  Account,
-  ExtendedCashuAccount,
+import {
+  type Account,
+  type ExtendedCashuAccount,
+  getAccountBalance,
 } from '~/features/accounts/account';
 import { useAccount } from '~/features/accounts/account-hooks';
 import { SettingsViewHeader } from '~/features/settings/ui/settings-view-header';
+import { MoneyWithConvertedAmount } from '~/features/shared/money-with-converted-amount';
 import { useSetDefaultAccount } from '~/features/user/user-hooks';
 import { useToast } from '~/hooks/use-toast';
 import { Money } from '~/lib/money';
 
+function AccountDetailItem({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center justify-between">
+      <Badge variant="secondary" className="text-sm">
+        {label}
+      </Badge>
+      <div className="flex items-center">
+        <Badge variant="outline" className="text-muted-foreground">
+          {value}
+        </Badge>
+      </div>
+    </div>
+  );
+}
+
 function CashuAccount({ account }: { account: ExtendedCashuAccount }) {
   const { toast } = useToast();
   const setDefaultAccount = useSetDefaultAccount();
@@ -27,21 +45,35 @@ function CashuAccount({ account }: { account: ExtendedCashuAccount }) {
   };
 
   return (
-    <div>
-      <p>Account type: {account.type}</p>
-      <p>Currency: {account.currency}</p>
-      <p>Mint URL: {account.mintUrl}</p>
-      <p>
-        {/* TODO: see about balance */}
-        Balance:{' '}
-        {new Money({ amount: 0, currency: account.currency }).toLocaleString()}
-      </p>
-      {account.isDefault ? (
-        <p>Default account</p>
-      ) : (
-        <Button onClick={makeDefault}>Make default</Button>
+    <>
+      <div className="flex w-full flex-col gap-20 pt-4">
+        <div className="flex flex-col gap-20">
+          <h1 className="text-center text-2xl">{account.name}</h1>
+          <MoneyWithConvertedAmount money={getAccountBalance(account)} />
+        </div>
+
+        <div className="w-full space-y-8 sm:max-w-sm">
+          {account.isDefault && <Badge>Default</Badge>}
+          {[
+            { label: 'Type', value: account.type },
+            {
+              label: 'Mint',
+              value: account.mintUrl
+                .replace('https://', '')
+                .replace('http://', ''),
+            },
+          ].map((detail) => (
+            <AccountDetailItem key={detail.label} {...detail} />
+          ))}
+        </div>
+      </div>
+
+      {!account.isDefault && (
+        <div className="fixed right-0 bottom-16 left-0 flex justify-center">
+          <Button onClick={makeDefault}>Make default</Button>
+        </div>
       )}
-    </div>
+    </>
   );
 }
 
@@ -67,7 +99,6 @@ export default function SingleAccount({ accountId }: { accountId: string }) {
   return (
     <>
       <SettingsViewHeader
-        title={account.name}
         navBack={{
           to: '/settings/accounts',
           transition: 'slideRight',
diff --git a/app/features/settings/accounts/add-mint-form.tsx b/app/features/settings/accounts/add-mint-form.tsx
index 8cd2e36c3..25d4ecee1 100644
--- a/app/features/settings/accounts/add-mint-form.tsx
+++ b/app/features/settings/accounts/add-mint-form.tsx
@@ -403,7 +403,7 @@ export function AddMintForm() {
         </p>
       </div>
 
-      <Button type="submit" disabled={isSubmitting} className="self-end">
+      <Button type="submit" className="self-end" loading={isSubmitting}>
         Add
       </Button>
     </form>
diff --git a/app/features/settings/accounts/all-accounts.tsx b/app/features/settings/accounts/all-accounts.tsx
index 68174eb71..7cda79639 100644
--- a/app/features/settings/accounts/all-accounts.tsx
+++ b/app/features/settings/accounts/all-accounts.tsx
@@ -1,6 +1,6 @@
 import { Plus } from 'lucide-react';
-import { MoneyDisplay } from '~/components/money-display';
 import { PageContent } from '~/components/page';
+import { Badge } from '~/components/ui/badge';
 import { Button } from '~/components/ui/button';
 import { Card } from '~/components/ui/card';
 import { ScrollArea } from '~/components/ui/scroll-area';
@@ -8,14 +8,13 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs';
 import { getAccountBalance } from '~/features/accounts/account';
 import { useAccounts } from '~/features/accounts/account-hooks';
 import { SettingsViewHeader } from '~/features/settings/ui/settings-view-header';
-import { getDefaultUnit } from '~/features/shared/currencies';
+import { MoneyWithConvertedAmount } from '~/features/shared/money-with-converted-amount';
 import { useUser } from '~/features/user/user-hooks';
 import type { Currency } from '~/lib/money';
 import { LinkWithViewTransition } from '~/lib/transitions';
 
 function CurrencyAccounts({ currency }: { currency: Currency }) {
   const { data: accounts } = useAccounts({ currency });
-  const unit = getDefaultUnit(currency);
 
   return (
     <div className="space-y-3">
@@ -27,13 +26,19 @@ function CurrencyAccounts({ currency }: { currency: Currency }) {
           applyTo="newView"
           className="block"
         >
-          <Card className="flex items-center justify-between p-2 px-4 transition-colors hover:bg-muted/50">
-            <h3 className="font-medium">{account.name}</h3>
-            <MoneyDisplay
-              money={getAccountBalance(account)}
-              unit={unit}
-              variant="secondary"
-            />
+          <Card className="flex flex-col p-2 px-4 transition-colors hover:bg-muted/50">
+            <div className="flex items-center justify-between">
+              <h3>{account.name}</h3>
+              <MoneyWithConvertedAmount
+                money={getAccountBalance(account)}
+                variant="inline"
+              />
+            </div>
+            {account.isDefault && (
+              <div className="mt-1">
+                <Badge>Default</Badge>
+              </div>
+            )}
           </Card>
         </LinkWithViewTransition>
       ))}
diff --git a/app/features/settings/profile/editable-username.tsx b/app/features/settings/profile/editable-username.tsx
index c365f31ad..13ea22434 100644
--- a/app/features/settings/profile/editable-username.tsx
+++ b/app/features/settings/profile/editable-username.tsx
@@ -38,6 +38,7 @@ export default function EditableUsername() {
     handleSubmit,
     watch,
     formState: { errors },
+    setValue,
   } = useForm<FormValues>({
     defaultValues: {
       username: user.username,
@@ -85,6 +86,11 @@ export default function EditableUsername() {
                 // biome-ignore lint/a11y/noAutofocus: the rule is for accessibility reasons, but for this case it makes sense to autofocus so that the user is editing as soon as they click the edit button
                 autoFocus
                 spellCheck="false"
+                autoCapitalize="none"
+                onChange={(e) => {
+                  const lowercaseValue = e.target.value.toLowerCase();
+                  setValue('username', lowercaseValue);
+                }}
               />
             </div>
             <button type="submit">
diff --git a/app/features/settings/settings.tsx b/app/features/settings/settings.tsx
index d324249e9..bad1df18c 100644
--- a/app/features/settings/settings.tsx
+++ b/app/features/settings/settings.tsx
@@ -1,10 +1,5 @@
 import { Edit, QrCode, Share } from 'lucide-react';
-import {
-  ClosePageButton,
-  PageContent,
-  PageFooter,
-  PageHeader,
-} from '~/components/page';
+import { ClosePageButton, PageContent, PageHeader } from '~/components/page';
 import { Button } from '~/components/ui/button';
 import { Separator } from '~/components/ui/separator';
 import { SettingsNavButton } from '~/features/settings/ui/settings-nav-button';
@@ -69,12 +64,6 @@ export default function Settings() {
 
         <Button onClick={signOut}>Sign Out</Button>
       </PageContent>
-
-      <PageFooter>
-        <div className="text-sidebar-foreground/70 text-xs">
-          Insert terms and conditions here
-        </div>
-      </PageFooter>
     </>
   );
 }
diff --git a/app/features/settings/ui/settings-view-header.tsx b/app/features/settings/ui/settings-view-header.tsx
index 5e4ebee7e..f5255acd7 100644
--- a/app/features/settings/ui/settings-view-header.tsx
+++ b/app/features/settings/ui/settings-view-header.tsx
@@ -10,14 +10,14 @@ export const SettingsViewHeader = ({
   navBack,
   children,
 }: {
-  title: string;
+  title?: string;
   navBack: PageBackButtonProps;
   children?: React.ReactNode;
 }) => {
   return (
     <PageHeader>
       <PageBackButton {...navBack} />
-      <PageHeaderTitle>{title}</PageHeaderTitle>
+      {title && <PageHeaderTitle>{title}</PageHeaderTitle>}
       {children}
     </PageHeader>
   );
diff --git a/app/features/shared/money-with-converted-amount.tsx b/app/features/shared/money-with-converted-amount.tsx
index 9ce5de5d2..d4ec68f40 100644
--- a/app/features/shared/money-with-converted-amount.tsx
+++ b/app/features/shared/money-with-converted-amount.tsx
@@ -4,7 +4,13 @@ import { useExchangeRate } from '~/hooks/use-exchange-rate';
 import type { Money } from '~/lib/money';
 import { getDefaultUnit } from './currencies';
 
-export const MoneyWithConvertedAmount = ({ money }: { money: Money }) => {
+export const MoneyWithConvertedAmount = ({
+  money,
+  variant = 'default',
+}: {
+  money: Money;
+  variant?: 'default' | 'inline';
+}) => {
   const defaultFiatCurrency = 'USD';
   const convertedCurrency =
     money.currency === 'BTC' ? defaultFiatCurrency : 'BTC';
@@ -13,24 +19,44 @@ export const MoneyWithConvertedAmount = ({ money }: { money: Money }) => {
     error: exchangeRateError,
     isLoading: exchangeRateLoading,
   } = useExchangeRate(`${money.currency}-${convertedCurrency}`);
+
   const shouldShowConvertedAmount =
     money.currency === 'BTC' || money.currency !== defaultFiatCurrency;
 
-  return (
+  const unit = getDefaultUnit(money.currency);
+  const convertedUnit = getDefaultUnit(convertedCurrency);
+
+  return variant === 'default' ? (
     <div className="flex min-h-[116px] flex-col items-center">
-      <MoneyDisplay money={money} unit={getDefaultUnit(money.currency)} />
+      <MoneyDisplay money={money} unit={unit} />
       {shouldShowConvertedAmount && (
         <>
           {exchangeRateLoading && <Skeleton className="h-6 w-32" />}
           {!exchangeRateError && rate && (
             <MoneyDisplay
               money={money.convert(convertedCurrency, rate)}
-              unit={getDefaultUnit(convertedCurrency)}
+              unit={convertedUnit}
               variant="secondary"
             />
           )}
         </>
       )}
     </div>
+  ) : (
+    <span className="text-muted-foreground text-sm">
+      {money.toLocaleString({ unit })}
+      {shouldShowConvertedAmount && (
+        <>
+          {exchangeRateLoading && (
+            <Skeleton className="ml-1 inline-block h-4 w-10" />
+          )}
+          {!exchangeRateError &&
+            rate &&
+            ` (~${money.convert(convertedCurrency, rate).toLocaleString({
+              unit: getDefaultUnit(convertedCurrency),
+            })})`}
+        </>
+      )}
+    </span>
   );
 };
diff --git a/app/features/theme/theme-provider.tsx b/app/features/theme/theme-provider.tsx
index 3a93f39d8..28c62a462 100644
--- a/app/features/theme/theme-provider.tsx
+++ b/app/features/theme/theme-provider.tsx
@@ -93,7 +93,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   });
 
   const effectiveColorMode =
-    colorMode === 'system' ? (systemColorMode ? 'dark' : 'light') : colorMode;
+    colorMode === 'system' ? systemColorMode : colorMode;
 
   // Save cookies on first load if they don't exist
   useEffect(() => {
diff --git a/app/root.tsx b/app/root.tsx
index 367611a5c..1fa6c43e5 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -85,7 +85,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
     </ThemeProvider>
   );
 }
-
 function LayoutContent({ children }: { children: React.ReactNode }) {
   const { themeClassName, theme, effectiveColorMode } = useTheme();
 
@@ -101,7 +100,8 @@ function LayoutContent({ children }: { children: React.ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body>
+      {/* overflow-hidden prevents rubberbanding on scroll */}
+      <body className="overflow-hidden">
         {children}
         <ScrollRestoration />
         <Scripts />
diff --git a/app/routes/_protected._index.tsx b/app/routes/_protected._index.tsx
index d90c798d7..0388c4291 100644
--- a/app/routes/_protected._index.tsx
+++ b/app/routes/_protected._index.tsx
@@ -76,7 +76,7 @@ export default function Index() {
             money={defaultCurrency === 'BTC' ? balanceBTC : balanceUSD}
           />
           <div className="my-1 h-0.5 w-16 rounded-full bg-muted" />
-          <Price />
+          {defaultCurrency === 'BTC' && <Price />}
         </div>
 
         <DefaultCurrencySwitcher />


Reviews:
user: login: jbojcic1
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-21T08:45:09Z
user: login: gudnuf
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T17:18:30Z
user: login: gudnuf
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T20:08:58Z
user: login: jbojcic1
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-21T20:29:46Z
user: login: jbojcic1
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-21T20:32:43Z
user: login: jbojcic1
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-21T20:33:42Z
user: login: jbojcic1
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-21T20:36:40Z
user: login: jbojcic1
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-21T20:42:26Z
user: login: gudnuf
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T20:50:55Z
user: login: jbojcic1
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-21T20:56:06Z
user: login: jbojcic1
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-21T20:58:41Z
user: login: jbojcic1
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-21T20:59:12Z
user: login: jbojcic1
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-21T20:59:47Z
user: login: jbojcic1
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-21T21:01:05Z
user: login: gudnuf
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T21:02:18Z
user: login: jbojcic1
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-21T21:03:10Z
user: login: gudnuf
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T21:04:33Z
user: login: jbojcic1
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-21T21:08:20Z
user: login: gudnuf
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T21:10:27Z
user: login: jbojcic1
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-21T21:12:08Z
user: login: gudnuf
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T21:15:48Z
user: login: jbojcic1
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-21T21:27:03Z
user: login: gudnuf
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T21:37:28Z
user: login: jbojcic1
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-21T21:47:58Z

Review comments:
path: app/components/ui/card.tsx
user: login: jbojcic1
body: did we not change this already somewhere?
created_at: 2025-05-21T08:32:25Z
author_association: COLLABORATOR
diff_hunk: @@ -41,7 +41,7 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        'fixed inset-x-0 bottom-0 z-50 mt-24 mb-14 flex h-auto flex-col rounded-t-[10px] border bg-background',
path: app/components/ui/drawer.tsx
user: login: jbojcic1
body: why this change?
created_at: 2025-05-21T08:32:39Z
author_association: COLLABORATOR
diff_hunk: @@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50',
path: app/components/ui/toast.tsx
user: login: jbojcic1
body: what happened here?
created_at: 2025-05-21T08:33:01Z
author_association: COLLABORATOR
diff_hunk: @@ -25,16 +26,14 @@ const isValidButton = (button: string): button is NumpadButton => {
 
 type NumpadButtonProps = React.ComponentProps<'button'>;
 
-const NumpadButton = ({ onClick, children, ...props }: NumpadButtonProps) => {
+const NumpadButton = ({ onClick, children }: NumpadButtonProps) => {
path: app/components/numpad.tsx
user: login: jbojcic1
body: what happened here with styles and why did you remove button props?
created_at: 2025-05-21T08:33:32Z
author_association: COLLABORATOR
diff_hunk: @@ -27,21 +54,35 @@ function CashuAccount({ account }: { account: ExtendedCashuAccount }) {
   };
 
   return (
-    <div>
-      <p>Account type: {account.type}</p>
-      <p>Currency: {account.currency}</p>
-      <p>Mint URL: {account.mintUrl}</p>
-      <p>
-        {/* TODO: see about balance */}
-        Balance:{' '}
-        {new Money({ amount: 0, currency: account.currency }).toLocaleString()}
-      </p>
-      {account.isDefault ? (
-        <p>Default account</p>
-      ) : (
-        <Button onClick={makeDefault}>Make default</Button>
+    <>
+      <div className="flex flex-col gap-6 p-6">
+        <MoneyWithConvertedAmount money={getAccountBalance(account)} />
+
+        <div className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 w-full space-y-4 p-6">
+          <div className="flex w-full justify-end">
+            {account.isDefault && <Badge variant="outline">Default</Badge>}
+          </div>
+          {[
+            { label: 'Type', values: [account.type] },
+            { label: 'Currency', values: [account.currency] },
+            {
+              label: 'Mint',
+              values: [
path: app/features/settings/accounts/$account_id.tsx
user: login: jbojcic1
body: why is values array if it always has one value?
created_at: 2025-05-21T08:36:10Z
author_association: COLLABORATOR
diff_hunk: @@ -27,12 +26,19 @@ function CurrencyAccounts({ currency }: { currency: Currency }) {
           applyTo="newView"
           className="block"
         >
-          <Card className="flex items-center justify-between p-2 px-4 transition-colors hover:bg-muted/50">
-            <h3 className="font-medium">{account.name}</h3>
-            <MoneyDisplay
+          <Card className="flex items-center justify-between p-2 px-4 pr-8 transition-colors hover:bg-muted/50">
+            {account.isDefault && (
+              <RadioGroup
path: app/features/settings/accounts/all-accounts.tsx
user: login: jbojcic1
body: why is this a radio if there is only one item and no selection at all?
created_at: 2025-05-21T08:37:32Z
author_association: COLLABORATOR
diff_hunk: @@ -32,5 +38,18 @@ export const MoneyWithConvertedAmount = ({ money }: { money: Money }) => {
         </>
       )}
     </div>
+  ) : (
path: app/features/shared/money-with-converted-amount.tsx
user: login: jbojcic1
body: I would make this a different component maybe as ui is different and the logic as well. e.g. inline is not using `shouldShowConvertedAmount` nor checking if there is exchange rate error
created_at: 2025-05-21T08:44:05Z
author_association: COLLABORATOR
diff_hunk: @@ -93,7 +93,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   });
 
   const effectiveColorMode =
-    colorMode === 'system' ? (systemColorMode ? 'dark' : 'light') : colorMode;
+    colorMode === 'system' ? systemColorMode : colorMode;
path: app/features/theme/theme-provider.tsx
user: login: jbojcic1
body: what does this change do?
created_at: 2025-05-21T08:44:34Z
author_association: COLLABORATOR
diff_hunk: @@ -101,7 +100,7 @@ function LayoutContent({ children }: { children: React.ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body>
+      <body className="overflow-hidden">
path: app/root.tsx
user: login: jbojcic1
body: what is this for?
created_at: 2025-05-21T08:44:45Z
author_association: COLLABORATOR
diff_hunk: @@ -76,7 +76,7 @@ export default function Index() {
             money={defaultCurrency === 'BTC' ? balanceBTC : balanceUSD}
           />
           <div className="my-1 h-0.5 w-16 rounded-full bg-muted" />
-          <Price />
+          {defaultCurrency === 'BTC' && <Price />}
path: app/routes/_protected._index.tsx
user: login: jbojcic1
body: why not show the price all the time?
created_at: 2025-05-21T08:45:04Z
author_association: COLLABORATOR
diff_hunk: @@ -25,16 +26,14 @@ const isValidButton = (button: string): button is NumpadButton => {
 
 type NumpadButtonProps = React.ComponentProps<'button'>;
 
-const NumpadButton = ({ onClick, children, ...props }: NumpadButtonProps) => {
+const NumpadButton = ({ onClick, children }: NumpadButtonProps) => {
path: app/components/numpad.tsx
user: login: gudnuf
body: I changed it so that it would use our Button component so that we get same button colors as default in our app., so then I could remove some unnecessary tailwind. 

Then I got rid of button props because I thought we weren't using them for some reason, but I was wrong I added them back
created_at: 2025-05-21T16:56:21Z
author_association: CONTRIBUTOR
path: app/components/ui/card.tsx
user: login: gudnuf
body: we did somewhere, but it hadn't made it yet and my cards were looking weird in the account items
created_at: 2025-05-21T16:57:48Z
author_association: CONTRIBUTOR
diff_hunk: @@ -41,7 +41,7 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        'fixed inset-x-0 bottom-0 z-50 mt-24 mb-14 flex h-auto flex-col rounded-t-[10px] border bg-background',
path: app/components/ui/drawer.tsx
user: login: gudnuf
body: Because without it the drawer content shows up too low on mobile
created_at: 2025-05-21T16:58:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50',
path: app/components/ui/toast.tsx
user: login: gudnuf
body: makes it so that the "x" is always visible on the toast
created_at: 2025-05-21T16:59:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -27,21 +54,35 @@ function CashuAccount({ account }: { account: ExtendedCashuAccount }) {
   };
 
   return (
-    <div>
-      <p>Account type: {account.type}</p>
-      <p>Currency: {account.currency}</p>
-      <p>Mint URL: {account.mintUrl}</p>
-      <p>
-        {/* TODO: see about balance */}
-        Balance:{' '}
-        {new Money({ amount: 0, currency: account.currency }).toLocaleString()}
-      </p>
-      {account.isDefault ? (
-        <p>Default account</p>
-      ) : (
-        <Button onClick={makeDefault}>Make default</Button>
+    <>
+      <div className="flex flex-col gap-6 p-6">
+        <MoneyWithConvertedAmount money={getAccountBalance(account)} />
+
+        <div className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 w-full space-y-4 p-6">
+          <div className="flex w-full justify-end">
+            {account.isDefault && <Badge variant="outline">Default</Badge>}
+          </div>
+          {[
+            { label: 'Type', values: [account.type] },
+            { label: 'Currency', values: [account.currency] },
+            {
+              label: 'Mint',
+              values: [
path: app/features/settings/accounts/$account_id.tsx
user: login: gudnuf
body: originally I had the default badge in with type, but I moved that elsewhere, so now I made it so its just `value` as a string
created_at: 2025-05-21T17:01:57Z
author_association: CONTRIBUTOR
diff_hunk: @@ -27,12 +26,19 @@ function CurrencyAccounts({ currency }: { currency: Currency }) {
           applyTo="newView"
           className="block"
         >
-          <Card className="flex items-center justify-between p-2 px-4 transition-colors hover:bg-muted/50">
-            <h3 className="font-medium">{account.name}</h3>
-            <MoneyDisplay
+          <Card className="flex items-center justify-between p-2 px-4 pr-8 transition-colors hover:bg-muted/50">
+            {account.isDefault && (
+              <RadioGroup
path: app/features/settings/accounts/all-accounts.tsx
user: login: gudnuf
body: I was just trying to use the same style/component as we have in the default-currency-switcher, should I just copy the RadioGroupItem styles for when selected instead of using Radio here?
created_at: 2025-05-21T17:03:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -32,5 +38,18 @@ export const MoneyWithConvertedAmount = ({ money }: { money: Money }) => {
         </>
       )}
     </div>
+  ) : (
path: app/features/shared/money-with-converted-amount.tsx
user: login: gudnuf
body: Oh I just updated so that the logic is the same. They were effectivley doing the same thing. Do you think they should still be different components?
created_at: 2025-05-21T17:16:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -101,7 +100,7 @@ function LayoutContent({ children }: { children: React.ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body>
+      <body className="overflow-hidden">
path: app/root.tsx
user: login: gudnuf
body: makes it so the body is not scrollable
created_at: 2025-05-21T17:16:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -93,7 +93,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   });
 
   const effectiveColorMode =
-    colorMode === 'system' ? (systemColorMode ? 'dark' : 'light') : colorMode;
+    colorMode === 'system' ? systemColorMode : colorMode;
path: app/features/theme/theme-provider.tsx
user: login: gudnuf
body: uses the system color mode as the color mode. This was a bug where when in system mode it was always dark
created_at: 2025-05-21T17:17:33Z
author_association: CONTRIBUTOR
diff_hunk: @@ -76,7 +76,7 @@ export default function Index() {
             money={defaultCurrency === 'BTC' ? balanceBTC : balanceUSD}
           />
           <div className="my-1 h-0.5 w-16 rounded-full bg-muted" />
-          <Price />
+          {defaultCurrency === 'BTC' && <Price />}
path: app/routes/_protected._index.tsx
user: login: gudnuf
body: Because God said so? The idea is user shouldn't see or think about bitcoin unless in bitcoin mode
created_at: 2025-05-21T17:18:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -23,7 +23,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',
+  'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-top-full data-[state=open]:slide-in-from-bottom-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-y-0 data-[swipe=end]:translate-y-[var(--radix-toast-swipe-end-y)] data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-y)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',
path: app/components/ui/toast.tsx
user: login: gudnuf
body: makes it so the animation goes up when dismissing the toast
created_at: 2025-05-21T20:08:58Z
author_association: CONTRIBUTOR
diff_hunk: @@ -101,7 +100,7 @@ function LayoutContent({ children }: { children: React.ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body>
+      <body className="overflow-hidden">
path: app/root.tsx
user: login: jbojcic1
body: so what happens when content can't fit in the viewport now?
created_at: 2025-05-21T20:29:46Z
author_association: COLLABORATOR
diff_hunk: @@ -41,7 +41,7 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        'fixed inset-x-0 bottom-0 z-50 mt-24 mb-14 flex h-auto flex-col rounded-t-[10px] border bg-background',
path: app/components/ui/drawer.tsx
user: login: jbojcic1
body: can you paste some screenshot? I want to be careful with changing these reusable components because what might seem like good solution for one place might be problem for another
created_at: 2025-05-21T20:32:43Z
author_association: COLLABORATOR
diff_hunk: @@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50',
path: app/components/ui/toast.tsx
user: login: jbojcic1
body: how come it is not visible by default? sounds odd that shadcn would have such a bug. or maybe we were doing something wrong?
created_at: 2025-05-21T20:33:42Z
author_association: COLLABORATOR
diff_hunk: @@ -23,7 +23,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',
+  'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-top-full data-[state=open]:slide-in-from-bottom-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-y-0 data-[swipe=end]:translate-y-[var(--radix-toast-swipe-end-y)] data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-y)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',
path: app/components/ui/toast.tsx
user: login: jbojcic1
body: shouldn't swipe direction for dismissing be configurable via props https://www.radix-ui.com/primitives/docs/components/toast#api-reference 
created_at: 2025-05-21T20:36:39Z
author_association: COLLABORATOR
diff_hunk: @@ -27,12 +26,19 @@ function CurrencyAccounts({ currency }: { currency: Currency }) {
           applyTo="newView"
           className="block"
         >
-          <Card className="flex items-center justify-between p-2 px-4 transition-colors hover:bg-muted/50">
-            <h3 className="font-medium">{account.name}</h3>
-            <MoneyDisplay
+          <Card className="flex items-center justify-between p-2 px-4 pr-8 transition-colors hover:bg-muted/50">
+            {account.isDefault && (
+              <RadioGroup
path: app/features/settings/accounts/all-accounts.tsx
user: login: jbojcic1
body: I see. Tbh I am not sure the radio makes it clear that this account is default:

![Screenshot 2025-05-21 at 22 41 26](https://github.com/user-attachments/assets/2b1f8c32-8804-497e-8f92-f0f57e9b49dc)

I would maybe try something else.

Also I added more accounts in this preview deploy but they are not showing up at all in the list anymore. I don't know if that bug was introduced in this pr or somewhere else
created_at: 2025-05-21T20:42:26Z
author_association: COLLABORATOR
diff_hunk: @@ -23,7 +23,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',
+  'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-top-full data-[state=open]:slide-in-from-bottom-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-y-0 data-[swipe=end]:translate-y-[var(--radix-toast-swipe-end-y)] data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-y)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',
path: app/components/ui/toast.tsx
user: login: gudnuf
body: Yea and that is the change that I made in toaster.tsx. The thing that this does is the animation. So when I try just changing the toaster's swipe driection then you have to swip up to dismiss, but the toast still goes to the right. 
created_at: 2025-05-21T20:45:31Z
author_association: CONTRIBUTOR
diff_hunk: @@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50',
path: app/components/ui/toast.tsx
user: login: gudnuf
body: well Idk if its a bug or just a design choice. Notice this is defining styles for the close button and the original styles read: "Make the close but opacity 0 (invisible) until hovered or focused then make opacity 100"
created_at: 2025-05-21T20:47:04Z
author_association: CONTRIBUTOR
diff_hunk: @@ -101,7 +100,7 @@ function LayoutContent({ children }: { children: React.ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body>
+      <body className="overflow-hidden">
path: app/root.tsx
user: login: gudnuf
body: Now the default will be that any content that doesn't fit is just hidden. But we should have that be the case because we want all content to fit inside the viewport, then if we have any containers that need to overflow we can make them scrollable
created_at: 2025-05-21T20:48:39Z
author_association: CONTRIBUTOR
diff_hunk: @@ -27,12 +26,19 @@ function CurrencyAccounts({ currency }: { currency: Currency }) {
           applyTo="newView"
           className="block"
         >
-          <Card className="flex items-center justify-between p-2 px-4 transition-colors hover:bg-muted/50">
-            <h3 className="font-medium">{account.name}</h3>
-            <MoneyDisplay
+          <Card className="flex items-center justify-between p-2 px-4 pr-8 transition-colors hover:bg-muted/50">
+            {account.isDefault && (
+              <RadioGroup
path: app/features/settings/accounts/all-accounts.tsx
user: login: gudnuf
body: > Also I added more accounts in this preview deploy but they are not showing up at all in the list anymore. I don't know if that bug was introduced in this pr or somewhere else

What if you refresh? I noticed that a couple times. Not sure what happened though because this list is read directly from use-accounts

> I would maybe try something else.

okay yea that radio is hard to see
created_at: 2025-05-21T20:49:33Z
author_association: CONTRIBUTOR
diff_hunk: @@ -32,5 +38,18 @@ export const MoneyWithConvertedAmount = ({ money }: { money: Money }) => {
         </>
       )}
     </div>
+  ) : (
path: app/features/shared/money-with-converted-amount.tsx
user: login: jbojcic1
body: it can stay I guess
created_at: 2025-05-21T20:56:06Z
author_association: COLLABORATOR
diff_hunk: @@ -27,12 +26,19 @@ function CurrencyAccounts({ currency }: { currency: Currency }) {
           applyTo="newView"
           className="block"
         >
-          <Card className="flex items-center justify-between p-2 px-4 transition-colors hover:bg-muted/50">
-            <h3 className="font-medium">{account.name}</h3>
-            <MoneyDisplay
+          <Card className="flex items-center justify-between p-2 px-4 pr-8 transition-colors hover:bg-muted/50">
+            {account.isDefault && (
+              <RadioGroup
path: app/features/settings/accounts/all-accounts.tsx
user: login: jbojcic1
body: refresh worked. this used to work so if it wasn't broken here some other recent pr must have done it (maybe the one that changed the ui)

maybe some bade that marks the default would be more clear
created_at: 2025-05-21T20:58:41Z
author_association: COLLABORATOR
diff_hunk: @@ -27,12 +26,19 @@ function CurrencyAccounts({ currency }: { currency: Currency }) {
           applyTo="newView"
           className="block"
         >
-          <Card className="flex items-center justify-between p-2 px-4 transition-colors hover:bg-muted/50">
-            <h3 className="font-medium">{account.name}</h3>
-            <MoneyDisplay
+          <Card className="flex items-center justify-between p-2 px-4 pr-8 transition-colors hover:bg-muted/50">
+            {account.isDefault && (
+              <RadioGroup
path: app/features/settings/accounts/all-accounts.tsx
user: login: jbojcic1
body: refresh worked. this used to work so if it wasn't broken here some other recent pr must have done it (maybe the one that changed the ui)

maybe some bade that marks the default would be more clear
created_at: 2025-05-21T20:59:12Z
author_association: COLLABORATOR
diff_hunk: @@ -101,7 +100,7 @@ function LayoutContent({ children }: { children: React.ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body>
+      <body className="overflow-hidden">
path: app/root.tsx
user: login: jbojcic1
body: I wonder how that affects history page for example?

why not just leave the body scrollable if the content is bigger? should it not still all fit on the screen without the scroll if we don't have too much content on the page?
created_at: 2025-05-21T20:59:47Z
author_association: COLLABORATOR
diff_hunk: @@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50',
path: app/components/ui/toast.tsx
user: login: jbojcic1
body: ah yes this is their design choice. i see it on their demos as well
created_at: 2025-05-21T21:01:05Z
author_association: COLLABORATOR
diff_hunk: @@ -41,7 +41,7 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        'fixed inset-x-0 bottom-0 z-50 mt-24 mb-14 flex h-auto flex-col rounded-t-[10px] border bg-background',
path: app/components/ui/drawer.tsx
user: login: gudnuf
body: Mostly a problem on pwa, but doesn't negativley affect anything else imo

## On master without this change:

<img width="997" alt="image" src="https://github.com/user-attachments/assets/12dd7f9a-a6bf-4862-80b8-2f7cc07c38cf" />
<img width="376" alt="image" src="https://github.com/user-attachments/assets/8dfa927f-8842-4ebc-a7e0-b4ee0f1f262c" />
<img width="449" alt="image" src="https://github.com/user-attachments/assets/66d4de34-9e23-4939-9326-cc655cef3661" />
<img width="449" alt="image" src="https://github.com/user-attachments/assets/123334fc-5845-46e6-9e58-ebb853492407" />



## With these changes:


<img width="449" alt="image" src="https://github.com/user-attachments/assets/e7bec98c-76fd-40f9-8457-d998c0064c60" />
<img width="449" alt="image" src="https://github.com/user-attachments/assets/dc3319ab-6adf-4b9e-a914-bd3b741d233c" />
<img width="373" alt="image" src="https://github.com/user-attachments/assets/8900e11d-7fdc-498b-a9f9-418fc8ed9216" />
<img width="986" alt="image" src="https://github.com/user-attachments/assets/bae5834e-f167-4e00-a76f-d5489cd0b97f" />

created_at: 2025-05-21T21:02:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50',
path: app/components/ui/toast.tsx
user: login: jbojcic1
body: btw should we maybe completely hide that x on the mobile devices?

that might be the reason they show it on hover only becuase hover is not possible on mobile and x is not needed there
created_at: 2025-05-21T21:03:10Z
author_association: COLLABORATOR
diff_hunk: @@ -101,7 +100,7 @@ function LayoutContent({ children }: { children: React.ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body>
+      <body className="overflow-hidden">
path: app/root.tsx
user: login: gudnuf
body: This is the problem I'm solving, and apparently according to bob the same thing happens on Android but you can scroll left/right instead of up/down

https://github.com/user-attachments/assets/0491625f-238c-43b8-aebc-c4eed3b645e8

> I wonder how that affects history page for example?

History page would have its own container within this body that is scrollable


This is what happens when I make the body no longer scrollable:


https://github.com/user-attachments/assets/1557a99b-36ea-4a52-9729-f1fdce118904



created_at: 2025-05-21T21:04:33Z
author_association: CONTRIBUTOR
diff_hunk: @@ -101,7 +100,7 @@ function LayoutContent({ children }: { children: React.ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body>
+      <body className="overflow-hidden">
path: app/root.tsx
user: login: jbojcic1
body: why is it scrollable in the first place? what makes it to be scrollable? maybe margins between account selector and keyboard are too big?
created_at: 2025-05-21T21:08:20Z
author_association: COLLABORATOR
diff_hunk: @@ -27,12 +26,19 @@ function CurrencyAccounts({ currency }: { currency: Currency }) {
           applyTo="newView"
           className="block"
         >
-          <Card className="flex items-center justify-between p-2 px-4 transition-colors hover:bg-muted/50">
-            <h3 className="font-medium">{account.name}</h3>
-            <MoneyDisplay
+          <Card className="flex items-center justify-between p-2 px-4 pr-8 transition-colors hover:bg-muted/50">
+            {account.isDefault && (
+              <RadioGroup
path: app/features/settings/accounts/all-accounts.tsx
user: login: gudnuf
body: > maybe some bade that marks the default would be more clear

What is bade?

> f it wasn't broken here some other recent pr must have done it (maybe the one that changed the ui)

I think this is all that changed the UI, but I don't see any breaking changes in this PR. I will look into it
created_at: 2025-05-21T21:10:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -27,12 +26,19 @@ function CurrencyAccounts({ currency }: { currency: Currency }) {
           applyTo="newView"
           className="block"
         >
-          <Card className="flex items-center justify-between p-2 px-4 transition-colors hover:bg-muted/50">
-            <h3 className="font-medium">{account.name}</h3>
-            <MoneyDisplay
+          <Card className="flex items-center justify-between p-2 px-4 pr-8 transition-colors hover:bg-muted/50">
+            {account.isDefault && (
+              <RadioGroup
path: app/features/settings/accounts/all-accounts.tsx
user: login: jbojcic1
body: > What is bade?

typo. should have been badge

created_at: 2025-05-21T21:12:08Z
author_association: COLLABORATOR
diff_hunk: @@ -101,7 +100,7 @@ function LayoutContent({ children }: { children: React.ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body>
+      <body className="overflow-hidden">
path: app/root.tsx
user: login: gudnuf
body: No this was just one example, that's just default behavior is to make the body slightly scrollable as far as I can tell. Happens everywhere in the app. Even V0 of boardwalk has the scrollable body (see message in discord).

Anything that's not a fixed position wil be scrollable like this
created_at: 2025-05-21T21:15:48Z
author_association: CONTRIBUTOR
diff_hunk: @@ -41,7 +41,7 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        'fixed inset-x-0 bottom-0 z-50 mt-24 mb-14 flex h-auto flex-col rounded-t-[10px] border bg-background',
path: app/components/ui/drawer.tsx
user: login: jbojcic1
body: it seems maybe like too much on some now
created_at: 2025-05-21T21:27:03Z
author_association: COLLABORATOR
diff_hunk: @@ -41,7 +41,7 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        'fixed inset-x-0 bottom-0 z-50 mt-24 mb-14 flex h-auto flex-col rounded-t-[10px] border bg-background',
path: app/components/ui/drawer.tsx
user: login: gudnuf
body: Yea, Bob and I thought it was fine. We would then need to detect if we are pwa and only increase margin for that
created_at: 2025-05-21T21:37:28Z
author_association: CONTRIBUTOR

PR comments:
user: login: vercel[bot]
created_at: 2025-05-20T01:40:37Z
body: [vc]: #diC6L88Lfq4ivYLCuh1N30LehH3Ygv8UUW0B3zYepVQ=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJib2FyZHdhbGsiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoiYm9hcmR3YWxrLWdpdC1uaXRzLW1ha2VwcmlzbXMudmVyY2VsLmFwcCJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbWFrZXByaXNtcy9ib2FyZHdhbGsvQzlpNjUxand1RUQ3N1lQa1QydnliWVNTWHh0dCIsInByZXZpZXdVcmwiOiJib2FyZHdhbGstZ2l0LW5pdHMtbWFrZXByaXNtcy52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIiwicm9vdERpcmVjdG9yeSI6bnVsbH1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **boardwalk** | ✅ Ready ([Inspect](https://vercel.com/makeprisms/boardwalk/C9i651jwuED77YPkT2vybYSSXxtt)) | [Visit Preview](https://boardwalk-git-nits-makeprisms.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/boardwalk-git-nits-makeprisms.vercel.app?via=pr-comment-feedback-link) | May 22, 2025 5:25am |


author_association: NONE
user: login: supabase[bot]
created_at: 2025-05-20T01:40:44Z
body: [supa]:updndnbhghekyvlhqazn
**Updates to [Preview Branch (nits) ↗︎](https://supabase.com/dashboard/project/updndnbhghekyvlhqazn)**

| Deployments | Status                      | Updated                   |
| ----------- | --------------------------- | ------------------------- |
| Database    | ✅ | Thu, 22 May 2025 05:25:57 UTC |
| Services    | ✅  | Thu, 22 May 2025 05:25:57 UTC  |
| APIs        | ✅      | Thu, 22 May 2025 05:25:57 UTC      |

Tasks are run on every commit but only new migration files are pushed.
Close and reopen this PR if you want to apply changes from existing seed or migration files.

| Tasks          | Status                       | Updated                    |
| -------------- | ---------------------------- | -------------------------- |
| Configurations | ✅ | Thu, 22 May 2025 05:25:57 UTC |
| Migrations     | ✅ | Thu, 22 May 2025 05:25:57 UTC |
| Seeding        | ✅   | Thu, 22 May 2025 05:25:57 UTC   |
| Edge Functions | ✅  | Thu, 22 May 2025 05:25:57 UTC  |

<hr/>




View logs for this [Workflow Run ↗︎](https://supabase.com/dashboard/project/updndnbhghekyvlhqazn/branches).
Learn more about [Supabase for Git ↗︎](https://supabase.com/docs/guides/platform/branching).

author_association: NONE
user: login: gudnuf
created_at: 2025-05-21T17:43:01Z
body: @jbojcic1 how do you want me to do PRs like this in the future? It didn't seem worth opening individual prs for things like "Move drawer content up", but I can if that's better
author_association: CONTRIBUTOR
user: login: jbojcic1
created_at: 2025-05-21T20:29:04Z
body: > @jbojcic1 how do you want me to do PRs like this in the future? It didn't seem worth opening individual prs for things like "Move drawer content up", but I can if that's better

one pr is fine but some explanation or screenshots of changes would help to understand the context
author_association: COLLABORATOR