feat(ui): animate navigation and operation icons

src/entities/bank-card/model/operation-appearance.ts

@@ -1,17 +1,20 @@
 import type { BankOperation } from "../api/queries";
 
-type OperationIcon = { path: string; color: string };
+type OperationIcon = { path: string; color: string; animation?: string };
 
 const categoryIcons: Record<string, OperationIcon> = {
 	алкоголь: {
-		path: "M7 3h10v5a5 5 0 0 1-10 0V3Z M7 7h10 M12 13v8 M8 21h8",
+		animation: "wine",
+		path: "M7 3h10v5a5 5 0 0 1-10 0V3Z M7 7h10v1a5 5 0 0 1-10 0V7Z M12 13v8 M8 21h8",
 		color: "grape",
 	},
 	вклады: {
-		path: "M4 8c0-4 16-4 16 0s-16 4-16 0Z M4 8v5c0 4 16 4 16 0V8 M4 13v5c0 4 16 4 16 0v-5",
+		animation: "deposit",
+		path: "M6 9a6 6 0 1 0 12 0a6 6 0 1 0-12 0 M10.5 12V6h2a1.5 1.5 0 0 1 0 3h-3m0 1.5h3 M4 16c0 4 16 4 16 0 M4 19c0 4 16 4 16 0",
 		color: "green",
 	},
 	"инвестиции и накопления": {
+		animation: "growth",
 		path: "M3 3v18h18 M6 15l5-5 4 3 6-8 M16 5h5v5",
 		color: "green",
 	},
@@ -19,9 +22,14 @@ const categoryIcons: Record<string, OperationIcon> = {
 		path: "M2 8l10-5 10 5-10 5L2 8Z M6 10v7c4 3 8 3 12 0v-7 M22 8v9",
 		color: "blue",
 	},
-	переводы: { path: "M3 7h18l-4-4 M21 17H3l4 4", color: "blue" },
+	переводы: {
+		animation: "transfer",
+		path: "M3 7h18l-4-4 M21 17H3l4 4",
+		color: "blue",
+	},
 	"погашение кредита": {
-		path: "M3 5h18v14H3V5Z M3 9h18 M8 14l3 3 5-5",
+		animation: "repayment",
+		path: "M3 5h18v14H3V5Z M3 9h18 M10 18v-7h3a2 2 0 0 1 0 4H9m0 1.5h4",
 		color: "orange",
 	},
 	подписки: {
@@ -33,6 +41,7 @@ const categoryIcons: Record<string, OperationIcon> = {
 		color: "blue",
 	},
 	"связь и интернет": {
+		animation: "wifi",
 		path: "M3 7a14 14 0 0 1 18 0 M6 11a9 9 0 0 1 12 0 M9 15a4 4 0 0 1 6 0 M12 19h.01",
 		color: "blue",
 	},
@@ -53,6 +62,7 @@ const categoryIcons: Record<string, OperationIcon> = {
 		color: "orange",
 	},
 	"хостинг и ии-сервисы": {
+		animation: "server",
 		path: "M3 3h18v7H3V3Z M3 14h18v7H3v-7Z M7 6.5h.01 M7 17.5h.01 M15 6.5h3 M15 17.5h3",
 		color: "grape",
 	},
@@ -61,11 +71,13 @@ const categoryIcons: Record<string, OperationIcon> = {
 		color: "blue",
 	},
 	продукты: {
-		path: "M3 9h18l-2 11H5L3 9Z M8 9l4-6 4 6 M9 13v3 M15 13v3",
+		animation: "basket",
+		path: "M3 9h18l-2 11H5L3 9Z M8 9l4-6 4 6 M9 13v3 M15 13v3 M10 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0",
 		color: "green",
 	},
 	кафе: {
-		path: "M4 8h12v7a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8Z M16 9h2a3 3 0 0 1 0 6h-2 M8 3v2 M12 3v2 M3 22h15",
+		animation: "coffee",
+		path: "M4 8h12v7a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8Z M16 9h2a3 3 0 0 1 0 6h-2 M8 6c-2-1 2-2 0-4 M12 6c-2-1 2-2 0-4 M3 22h15",
 		color: "orange",
 	},
 	такси: {
@@ -73,7 +85,8 @@ const categoryIcons: Record<string, OperationIcon> = {
 		color: "yellow",
 	},
 	транспорт: {
-		path: "M6 3h12a2 2 0 0 1 2 2v13H4V5a2 2 0 0 1 2-2Z M4 11h16 M7 15h1 M16 15h1 M7 18v3 M17 18v3 M9 6h6",
+		animation: "car",
+		path: "M4 16H2v-4l3-1 3-4h6l4 4 4 1v4h-2 M8 16h8 M6 11h12m-6-4v4 M4 16a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-2v4m-2-2h4 M16 16a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-2v4m-2-2h4",
 		color: "blue",
 	},
 	жилье: { path: "M3 11l9-8 9 8 M5 10v11h14V10 M9 21v-8h6v8", color: "orange" },
@@ -87,16 +100,25 @@ const categoryIcons: Record<string, OperationIcon> = {
 		color: "grape",
 	},
 };
-const otherIcon = {
+const otherIcon: OperationIcon = {
+	animation: "grid",
 	path: "M4 4h6v6H4V4Z M14 4h6v6h-6V4Z M4 14h6v6H4v-6Z M14 14h6v6h-6v-6Z",
 	color: "gray",
 };
-const operationIcons = {
+const operationIcons: Record<
+	Exclude<BankOperation["kind"], "expense">,
+	OperationIcon
+> = {
 	topup: {
-		path: "M20 8V5H5a2 2 0 0 1 0-4h13v4 M3 3v16a2 2 0 0 0 2 2h15V8H5 M16 12v5 M13.5 14.5h5",
+		animation: "topup",
+		path: "M20 8V5H5a2 2 0 0 1 0-4h13v4 M3 3v16a2 2 0 0 0 2 2h15V8H5 M16 12v5m-2.5-2.5h5",
 		color: "green",
 	},
-	transfer: { path: "M3 7h18l-4-4 M21 17H3l4 4", color: "blue" },
+	transfer: {
+		animation: "transfer",
+		path: "M3 7h18l-4-4 M21 17H3l4 4",
+		color: "blue",
+	},
 	refund: { path: "M8 4L3 9l5 5 M3 9h11a7 7 0 0 1 0 14", color: "teal" },
 };