feat(ui): renk paleti, ikonlar, MoneyInput ve navigasyon

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/appearance/swatch.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+import type { IconKey, Swatch } from "@/shared/appearance";
+import { AppIcon } from "./app-icon";
+
+/** Renk anahtarını CSS değişkenine bağlar: --swatch-blue → --swatch (sınıflar bunu kullanır). */
+export const swatchStyle = (color: Swatch) =>
+  ({ "--swatch": `var(--swatch-${color})` }) as React.CSSProperties;
+
+/** Renkli yuvarlak ikon rozeti (kategori/hesap). */
+export function IconBadge({
+  icon,
+  color,
+  className,
+  size = "md",
+}: {
+  icon: IconKey;
+  color: Swatch;
+  className?: string;
+  size?: "sm" | "md";
+}) {
+  return (
+    <span
+      style={swatchStyle(color)}
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center rounded-full bg-(--swatch)/15 text-(--swatch)",
+        size === "sm" ? "size-7 [&_svg]:size-3.5" : "size-9 [&_svg]:size-4.5",
+        className,
+      )}
+    >
+      <AppIcon name={icon} />
+    </span>
+  );
+}