feat: storage and token limiting

components/forms/select-currency.tsx

@@ -17,7 +17,12 @@ export const FormSelectCurrency = ({
   hideIfEmpty?: boolean
 } & SelectProps) => {
   const items = useMemo(
-    () => currencies.map((currency) => ({ code: currency.code, name: `${currency.code} - ${currency.name}` })),
+    () =>
+      currencies.map((currency) => ({
+        code: currency.code,
+        name: `${currency.code}`,
+        badge: currency.name,
+      })),
     [currencies]
   )
   return (

components/forms/select-type.tsx

@@ -9,10 +9,10 @@ export const FormSelectType = ({
   ...props
 }: { title: string; emptyValue?: string; placeholder?: string; hideIfEmpty?: boolean } & SelectProps) => {
   const items = [
-    { code: "expense", name: "Expense" },
-    { code: "income", name: "Income" },
-    { code: "pending", name: "Pending" },
-    { code: "other", name: "Other" },
+    { code: "expense", name: "Expense", badge: "↓" },
+    { code: "income", name: "Income", badge: "↑" },
+    { code: "pending", name: "Pending", badge: "⏲︎" },
+    { code: "other", name: "Other", badge: "?" },
   ]
 
   return (

components/forms/simple.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Calendar } from "@/components/ui/calendar"
 import { Input } from "@/components/ui/input"
@@ -57,7 +58,7 @@ export const FormSelect = ({
   ...props
 }: {
   title: string
-  items: Array<{ code: string; name: string; color?: string }>
+  items: Array<{ code: string; name: string; color?: string; badge?: string }>
   emptyValue?: string
   placeholder?: string
   hideIfEmpty?: boolean
@@ -78,7 +79,10 @@ export const FormSelect = ({
           {items.map((item) => (
             <SelectItem key={item.code} value={item.code}>
               <div className="flex items-center gap-2 text-base pr-2">
-                {item.color && <div className="w-2 h-2 rounded-full" style={{ backgroundColor: item.color }} />}
+                {item.badge && <Badge className="px-2">{item.badge}</Badge>}
+                {!item.badge && item.color && (
+                  <div className="w-2 h-2 rounded-full" style={{ backgroundColor: item.color }} />
+                )}
                 {item.name}
               </div>
             </SelectItem>