refactor: move jam components to distinct dir

src/components/JamLanding.tsx

@@ -1,10 +1,10 @@
 import { InfoIcon, Loader2Icon, RefreshCwIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import { Jar } from '@/components/layout/Jar'
 import { useJamDisplayContext } from '@/components/layout/display-mode-context'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
+import { Jar } from '@/components/ui/jam/Jar'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import type { WalletFileName } from '@/lib/utils'
 import { walletDisplayName } from '@/lib/utils'

src/components/Navbar.tsx

@@ -9,7 +9,7 @@ import { routes } from '@/constants/routes'
 import { cn } from '@/lib/utils'
 import { authStore } from '@/store/authStore'
 import { jmSessionStore } from '@/store/jmSessionStore'
-import { DevBadge } from './ui/DevBadge'
+import { DevBadge } from './dev/DevBadge'
 import { Skeleton } from './ui/skeleton'
 
 interface NavbarProps {

src/components/Orderbook.tsx

@@ -14,10 +14,10 @@ import {
 import { ChevronDownIcon, ChevronUpIcon, RefreshCwIcon, ArrowUpDownIcon, PlusIcon, AlertCircleIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useStore } from 'zustand'
-import { Balance } from '@/components/ui/Balance'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { Balance } from '@/components/ui/jam/Balance'
 import { Pagination } from '@/components/ui/pagination'
 import { Switch } from '@/components/ui/switch'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
@@ -36,7 +36,7 @@ import {
 } from '@/lib/utils'
 import { jamSettingsStore } from '@/store/jamSettingsStore'
 import { jmSessionStore } from '@/store/jmSessionStore'
-import { DevBadge } from './ui/DevBadge'
+import { DevBadge } from './dev/DevBadge'
 import { Alert, AlertDescription } from './ui/alert'
 
 const ITEMS_PER_PAGE = 25

src/components/dev/DevBadge.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@/lib/utils'
-import { Badge } from './badge'
+import { Badge } from '../ui/badge'
 
 export const DevBadge = ({ className }: { className?: string }) => {
   return (

src/components/dev/FeeConfigTestComponent.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react'
 import { FeeLimitDialog } from '@/components/settings/FeeLimitDialog'
-import { FeeConfigErrorAlert } from '@/components/ui/FeeConfigErrorAlert'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { FeeConfigErrorAlert } from '@/components/ui/jam/FeeConfigErrorAlert'
 import type { WalletFileName } from '@/lib/utils'
 
 interface FeeConfigTestComponentProps {

src/components/earn/EarnPage.tsx

@@ -8,8 +8,8 @@ import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { useStore } from 'zustand'
 import { FeeLimitDialog } from '@/components/settings/FeeLimitDialog'
-import { FeeConfigErrorAlert } from '@/components/ui/FeeConfigErrorAlert'
 import { Button } from '@/components/ui/button'
+import { FeeConfigErrorAlert } from '@/components/ui/jam/FeeConfigErrorAlert'
 import { useApiClient } from '@/hooks/useApiClient'
 import { useFeeConfigValidation } from '@/hooks/useFeeConfigValidation'
 import { useRefreshSession } from '@/hooks/useRefreshSession'

src/components/layout/display-mode-context.ts

@@ -5,10 +5,14 @@ import type { AmountSats, Currency } from '@/types/global'
 
 export type JarColor = '#e2b86a' | '#3b5ba9' | '#c94f7c' | '#a67c52' | '#7c3fa6'
 
-export const jarTemplates: Array<{
+export type Jar = {
   name: string
   color: JarColor
-}> = [
+  balance: AmountSats
+  account: string
+}
+
+export const jarTemplates: Array<Pick<Jar, 'name' | 'color'>> = [
   { name: 'Apricot', color: '#e2b86a' },
   { name: 'Blueberry', color: '#3b5ba9' },
   { name: 'Cherry', color: '#c94f7c' },
@@ -16,11 +20,6 @@ export const jarTemplates: Array<{
   { name: 'Elderberry', color: '#7c3fa6' },
 ]
 
-export type Jar = Pick<(typeof jarTemplates)[number], 'name' | 'color'> & {
-  balance: AmountSats
-  account: string
-}
-
 export interface DisplayModeContextType {
   currency: Currency
   isPrivate: boolean

src/components/receive/Receive.tsx

@@ -8,9 +8,9 @@ import { useApiClient } from '@/hooks/useApiClient'
 import { btcToSats, cn, satsToBtc, type WalletFileName } from '@/lib/utils'
 import type { AmountSats, BitcoinAddress } from '@/types/global'
 import { useJamDisplayContext } from '../layout/display-mode-context'
-import { SelectableJar } from '../ui/SelectableJar'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../ui/accordion'
 import { Button } from '../ui/button'
+import { SelectableJar } from '../ui/jam/SelectableJar'
 import { Skeleton } from '../ui/skeleton'
 import { BitcoinAmountInput } from './BitcoinAmountInput'
 import { BitcoinQR } from './BitcoinQR'

src/components/send/SendPage.tsx

@@ -2,8 +2,8 @@ import { useState } from 'react'
 import { AlertTriangleIcon, Loader2Icon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { FeeLimitDialog } from '@/components/settings/FeeLimitDialog'
-import { FeeConfigErrorAlert } from '@/components/ui/FeeConfigErrorAlert'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { FeeConfigErrorAlert } from '@/components/ui/jam/FeeConfigErrorAlert'
 import { useFeeConfigValidation } from '@/hooks/useFeeConfigValidation'
 import type { WalletFileName } from '@/lib/utils'
 import { Alert, AlertDescription, AlertTitle } from '../ui/alert'

src/components/settings/FeeLimitDialog.tsx

@@ -22,7 +22,7 @@ import { useFeeConfigValidation } from '@/hooks/useFeeConfigValidation'
 import { factorToPercentage } from '@/lib/utils'
 import type { WalletFileName } from '@/lib/utils'
 import { jamSettingsStore } from '@/store/jamSettingsStore'
-import { DevBadge } from '../ui/DevBadge'
+import { DevBadge } from '../dev/DevBadge'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../ui/accordion'
 import { CollaboratorFeesForm, type CollaboratorFeesFormRef } from './CollaboratorFeesForm'
 import { MiningFeesForm, type MiningFeesFormRef } from './MiningFeesForm'

src/components/ui/jam/Jar.tsx

@@ -1,12 +1,14 @@
-import { JarIcon } from '../ui/JarIcon'
+import type { AmountSats } from '@/types/global'
+import type { JarColor } from '../../layout/display-mode-context'
+import { JarIcon } from './JarIcon'
 
 interface JarProps {
   name: string
-  amount: number
-  color: '#e2b86a' | '#3b5ba9' | '#c94f7c' | '#a67c52' | '#7c3fa6'
+  amount: AmountSats
+  color: JarColor
   formatAmount: (amount: number) => string
   currencySymbol: (size: 'sm' | 'lg') => React.ReactNode
-  totalBalance?: number
+  totalBalance?: AmountSats
 }
 
 export function Jar({ name, amount, color, currencySymbol, formatAmount, totalBalance = 0 }: JarProps) {

src/components/ui/jam/JarIcon.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode } from 'react'
 import { useState } from 'react'
 import { cn } from '@/lib/utils'
+import type { AmountSats } from '@/types/global'
 
 const calculateJarFillLevel = (jarBalance: number, totalBalance: number): JarFillLevel => {
   if (totalBalance === 0) return 0
@@ -27,13 +27,12 @@ const fillLevelToPercent = (fillLevel: JarFillLevel): number => {
 
 interface JarIconProps {
   color?: string
-  amount?: number
+  amount?: AmountSats
   totalBalance?: number
   width?: number
   height?: number
   isSelected?: boolean
   className?: string
-  children?: ReactNode
 }
 
 export function JarIcon({
@@ -59,8 +58,8 @@ export function JarIcon({
       onMouseLeave={() => setIsHovered(false)}
     >
       {/* Jar body */}
-      <div className={`absolute top-3 left-0 flex h-4/5 w-full items-end`}>
-        <div className="bg-opacity-60 flex h-full w-full items-end overflow-hidden rounded-t-[16px] rounded-b-[10px] border-2 border-gray-400 bg-white dark:bg-gray-300">
+      <div className="absolute top-3 left-0 flex h-4/5 w-full items-end">
+        <div className="bg-opacity-60 light:bg-white flex h-full w-full items-end overflow-hidden rounded-t-[16px] rounded-b-[10px] border-2 border-gray-400 bg-gray-300">
           {/* Fill */}
           <div
             className="w-full rounded-b-[8px] transition-all duration-500"
@@ -73,7 +72,7 @@ export function JarIcon({
         </div>
       </div>
       {/* Jar neck */}
-      <div className="absolute top-0 left-2 z-10 mt-2 h-2 w-8 border-2 border-y-0 border-gray-400 bg-white dark:bg-gray-300" />
+      <div className="light:bg-white absolute top-0 left-2 z-10 mt-2 h-2 w-8 border-2 border-y-0 border-gray-400 bg-gray-300" />
       {/* Jar lid */}
       <div
         className="absolute z-20 h-2 w-10 rounded-t-[8px] rounded-b-[8px] bg-gray-500 transition-transform duration-200 ease-in-out"

src/components/ui/jam/SelectableJar.tsx

@@ -1,5 +1,5 @@
 import type { AmountSats } from '@/types/global'
-import { CurrencySymbol } from '../CurrencySymbol'
+import { CurrencySymbol } from '../../CurrencySymbol'
 import { JarIcon } from './JarIcon'
 
 interface SelectableJarProps {

src/stories/Jar.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { CurrencySymbol } from '@/components/CurrencySymbol'
-import { Jar } from '@/components/layout/Jar'
+import { Jar } from '@/components/ui/jam/Jar'
 import type { Currency } from '@/types/global'
 
 const meta: Meta<typeof Jar> = {

src/stories/SelectableJar.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { SelectableJar } from '../components/ui/SelectableJar'
+import { SelectableJar } from '../components/ui/jam/SelectableJar'
 
 const meta = {
   title: 'Components/SelectableJar',