Wowhead icons fixes and export

src/app/admin/page.tsx

@@ -1,7 +1,15 @@
 'use client';
 
-import { Download, Upload, RotateCcw, User, CircleDashed } from 'lucide-react';
+import {
+	Download,
+	Upload,
+	RotateCcw,
+	User,
+	CircleDashed,
+	Images
+} from 'lucide-react';
 import { useState } from 'react';
+import toast from 'react-hot-toast';
 
 import Input from '~/components/form/Input';
 import Textarea from '~/components/form/Textarea';
@@ -11,7 +19,7 @@ import {
 	createTurtleWoWAccount,
 	exportClientTrees,
 	exportTable,
-	fixMissingIcons,
+	exportMissingIcons,
 	importClientTrees,
 	importTable,
 	regenerateIds
@@ -47,11 +55,15 @@ const Page = () => {
 						Regenerate IDs
 					</TextButton>
 					<TextButton
-						icon={CircleDashed}
-						onClick={asyncAction(() => fixMissingIcons(undefined))}
+						icon={Images}
+						onClick={asyncAction(async () => {
+							const response = await exportMissingIcons(undefined);
+							window.navigator.clipboard.writeText(response);
+							toast.success('Copied to clipboard');
+						})}
 						disabled={disableInteractions}
 					>
-						Fix missing icons
+						Export WoWHead icons
 					</TextButton>
 				</AdminModule>
 
@@ -115,7 +127,8 @@ const Page = () => {
 							icon={Download}
 							onClick={asyncAction(async () => {
 								const response = await exportClientTrees(undefined);
-								downloadBlob(new Blob([response]), 'talent-trees.json');
+								window.navigator.clipboard.writeText(response);
+								toast.success('Copied to clipboard');
 							})}
 							disabled={disableInteractions}
 							className="self-end"

src/app/api/wowhead-icons/[id]/route.tsx

@@ -50,10 +50,9 @@ export const GET = async (
 				<div
 					style={{
 						position: 'absolute',
-						bottom: 2,
-						right: 2,
-						width: '100%',
-						height: '100%',
+						top: 0,
+						left: 0,
+						...size,
 						backgroundImage: `url("${env.DEPLOY_URL}/icon_frame.png")`
 					}}
 				/>

src/server/api/routers/general.ts

@@ -1,6 +1,6 @@
 'use server';
 
-import { eq } from 'drizzle-orm';
+import { asc, eq } from 'drizzle-orm';
 import { stringify } from 'superjson';
 import { nanoid } from 'nanoid';
 import { type SQLiteTableWithColumns } from 'drizzle-orm/sqlite-core';
@@ -20,6 +20,8 @@ import { env } from '~/env';
 import { publicProcedure, adminProcedure } from '../helpers';
 import { Talent, TalentForm } from '../types';
 
+import { listTurtleTalentTrees } from './talentTree';
+
 export const createTurtleWoWAccount = adminProcedure({
 	query: async ({ db }) => {
 		const exists = await db.query.users.findFirst({
@@ -113,29 +115,24 @@ export const regenerateIds = adminProcedure({
 	}
 });
 
-export const fixMissingIcons = adminProcedure({
+export const exportMissingIcons = adminProcedure({
 	query: async ({ db }) => {
-		const icons = await fetch(`${env.DEPLOY_URL}/icons/list.json`);
-		const list = await icons.json();
-		const set = new Set(list);
-
-		const trees = await selectAll(db, talentTrees);
-		for (const tree of trees) {
-			let changed = false;
-			if (tree.icon && !set.has(tree.icon.toLocaleLowerCase())) {
-				tree.icon = `_${tree.icon}`;
-				changed = true;
-			}
+		const list: [number, string][] = await fetch(
+			`${env.DEPLOY_URL}/icons/list.json`
+		).then(r => r.json());
 
-			for (const talent of tree.talents) {
-				if (talent.icon && !set.has(talent.icon.toLocaleLowerCase())) {
-					talent.icon = `_${talent.icon}`;
-					changed = true;
-				}
-			}
-			if (!changed) continue;
-			await db.update(talentTrees).set(tree).where(eq(talentTrees.id, tree.id));
-		}
+		const trees = await db.query.proposalTrees.findMany({
+			with: { tree: true }
+		});
+		const icons = new Set<string>();
+		trees
+			.flatMap(t => t.tree.talents)
+			.filter(t => t.icon)
+			.forEach(t => {
+				const item = list.find(i => i[1] === t.icon);
+				if (!item || item[0] === -1) icons.add(t.icon);
+			});
+		return [...icons].join(',');
 	}
 });
 
@@ -165,8 +162,21 @@ export const importClientTrees = adminProcedure({
 export const exportClientTrees = adminProcedure({
 	query: async ({ db }) => {
 		const trees = await db.query.proposalTrees.findMany({
-			with: { tree: true }
+			with: { tree: true },
+			orderBy: [asc(talentTrees.class), asc(talentTrees.index)]
 		});
-		return JSON.stringify(trees.map(t => t.tree));
+		const turtle = await listTurtleTalentTrees({
+			name: '',
+			class: 0,
+			from: ''
+		});
+		return JSON.stringify(
+			trees.map((t, i) => {
+				console.log({ turtle: turtle[i]?.name, tree: t.tree.name });
+				return [0, 1, 2, 6, 7, 8, 9, 10, 11, 18, 19, 20, 21, 22, 23].includes(i)
+					? turtle[i]
+					: t.tree;
+			})
+		);
 	}
 });