From 3c3200f211156af13e0eb2c34bb4cf2fa076716a Mon Sep 17 00:00:00 2001
From: Michael Hawkins <BadgerCode@users.noreply.github.com>
Date: Fri, 27 Mar 2026 15:10:38 +0000
Subject: [PATCH 1/8] Add item categories to home page

---
 src/components/ItemTypeCategories.vue | 174 ++++++++++++++++++++++++++
 src/components/ItemTypeOverview.vue   |   4 +-
 src/font-awesome.ts                   |   8 ++
 src/models/item-info.ts               |   4 +-
 src/utilities/item-type-format.ts     |   1 +
 src/views/HomeView.vue                |   6 +
 6 files changed, 194 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ItemTypeCategories.vue

diff --git a/src/components/ItemTypeCategories.vue b/src/components/ItemTypeCategories.vue
new file mode 100644
index 0000000..0856ff3
--- /dev/null
+++ b/src/components/ItemTypeCategories.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import ItemTypeSearch from './ItemTypeSearch.vue';
+import { formatItemType } from '@/utilities/item-type-format';
+
+interface Item {
+  type: string;
+  icon?: string | null;
+  picture?: string | null;
+}
+
+const categories = [
+  {
+    name: "Valuable Resources",
+    icon: "fa-regular fa-gem",
+    items: [
+      { type: "IRON_INGOT", picture: "https://minecraft.wiki/images/Iron_Ingot_JE3_BE2.png?849cb" },
+      { type: "IRON_BLOCK", picture: "https://minecraft.wiki/images/Block_of_Iron_JE4_BE3.png?18948" },
+      { type: "GOLD_INGOT", picture: "https://minecraft.wiki/images/Gold_Ingot_JE4_BE2.png?80cd6" },
+      { type: "GOLD_BLOCK", picture: "https://minecraft.wiki/images/Block_of_Gold_JE6_BE3.png?09478" },
+      { type: "NETHERITE_INGOT", picture: "https://minecraft.wiki/images/Netherite_Ingot_JE1_BE2.png?79364" },
+      { type: "EMERALD", picture: "https://minecraft.wiki/images/Emerald_JE3_BE3.png?4c5f3" },
+      { type: "EMERALD_BLOCK", picture: "https://minecraft.wiki/images/Block_of_Emerald_JE4_BE3.png?d5a3c" },
+      { type: "RAW_COPPER_BLOCK", picture: "https://minecraft.wiki/images/Block_of_Raw_Copper_JE2_BE2.png?a4e9a" },
+      { type: "GUNPOWDER", picture: "https://minecraft.wiki/images/Gunpowder_JE2_BE2.png?c4145" },
+      { type: "HEAVY_CORE", picture: "https://minecraft.wiki/images/Heavy_Core_JE1_BE1.png?57df9" },
+      { type: "SHULKER_SHELL", picture: "https://minecraft.wiki/images/Shulker_Shell_JE2_BE2.png?f3027" },
+      { type: "TRIAL_KEY", picture: "https://minecraft.wiki/images/Trial_Key_JE2_BE2.png?a203a" },
+      { type: "OMINOUS_TRIAL_KEY", picture: "https://minecraft.wiki/images/Ominous_Trial_Key_JE1_BE1.png?56dd6" },
+      { type: "NETHER_STAR", picture: "https://minecraft.wiki/images/Nether_Star.gif?fb01f" },
+    ]
+  },
+  {
+    name: "Equipment",
+    icon: "fa-solid fa-hammer",
+    items: [
+      { type: "BEACON", picture: "https://minecraft.wiki/images/Beacon_JE6_BE2.png?684bf" },
+      { type: "WAYSTONE", icon: "fa-solid fa-chess-rook" },
+      { type: "WARP_PAD", icon: "fa-solid fa-layer-group" },
+      { type: "ELYTRA", picture: "https://minecraft.wiki/images/Elytra_%28item%29_JE1_BE1.png?8f01d" },
+      { type: "TOTEM_OF_UNDYING", picture: "https://minecraft.wiki/images/Totem_of_Undying_JE2_BE2.png?d56eb" },
+      { type: "ENCHANTED_BOOK", picture: "https://minecraft.wiki/images/Enchanted_Book.gif?b21c4" },
+      { type: "POTION", picture: "https://minecraft.wiki/images/Water_Bottle_JE2_BE2.png?acae5" },
+      { type: "SPLASH_POTION", picture: "https://minecraft.wiki/images/Splash_Water_Bottle_JE2_BE2.png?7a92d" },
+      { type: "LINGERING_POTION", picture: "https://minecraft.wiki/images/Lingering_Water_Bottle_JE2_BE2.png?ed26b" },
+      { type: "BEDROCK_DRILL", icon: "fa-solid fa-trowel" }
+    ]
+  },
+  {
+    name: "Building Resources",
+    icon: "fa-solid fa-cubes",
+    items: [
+      { type: "OAK_LOG" },
+      { type: "SPRUCE_LOG" },
+      { type: "PALE_OAK_LOG" },
+      { type: "BONE_BLOCK" },
+      { type: "DARK_OAK_LOG" },
+      { type: "BIRCH_LOG" },
+      { type: "CHERRY_LOG" },
+      { type: "JUNGLE_LOG" },
+      { type: "MANGROVE_LOG" },
+      { type: "ACACIA_LOG" },
+      { type: "STONE" },
+      { type: "DIRT" },
+      { type: "COBBLED_DEEPSLATE" }
+    ]
+  },
+  {
+    name: "Art",
+    icon: "fa-solid fa-palette",
+    items: [
+      { type: "PAINTING", icon: "fa-solid fa-image" },
+      { type: "PALETTE", icon: "fa-solid fa-palette" },
+      { type: "CAMERA_PICTURE", icon: "fa-solid fa-photo-film" },
+      { type: "CAMERA", icon: "fa-solid fa-camera" },
+      { type: "WRITTEN_BOOK", picture: "https://minecraft.wiki/images/Written_Book_JE2_BE2.gif?c6510" },
+      { type: "CUSTOM_MUSIC_DISC", icon: "fa-solid fa-record-vinyl" },
+      { type: "LUA_FISH_MUSIC_BOOK", icon: "fa-solid fa-file-audio" },
+      { type: "FILLED_MAP", icon: "fa-solid fa-map" },
+      { type: "PLAYER_HEAD", icon: "fa-solid fa-cube" }
+    ]
+  }
+];
+
+const selectedCategory = ref(categories[0]!.name as string);
+const categoryItems = ref(categories[0]!.items as Item[]);
+
+const recentlyViewedItems = ref([]);
+
+function selectCategory(name: string) {
+  if (name == "Recent") {
+    selectedCategory.value = name;
+    categoryItems.value = recentlyViewedItems.value;
+    return;
+  }
+
+  let category = categories.find(c => c.name == name);
+  if (category == null) return;
+
+  selectedCategory.value = category.name;
+  categoryItems.value = category.items;
+}
+
+</script>
+
+<template>
+  <div class="mb-8 flex flex-col">
+    <!-- Categories -->
+    <div class="flex flex-row gap-1 mb-1">
+      <div v-for="category in categories" class="item-button category"
+        :class="{ 'active': selectedCategory == category.name }" @click="selectCategory(category.name)">
+        <div class="text-2xl"><font-awesome-icon :icon="category.icon" /></div>
+      </div>
+
+      <div class="flex-grow"></div>
+
+      <!-- Recent items -->
+      <div class="item-button category" :class="{ 'active': selectedCategory == 'Recent' }"
+        @click="selectCategory('Recent')">
+        <div class="text-2xl"><font-awesome-icon icon="fa-solid fa-clock-rotate-left" /></div>
+      </div>
+    </div>
+
+    <!-- Body -->
+    <div class="flex flex-col p-2 gap-2 bg-gray-800 border border-gray-700 rounded">
+      <!-- Search -->
+      <div class="flex flex-col md:flex-row border-b-2 border-gray-700 pb-2">
+        <ItemTypeSearch @selection="
+          (itemType) => {
+            if (itemType) $router.push({ name: 'itemSales', params: { itemType: itemType } });
+          }
+        ">
+        </ItemTypeSearch>
+      </div>
+
+      <!-- Item types -->
+      <div class="flex flex-row flex-wrap gap-1 content-start justify-center h-48 overflow-x-scroll">
+        <!-- TODO: Router link -->
+        <RouterLink v-for="item in categoryItems" :to="{ name: 'itemSales', params: { itemType: item.type } }"
+          class="item-button" :title="formatItemType(item.type).toLocaleLowerCase()">
+
+          <!-- Item icon/picture -->
+          <div v-if="item.icon" class="text-xl">
+            <font-awesome-icon :icon="item.icon" />
+          </div>
+          <div v-else-if="item.picture">
+            <img :src="item.picture" class="w-6 h-6" />
+          </div>
+
+          <!-- Item name -->
+          <div class="text-xs capitalize overflow-hidden text-ellipsis">
+            {{ formatItemType(item.type).toLocaleLowerCase() }}
+          </div>
+        </RouterLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="css" scoped>
+@import "tailwindcss";
+
+.item-button {
+  @apply p-1 w-18 h-18 gap-1 bg-gray-700 hover:bg-gray-600 flex flex-col items-center text-center justify-center text-gray-300 rounded cursor-pointer;
+}
+
+.item-button.category {
+  @apply w-15 h-15;
+}
+
+.item-button.category.active {
+  @apply text-gray-700 bg-gray-300;
+}
+</style>
diff --git a/src/components/ItemTypeOverview.vue b/src/components/ItemTypeOverview.vue
index 419844d..a28e00b 100644
--- a/src/components/ItemTypeOverview.vue
+++ b/src/components/ItemTypeOverview.vue
@@ -241,7 +241,9 @@ function getWikiLink() {
     frags[i] = frags[i]!.charAt(0).toUpperCase() + frags[i]!.slice(1);
   }
 
-  return `https://minecraft.wiki/w/${frags.join("_")}`;
+  let itemName = frags.join("_").replace("Of", "of");
+
+  return `https://minecraft.wiki/w/${itemName}`;
 }
 </script>
 
diff --git a/src/font-awesome.ts b/src/font-awesome.ts
index f00f9bc..18573e5 100644
--- a/src/font-awesome.ts
+++ b/src/font-awesome.ts
@@ -41,12 +41,16 @@ import {
   faPalette,
   faTrowel,
   faPhotoFilm,
+  faCubes,
+  faHammer,
+  faClockRotateLeft,
   // Don't forget to add it below too!
 } from "@fortawesome/free-solid-svg-icons";
 
 // Regular icons
 import {
   faHeart as farHeart,
+  faGem as farGem,
   // Don't forget to add it below too!
 } from "@fortawesome/free-regular-svg-icons";
 
@@ -91,4 +95,8 @@ library.add(
   faPalette,
   faTrowel,
   faPhotoFilm,
+  farGem,
+  faCubes,
+  faHammer,
+  faClockRotateLeft,
 );
diff --git a/src/models/item-info.ts b/src/models/item-info.ts
index 70edb8d..7b1a532 100644
--- a/src/models/item-info.ts
+++ b/src/models/item-info.ts
@@ -4,8 +4,8 @@ export interface ItemInfo {
   description?: string;
   moreInfoLink?: string;
   hideWikiLink?: boolean;
-  isSpecialItem?: boolean;
-  icon?: string;
+  isSpecialItem?: boolean; // TODO: get rid of
+  icon?: string; // TODO: get rid of
   shopCaveats?: string;
 }
 
diff --git a/src/utilities/item-type-format.ts b/src/utilities/item-type-format.ts
index 800437b..b7044dd 100644
--- a/src/utilities/item-type-format.ts
+++ b/src/utilities/item-type-format.ts
@@ -1,5 +1,6 @@
 export function formatItemType(itemType: string | null | undefined, defaultValue?: string | null | undefined): string {
   if (!itemType) return defaultValue ?? "";
 
+  // TODO: Lowercase & capitalise first letter. Some places that use this want it uppercase; make them upper case it
   return itemType.replace(/_/g, " ");
 }
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 2eeeb08..8ff2a71 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -7,6 +7,7 @@ import ItemTypeSearch from "@/components/ItemTypeSearch.vue";
 import { getSpecialItems } from "@/models/item-info";
 import { serverStore } from "@/store/server-state";
 import { formatNumber } from "@/utilities/number-format";
+import ItemTypeCategories from "@/components/ItemTypeCategories.vue";
 
 const loading = ref(true);
 const recentSales = ref([] as SaleSummary[]);
@@ -29,9 +30,14 @@ async function loadSales() {
   noMoreResults.value = newSales.length === 0;
   loading.value = false;
 }
+
+
 </script>
 
 <template>
+  <!-- Item type selector -->
+  <ItemTypeCategories></ItemTypeCategories>
+
   <div class="mb-8 flex flex-col gap-4">
     <div class="flex flex-col gap-1">
       <h1 class="text-3xl font-bold">Item Lookup</h1>

From a2ac7136ac73c48329b3ad7f57b68802001db1d0 Mon Sep 17 00:00:00 2001
From: Michael Hawkins <BadgerCode@users.noreply.github.com>
Date: Fri, 27 Mar 2026 15:33:42 +0000
Subject: [PATCH 2/8] Remove old item shortcuts and add pictures

---
 src/components/ItemTypeCategories.vue | 36 ++++++++++++++----------
 src/models/item-info.ts               | 40 ---------------------------
 src/views/HomeView.vue                | 33 ++--------------------
 3 files changed, 23 insertions(+), 86 deletions(-)

diff --git a/src/components/ItemTypeCategories.vue b/src/components/ItemTypeCategories.vue
index 0856ff3..cc2626a 100644
--- a/src/components/ItemTypeCategories.vue
+++ b/src/components/ItemTypeCategories.vue
@@ -3,6 +3,12 @@ import { ref } from 'vue';
 import ItemTypeSearch from './ItemTypeSearch.vue';
 import { formatItemType } from '@/utilities/item-type-format';
 
+interface Category {
+  name: string;
+  icon: string;
+  items: Item[];
+}
+
 interface Item {
   type: string;
   icon?: string | null;
@@ -50,19 +56,19 @@ const categories = [
     name: "Building Resources",
     icon: "fa-solid fa-cubes",
     items: [
-      { type: "OAK_LOG" },
-      { type: "SPRUCE_LOG" },
-      { type: "PALE_OAK_LOG" },
-      { type: "BONE_BLOCK" },
-      { type: "DARK_OAK_LOG" },
-      { type: "BIRCH_LOG" },
-      { type: "CHERRY_LOG" },
-      { type: "JUNGLE_LOG" },
-      { type: "MANGROVE_LOG" },
-      { type: "ACACIA_LOG" },
-      { type: "STONE" },
-      { type: "DIRT" },
-      { type: "COBBLED_DEEPSLATE" }
+      { type: "OAK_LOG", picture: "https://minecraft.wiki/images/Oak_Log_%28UD%29_JE8_BE3.png" },
+      { type: "SPRUCE_LOG", picture: "https://minecraft.wiki/images/Spruce_Log_(UD)_JE8_BE4.png" },
+      { type: "PALE_OAK_LOG", picture: "https://minecraft.wiki/images/Pale_Oak_Log_(UD)_JE1_BE1.png" },
+      { type: "DARK_OAK_LOG", picture: "https://minecraft.wiki/images/Dark_Oak_Log_(UD)_JE9_BE4.png" },
+      { type: "BIRCH_LOG", picture: "https://minecraft.wiki/images/Birch_Log_(UD)_JE8_BE4.png" },
+      { type: "CHERRY_LOG", picture: "https://minecraft.wiki/images/Cherry_Log_(UD)_JE1_BE1.png" },
+      { type: "JUNGLE_LOG", picture: "https://minecraft.wiki/images/Jungle_Log_(UD)_JE9_BE4.png" },
+      { type: "MANGROVE_LOG", picture: "https://minecraft.wiki/images/Mangrove_Log_(UD)_JE1_BE1.png" },
+      { type: "ACACIA_LOG", picture: "https://minecraft.wiki/images/Acacia_Log_(UD)_JE8_BE3.png" },
+      { type: "BONE_BLOCK", picture: "https://minecraft.wiki/images/Bone_Block_%28UD%29_JE2_BE2.png?21f6b" },
+      { type: "STONE", picture: "https://minecraft.wiki/images/Stone_JE5_BE3.png?5780c" },
+      { type: "DIRT", picture: "https://minecraft.wiki/images/Dirt_JE2_BE2.png?438ac" },
+      { type: "COBBLED_DEEPSLATE", picture: "https://minecraft.wiki/images/Cobbled_Deepslate.png?86523" }
     ]
   },
   {
@@ -80,7 +86,7 @@ const categories = [
       { type: "PLAYER_HEAD", icon: "fa-solid fa-cube" }
     ]
   }
-];
+] as Category[];
 
 const selectedCategory = ref(categories[0]!.name as string);
 const categoryItems = ref(categories[0]!.items as Item[]);
@@ -104,7 +110,7 @@ function selectCategory(name: string) {
 </script>
 
 <template>
-  <div class="mb-8 flex flex-col">
+  <div class="flex flex-col">
     <!-- Categories -->
     <div class="flex flex-row gap-1 mb-1">
       <div v-for="category in categories" class="item-button category"
diff --git a/src/models/item-info.ts b/src/models/item-info.ts
index 7b1a532..f3e3077 100644
--- a/src/models/item-info.ts
+++ b/src/models/item-info.ts
@@ -4,8 +4,6 @@ export interface ItemInfo {
   description?: string;
   moreInfoLink?: string;
   hideWikiLink?: boolean;
-  isSpecialItem?: boolean; // TODO: get rid of
-  icon?: string; // TODO: get rid of
   shopCaveats?: string;
 }
 
@@ -16,127 +14,89 @@ export function getItemInfo(itemType?: string): ItemInfo | null {
   return itemInfo[itemType] ?? null;
 }
 
-export function getSpecialItems(): ItemInfo[] {
-  return specialItems;
-}
-
 // Item info
 itemInfo["ENCHANTED_BOOK"] = {
   itemType: "ENCHANTED_BOOK",
   displayName: "Enchanted Books",
-  icon: "fa-solid fa-book-bookmark",
-  isSpecialItem: true,
   description: "A book with one or more enchantments, used to enchant other items.",
 };
 itemInfo["POTION"] = {
   itemType: "POTION",
   displayName: "Potions",
-  icon: "fa-solid fa-flask",
-  isSpecialItem: true,
   description: "A regular potion with a status effect that you have to drink.",
 };
 itemInfo["SPLASH_POTION"] = {
   itemType: "SPLASH_POTION",
   displayName: "Splash Potions",
-  icon: "fa-solid fa-flask",
-  isSpecialItem: true,
   description: "A throwable potion with a status effect.",
 };
 itemInfo["LINGERING_POTION"] = {
   itemType: "LINGERING_POTION",
   displayName: "Lingering Potions",
-  icon: "fa-solid fa-flask",
-  isSpecialItem: true,
   description: "A throwable potion which creates a cloud with a status effect.",
 };
 itemInfo["CUSTOM_MUSIC_DISC"] = {
   itemType: "CUSTOM_MUSIC_DISC",
   displayName: "Custom Music Discs",
-  icon: "fa-solid fa-record-vinyl",
-  isSpecialItem: true,
   description: "Music discs with custom songs. They may sometimes be shown as music disc 11.",
   moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/custom-music-discs"
 };
 itemInfo["LUA_FISH_MUSIC_BOOK"] = {
   itemType: "LUA_FISH_MUSIC_BOOK",
   displayName: "Custom Music Books",
-  icon: "fa-solid fa-file-audio",
-  isSpecialItem: true,
   description: "Written books that can be used on the Lua_Fish record player to play music.",
   hideWikiLink: true,
 };
 itemInfo["PAINTING"] = {
   itemType: "PAINTING",
   displayName: "Player Paintings",
-  icon: "fa-solid fa-image",
-  isSpecialItem: true,
   description: "Paintings created by the players of the server",
   moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/joy-of-painting",
 };
 itemInfo["PALETTE"] = {
   itemType: "PALETTE",
   displayName: "Palette",
-  icon: "fa-solid fa-palette",
-  isSpecialItem: true,
   description: "Used with a blank canvas to create a painting.",
   moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/joy-of-painting",
 };
 itemInfo["FILLED_MAP"] = {
   itemType: "FILLED_MAP",
   displayName: "Map Artwork",
-  icon: "fa-solid fa-map",
-  isSpecialItem: true,
   description: "Maps used to display artwork. Includes regular maps too",
   shopCaveats: "Shop listings will include regular maps as well as map artwork.",
 };
 itemInfo["WAYSTONE"] = {
   itemType: "WAYSTONE",
   displayName: "Waystones",
-  icon: "fa-solid fa-chess-rook",
-  isSpecialItem: true,
   description: "Makes it easier for players to teleport back to a location like a town.",
   moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/waystones"
 };
 itemInfo["WARP_PLATE"] = {
   itemType: "WARP_PLATE",
   displayName: "Warp Plates",
-  icon: "fa-solid fa-layer-group",
-  isSpecialItem: true,
   description: "Allows teleporting between two locations by linking two warp plates together.",
   moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/warp-plates"
 };
 itemInfo["CAMERA"] = {
   itemType: "CAMERA",
   displayName: "Camera",
-  icon: "fa-solid fa-camera",
-  isSpecialItem: true,
   description: "Can be used with gunpowder to take in-game pictures!",
   moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/camerapture"
 };
 itemInfo["CAMERA_PICTURE"] = {
   itemType: "CAMERA_PICTURE",
   displayName: "Camera Picture",
-  icon: "fa-solid fa-photo-film",
-  isSpecialItem: true,
   description: "Pictures taken using the in-game camera",
   moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/camerapture"
 };
 itemInfo["PLAYER_HEAD"] = {
   itemType: "PLAYER_HEAD",
   displayName: "Player Heads",
-  icon: "fa-solid fa-cube",
-  isSpecialItem: true,
   description: "Can be used as decoration. Some have additional functionality through Figura.",
 };
 itemInfo["BEDROCK_DRILL"] = {
   itemType: "BEDROCK_DRILL",
   displayName: "Bedrock Drill",
-  icon: "fa-solid fa-trowel",
-  isSpecialItem: true,
   description: "Destroys blocks of bedrock.",
   moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/fung-tech-bedrock-drill"
 };
-
-const specialItems = Object.keys(itemInfo)
-  .map((itemType) => itemInfo[itemType]!)
-  .filter((i) => i != undefined && i.isSpecialItem);
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 8ff2a71..f59fc1b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -3,8 +3,6 @@ import type { SaleSummary } from "@/api/sales/saleSummary";
 import { onMounted, ref } from "vue";
 import * as SalesAPI from "@/api/sales/api";
 import RecentSales from "@/components/RecentSales.vue";
-import ItemTypeSearch from "@/components/ItemTypeSearch.vue";
-import { getSpecialItems } from "@/models/item-info";
 import { serverStore } from "@/store/server-state";
 import { formatNumber } from "@/utilities/number-format";
 import ItemTypeCategories from "@/components/ItemTypeCategories.vue";
@@ -35,41 +33,14 @@ async function loadSales() {
 </script>
 
 <template>
-  <!-- Item type selector -->
-  <ItemTypeCategories></ItemTypeCategories>
-
   <div class="mb-8 flex flex-col gap-4">
     <div class="flex flex-col gap-1">
       <h1 class="text-3xl font-bold">Item Lookup</h1>
       <div class="text-gray-300">See sales and shops for an item</div>
     </div>
 
-    <div class="flex flex-row items-center justify-center">
-      <ItemTypeSearch @selection="
-        (itemType) => {
-          if (itemType) $router.push({ name: 'itemSales', params: { itemType: itemType } });
-        }
-      ">
-      </ItemTypeSearch>
-    </div>
-  </div>
-
-  <div class="mb-8">
-    <div class="mb-3 flex flex-row justify-between items-end">
-      <div>
-        <h1 class="text-3xl font-bold">Special Items</h1>
-      </div>
-    </div>
-
-    <div class="flex flex-row flex-wrap gap-2 md:gap-3 mb-6">
-      <RouterLink v-for="item in getSpecialItems()" :to="{ name: 'itemSales', params: { itemType: item.itemType } }">
-        <div
-          class="p-1 w-20 h-20 gap-1 md:p-3 md:w-27 md:h-27 md:gap-2 bg-gray-800 flex flex-col items-center text-center justify-center text-gray-300 border-1 border-gray-700 rounded-lg">
-          <div class="text-xl md:text-3xl"><font-awesome-icon :icon="item.icon" /></div>
-          <div class="text-xs md:text-sm">{{ item.displayName }}</div>
-        </div>
-      </RouterLink>
-    </div>
+    <!-- Item type selector -->
+    <ItemTypeCategories></ItemTypeCategories>
   </div>
 
   <div class="mb-8">

From 98566ced910934866a6a17547cb20ec8604b4f4e Mon Sep 17 00:00:00 2001
From: Michael Hawkins <BadgerCode@users.noreply.github.com>
Date: Fri, 27 Mar 2026 15:38:06 +0000
Subject: [PATCH 3/8] Shrink categories on desktop

---
 src/components/ItemTypeCategories.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ItemTypeCategories.vue b/src/components/ItemTypeCategories.vue
index cc2626a..ccb0291 100644
--- a/src/components/ItemTypeCategories.vue
+++ b/src/components/ItemTypeCategories.vue
@@ -83,7 +83,7 @@ const categories = [
       { type: "CUSTOM_MUSIC_DISC", icon: "fa-solid fa-record-vinyl" },
       { type: "LUA_FISH_MUSIC_BOOK", icon: "fa-solid fa-file-audio" },
       { type: "FILLED_MAP", icon: "fa-solid fa-map" },
-      { type: "PLAYER_HEAD", icon: "fa-solid fa-cube" }
+      { type: "PLAYER_HEAD", picture: "https://minecraft.wiki/images/Player_Head_%28S%29_JE2.png?6f81f" }
     ]
   }
 ] as Category[];
@@ -140,7 +140,7 @@ function selectCategory(name: string) {
       </div>
 
       <!-- Item types -->
-      <div class="flex flex-row flex-wrap gap-1 content-start justify-center h-48 overflow-x-scroll">
+      <div class="flex flex-row flex-wrap gap-1 content-start justify-center max-h-48 h-auto overflow-x-scroll">
         <!-- TODO: Router link -->
         <RouterLink v-for="item in categoryItems" :to="{ name: 'itemSales', params: { itemType: item.type } }"
           class="item-button" :title="formatItemType(item.type).toLocaleLowerCase()">

From 0c5221f0915dd3c546fa5ad81b11d696f9df8e8d Mon Sep 17 00:00:00 2001
From: Michael Hawkins <BadgerCode@users.noreply.github.com>
Date: Fri, 27 Mar 2026 17:20:39 +0000
Subject: [PATCH 4/8] Implement recently viewed items

---
 src/components/ItemTypeCategories.vue | 12 ++++++++++--
 src/components/ItemTypeOverview.vue   |  3 +++
 src/store/user-state.ts               | 26 ++++++++++++++++++++++++++
 src/views/ItemTypeView.vue            |  1 +
 4 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/components/ItemTypeCategories.vue b/src/components/ItemTypeCategories.vue
index ccb0291..9fe6849 100644
--- a/src/components/ItemTypeCategories.vue
+++ b/src/components/ItemTypeCategories.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import ItemTypeSearch from './ItemTypeSearch.vue';
 import { formatItemType } from '@/utilities/item-type-format';
+import { userStore } from '@/store/user-state';
 
 interface Category {
   name: string;
@@ -91,7 +92,14 @@ const categories = [
 const selectedCategory = ref(categories[0]!.name as string);
 const categoryItems = ref(categories[0]!.items as Item[]);
 
-const recentlyViewedItems = ref([]);
+const recentlyViewedItems = computed(() => {
+  return userStore.recentlyViewedItems
+    .reverse()
+    .map(i => ({
+      type: i,
+    })) as Item[];
+});
+
 
 function selectCategory(name: string) {
   if (name == "Recent") {
diff --git a/src/components/ItemTypeOverview.vue b/src/components/ItemTypeOverview.vue
index a28e00b..be6288c 100644
--- a/src/components/ItemTypeOverview.vue
+++ b/src/components/ItemTypeOverview.vue
@@ -23,6 +23,7 @@ import { itemsStore } from "@/store/items-state";
 import { debounce } from "lodash";
 import { setPageTitle } from "@/router/pageTitle";
 import { capitalizeFirstLetter } from "@/utilities/text-format";
+import { userStore } from "@/store/user-state";
 
 interface Props {
   itemType: string;
@@ -80,6 +81,8 @@ watch(customDiscFilter, async (_, __) => {
 onMounted(async () => {
   initFlowbite(); // Include on any component where you need flowbite JS functionality
 
+  userStore.addRecentlyViewedItem(props.itemType);
+
   setPageTitle(capitalizeFirstLetter(formatItemType(props.itemType).toLocaleLowerCase()));
 
   // Load sales with any filters
diff --git a/src/store/user-state.ts b/src/store/user-state.ts
index 613191b..a80b67b 100644
--- a/src/store/user-state.ts
+++ b/src/store/user-state.ts
@@ -9,6 +9,7 @@ export interface User {
 export const userStore = reactive({
   user: null as User | null,
   jwt: null as string | null,
+  recentlyViewedItems: [] as string[],
 
   // Data management
   login(jwt: string, user: User) {
@@ -18,6 +19,17 @@ export const userStore = reactive({
   },
 
   load() {
+    // Load recently viewed items
+    let rawRecentItems = localStorage.getItem("recentlyViewedItems");
+    if (rawRecentItems != null) {
+      try {
+        this.recentlyViewedItems = JSON.parse(rawRecentItems);
+      } catch (error) {
+        localStorage.removeItem("recentlyViewedItems");
+      }
+    }
+
+    // Load JWT
     this.jwt = localStorage.getItem("userToken");
     if (this.jwt == null) return;
 
@@ -43,4 +55,18 @@ export const userStore = reactive({
     this.user = null;
     localStorage.removeItem("userToken");
   },
+
+  addRecentlyViewedItem(itemType: string) {
+    let existingIndex = this.recentlyViewedItems.findIndex(i => i == itemType);
+    if (existingIndex !== -1) {
+      this.recentlyViewedItems.splice(existingIndex, 1);
+    }
+
+    this.recentlyViewedItems.push(itemType);
+
+    let itemsToRemove = Math.max(0, this.recentlyViewedItems.length - 16);
+    this.recentlyViewedItems = this.recentlyViewedItems.slice(itemsToRemove);
+
+    localStorage.setItem("recentlyViewedItems", JSON.stringify(this.recentlyViewedItems));
+  }
 });
diff --git a/src/views/ItemTypeView.vue b/src/views/ItemTypeView.vue
index dbe47e9..30fb40f 100644
--- a/src/views/ItemTypeView.vue
+++ b/src/views/ItemTypeView.vue
@@ -13,5 +13,6 @@ onMounted(async () => {
 </script>
 
 <template>
+  <!-- TODO: Bring ItemTypeOverview content into here -->
   <ItemTypeOverview :item-type="itemType"></ItemTypeOverview>
 </template>

From 80104acd30a57e5e6519640778812fb94ece2d9b Mon Sep 17 00:00:00 2001
From: Michael Hawkins <BadgerCode@users.noreply.github.com>
Date: Fri, 27 Mar 2026 17:27:14 +0000
Subject: [PATCH 5/8] Retain selected category until refresh

---
 src/components/ItemTypeCategories.vue | 38 ++++++++++++---------------
 src/store/app-state.ts                |  5 ++++
 2 files changed, 22 insertions(+), 21 deletions(-)
 create mode 100644 src/store/app-state.ts

diff --git a/src/components/ItemTypeCategories.vue b/src/components/ItemTypeCategories.vue
index 9fe6849..d11bf38 100644
--- a/src/components/ItemTypeCategories.vue
+++ b/src/components/ItemTypeCategories.vue
@@ -3,6 +3,7 @@ import { computed, ref } from 'vue';
 import ItemTypeSearch from './ItemTypeSearch.vue';
 import { formatItemType } from '@/utilities/item-type-format';
 import { userStore } from '@/store/user-state';
+import { appStore } from '@/store/app-state';
 
 interface Category {
   name: string;
@@ -89,30 +90,25 @@ const categories = [
   }
 ] as Category[];
 
-const selectedCategory = ref(categories[0]!.name as string);
-const categoryItems = ref(categories[0]!.items as Item[]);
+if (appStore.selectedItemCategory == null)
+  appStore.selectedItemCategory = categories[0]!.name;
 
-const recentlyViewedItems = computed(() => {
-  return userStore.recentlyViewedItems
-    .reverse()
-    .map(i => ({
-      type: i,
-    })) as Item[];
+const categoryItems = computed(() => {
+  if (appStore.selectedItemCategory == "Recent") {
+    return userStore.recentlyViewedItems
+      .reverse()
+      .map(i => ({
+        type: i,
+      })) as Item[];
+  }
+
+  let category = categories.find(c => c.name == appStore.selectedItemCategory);
+  return category?.items ?? [];
 });
 
 
 function selectCategory(name: string) {
-  if (name == "Recent") {
-    selectedCategory.value = name;
-    categoryItems.value = recentlyViewedItems.value;
-    return;
-  }
-
-  let category = categories.find(c => c.name == name);
-  if (category == null) return;
-
-  selectedCategory.value = category.name;
-  categoryItems.value = category.items;
+  appStore.selectedItemCategory = name;
 }
 
 </script>
@@ -122,14 +118,14 @@ function selectCategory(name: string) {
     <!-- Categories -->
     <div class="flex flex-row gap-1 mb-1">
       <div v-for="category in categories" class="item-button category"
-        :class="{ 'active': selectedCategory == category.name }" @click="selectCategory(category.name)">
+        :class="{ 'active': appStore.selectedItemCategory == category.name }" @click="selectCategory(category.name)">
         <div class="text-2xl"><font-awesome-icon :icon="category.icon" /></div>
       </div>
 
       <div class="flex-grow"></div>
 
       <!-- Recent items -->
-      <div class="item-button category" :class="{ 'active': selectedCategory == 'Recent' }"
+      <div class="item-button category" :class="{ 'active': appStore.selectedItemCategory == 'Recent' }"
         @click="selectCategory('Recent')">
         <div class="text-2xl"><font-awesome-icon icon="fa-solid fa-clock-rotate-left" /></div>
       </div>
diff --git a/src/store/app-state.ts b/src/store/app-state.ts
new file mode 100644
index 0000000..cfb001c
--- /dev/null
+++ b/src/store/app-state.ts
@@ -0,0 +1,5 @@
+import { reactive } from "vue";
+
+export const appStore = reactive({
+  selectedItemCategory: null as string | null
+});

From 9b07073afd055978a9cb9b63152b976102e803f9 Mon Sep 17 00:00:00 2001
From: Michael Hawkins <BadgerCode@users.noreply.github.com>
Date: Fri, 27 Mar 2026 17:42:23 +0000
Subject: [PATCH 6/8] Move item picture/icon to common item data for reuse

---
 src/components/ItemTypeCategories.vue | 107 +++++++++++++-------------
 src/models/item-info.ts               |  99 ++++++++++++++----------
 2 files changed, 114 insertions(+), 92 deletions(-)

diff --git a/src/components/ItemTypeCategories.vue b/src/components/ItemTypeCategories.vue
index d11bf38..94d4835 100644
--- a/src/components/ItemTypeCategories.vue
+++ b/src/components/ItemTypeCategories.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import ItemTypeSearch from './ItemTypeSearch.vue';
 import { formatItemType } from '@/utilities/item-type-format';
 import { userStore } from '@/store/user-state';
 import { appStore } from '@/store/app-state';
+import { getItemInfo, type ItemInfo } from '@/models/item-info';
 
 interface Category {
   name: string;
@@ -13,8 +14,7 @@ interface Category {
 
 interface Item {
   type: string;
-  icon?: string | null;
-  picture?: string | null;
+  info: ItemInfo | null;
 }
 
 const categories = [
@@ -22,70 +22,70 @@ const categories = [
     name: "Valuable Resources",
     icon: "fa-regular fa-gem",
     items: [
-      { type: "IRON_INGOT", picture: "https://minecraft.wiki/images/Iron_Ingot_JE3_BE2.png?849cb" },
-      { type: "IRON_BLOCK", picture: "https://minecraft.wiki/images/Block_of_Iron_JE4_BE3.png?18948" },
-      { type: "GOLD_INGOT", picture: "https://minecraft.wiki/images/Gold_Ingot_JE4_BE2.png?80cd6" },
-      { type: "GOLD_BLOCK", picture: "https://minecraft.wiki/images/Block_of_Gold_JE6_BE3.png?09478" },
-      { type: "NETHERITE_INGOT", picture: "https://minecraft.wiki/images/Netherite_Ingot_JE1_BE2.png?79364" },
-      { type: "EMERALD", picture: "https://minecraft.wiki/images/Emerald_JE3_BE3.png?4c5f3" },
-      { type: "EMERALD_BLOCK", picture: "https://minecraft.wiki/images/Block_of_Emerald_JE4_BE3.png?d5a3c" },
-      { type: "RAW_COPPER_BLOCK", picture: "https://minecraft.wiki/images/Block_of_Raw_Copper_JE2_BE2.png?a4e9a" },
-      { type: "GUNPOWDER", picture: "https://minecraft.wiki/images/Gunpowder_JE2_BE2.png?c4145" },
-      { type: "HEAVY_CORE", picture: "https://minecraft.wiki/images/Heavy_Core_JE1_BE1.png?57df9" },
-      { type: "SHULKER_SHELL", picture: "https://minecraft.wiki/images/Shulker_Shell_JE2_BE2.png?f3027" },
-      { type: "TRIAL_KEY", picture: "https://minecraft.wiki/images/Trial_Key_JE2_BE2.png?a203a" },
-      { type: "OMINOUS_TRIAL_KEY", picture: "https://minecraft.wiki/images/Ominous_Trial_Key_JE1_BE1.png?56dd6" },
-      { type: "NETHER_STAR", picture: "https://minecraft.wiki/images/Nether_Star.gif?fb01f" },
+      { type: "IRON_INGOT", info: getItemInfo("IRON_INGOT") },
+      { type: "IRON_BLOCK", info: getItemInfo("IRON_BLOCK") },
+      { type: "GOLD_INGOT", info: getItemInfo("GOLD_INGOT") },
+      { type: "GOLD_BLOCK", info: getItemInfo("GOLD_BLOCK") },
+      { type: "NETHERITE_INGOT", info: getItemInfo("NETHERITE_INGOT") },
+      { type: "EMERALD", info: getItemInfo("EMERALD") },
+      { type: "EMERALD_BLOCK", info: getItemInfo("EMERALD_BLOCK") },
+      { type: "RAW_COPPER_BLOCK", info: getItemInfo("RAW_COPPER_BLOCK") },
+      { type: "GUNPOWDER", info: getItemInfo("GUNPOWDER") },
+      { type: "HEAVY_CORE", info: getItemInfo("HEAVY_CORE") },
+      { type: "SHULKER_SHELL", info: getItemInfo("SHULKER_SHELL") },
+      { type: "TRIAL_KEY", info: getItemInfo("TRIAL_KEY") },
+      { type: "OMINOUS_TRIAL_KEY", info: getItemInfo("OMINOUS_TRIAL_KEY") },
+      { type: "NETHER_STAR", info: getItemInfo("NETHER_STAR") },
     ]
   },
   {
     name: "Equipment",
     icon: "fa-solid fa-hammer",
     items: [
-      { type: "BEACON", picture: "https://minecraft.wiki/images/Beacon_JE6_BE2.png?684bf" },
-      { type: "WAYSTONE", icon: "fa-solid fa-chess-rook" },
-      { type: "WARP_PAD", icon: "fa-solid fa-layer-group" },
-      { type: "ELYTRA", picture: "https://minecraft.wiki/images/Elytra_%28item%29_JE1_BE1.png?8f01d" },
-      { type: "TOTEM_OF_UNDYING", picture: "https://minecraft.wiki/images/Totem_of_Undying_JE2_BE2.png?d56eb" },
-      { type: "ENCHANTED_BOOK", picture: "https://minecraft.wiki/images/Enchanted_Book.gif?b21c4" },
-      { type: "POTION", picture: "https://minecraft.wiki/images/Water_Bottle_JE2_BE2.png?acae5" },
-      { type: "SPLASH_POTION", picture: "https://minecraft.wiki/images/Splash_Water_Bottle_JE2_BE2.png?7a92d" },
-      { type: "LINGERING_POTION", picture: "https://minecraft.wiki/images/Lingering_Water_Bottle_JE2_BE2.png?ed26b" },
-      { type: "BEDROCK_DRILL", icon: "fa-solid fa-trowel" }
+      { type: "BEACON", info: getItemInfo("BEACON") },
+      { type: "WAYSTONE", info: getItemInfo("WAYSTONE") },
+      { type: "WARP_PLATE", info: getItemInfo("WARP_PLATE") },
+      { type: "ELYTRA", info: getItemInfo("ELYTRA") },
+      { type: "TOTEM_OF_UNDYING", info: getItemInfo("TOTEM_OF_UNDYING") },
+      { type: "ENCHANTED_BOOK", info: getItemInfo("ENCHANTED_BOOK") },
+      { type: "POTION", info: getItemInfo("POTION") },
+      { type: "SPLASH_POTION", info: getItemInfo("SPLASH_POTION") },
+      { type: "LINGERING_POTION", info: getItemInfo("LINGERING_POTION") },
+      { type: "BEDROCK_DRILL", info: getItemInfo("BEDROCK_DRILL") },
     ]
   },
   {
     name: "Building Resources",
     icon: "fa-solid fa-cubes",
     items: [
-      { type: "OAK_LOG", picture: "https://minecraft.wiki/images/Oak_Log_%28UD%29_JE8_BE3.png" },
-      { type: "SPRUCE_LOG", picture: "https://minecraft.wiki/images/Spruce_Log_(UD)_JE8_BE4.png" },
-      { type: "PALE_OAK_LOG", picture: "https://minecraft.wiki/images/Pale_Oak_Log_(UD)_JE1_BE1.png" },
-      { type: "DARK_OAK_LOG", picture: "https://minecraft.wiki/images/Dark_Oak_Log_(UD)_JE9_BE4.png" },
-      { type: "BIRCH_LOG", picture: "https://minecraft.wiki/images/Birch_Log_(UD)_JE8_BE4.png" },
-      { type: "CHERRY_LOG", picture: "https://minecraft.wiki/images/Cherry_Log_(UD)_JE1_BE1.png" },
-      { type: "JUNGLE_LOG", picture: "https://minecraft.wiki/images/Jungle_Log_(UD)_JE9_BE4.png" },
-      { type: "MANGROVE_LOG", picture: "https://minecraft.wiki/images/Mangrove_Log_(UD)_JE1_BE1.png" },
-      { type: "ACACIA_LOG", picture: "https://minecraft.wiki/images/Acacia_Log_(UD)_JE8_BE3.png" },
-      { type: "BONE_BLOCK", picture: "https://minecraft.wiki/images/Bone_Block_%28UD%29_JE2_BE2.png?21f6b" },
-      { type: "STONE", picture: "https://minecraft.wiki/images/Stone_JE5_BE3.png?5780c" },
-      { type: "DIRT", picture: "https://minecraft.wiki/images/Dirt_JE2_BE2.png?438ac" },
-      { type: "COBBLED_DEEPSLATE", picture: "https://minecraft.wiki/images/Cobbled_Deepslate.png?86523" }
+      { type: "OAK_LOG", info: getItemInfo("OAK_LOG") },
+      { type: "SPRUCE_LOG", info: getItemInfo("SPRUCE_LOG") },
+      { type: "PALE_OAK_LOG", info: getItemInfo("PALE_OAK_LOG") },
+      { type: "DARK_OAK_LOG", info: getItemInfo("DARK_OAK_LOG") },
+      { type: "BIRCH_LOG", info: getItemInfo("BIRCH_LOG") },
+      { type: "CHERRY_LOG", info: getItemInfo("CHERRY_LOG") },
+      { type: "JUNGLE_LOG", info: getItemInfo("JUNGLE_LOG") },
+      { type: "MANGROVE_LOG", info: getItemInfo("MANGROVE_LOG") },
+      { type: "ACACIA_LOG", info: getItemInfo("ACACIA_LOG") },
+      { type: "BONE_BLOCK", info: getItemInfo("BONE_BLOCK") },
+      { type: "STONE", info: getItemInfo("STONE") },
+      { type: "DIRT", info: getItemInfo("DIRT") },
+      { type: "COBBLED_DEEPSLATE", info: getItemInfo("COBBLED_DEEPSLATE") },
     ]
   },
   {
     name: "Art",
     icon: "fa-solid fa-palette",
     items: [
-      { type: "PAINTING", icon: "fa-solid fa-image" },
-      { type: "PALETTE", icon: "fa-solid fa-palette" },
-      { type: "CAMERA_PICTURE", icon: "fa-solid fa-photo-film" },
-      { type: "CAMERA", icon: "fa-solid fa-camera" },
-      { type: "WRITTEN_BOOK", picture: "https://minecraft.wiki/images/Written_Book_JE2_BE2.gif?c6510" },
-      { type: "CUSTOM_MUSIC_DISC", icon: "fa-solid fa-record-vinyl" },
-      { type: "LUA_FISH_MUSIC_BOOK", icon: "fa-solid fa-file-audio" },
-      { type: "FILLED_MAP", icon: "fa-solid fa-map" },
-      { type: "PLAYER_HEAD", picture: "https://minecraft.wiki/images/Player_Head_%28S%29_JE2.png?6f81f" }
+      { type: "PAINTING", info: getItemInfo("PAINTING") },
+      { type: "PALETTE", info: getItemInfo("PALETTE") },
+      { type: "CAMERA_PICTURE", info: getItemInfo("CAMERA_PICTURE") },
+      { type: "CAMERA", info: getItemInfo("CAMERA") },
+      { type: "WRITTEN_BOOK", info: getItemInfo("WRITTEN_BOOK") },
+      { type: "CUSTOM_MUSIC_DISC", info: getItemInfo("CUSTOM_MUSIC_DISC") },
+      { type: "LUA_FISH_MUSIC_BOOK", info: getItemInfo("LUA_FISH_MUSIC_BOOK") },
+      { type: "FILLED_MAP", info: getItemInfo("FILLED_MAP") },
+      { type: "PLAYER_HEAD", info: getItemInfo("PLAYER_HEAD") },
     ]
   }
 ] as Category[];
@@ -99,6 +99,7 @@ const categoryItems = computed(() => {
       .reverse()
       .map(i => ({
         type: i,
+        info: getItemInfo(i)
       })) as Item[];
   }
 
@@ -150,11 +151,11 @@ function selectCategory(name: string) {
           class="item-button" :title="formatItemType(item.type).toLocaleLowerCase()">
 
           <!-- Item icon/picture -->
-          <div v-if="item.icon" class="text-xl">
-            <font-awesome-icon :icon="item.icon" />
+          <div v-if="item.info?.icon" class="text-xl">
+            <font-awesome-icon :icon="item.info.icon" />
           </div>
-          <div v-else-if="item.picture">
-            <img :src="item.picture" class="w-6 h-6" />
+          <div v-else-if="item.info?.picture">
+            <img :src="item.info.picture" class="w-6 h-6" />
           </div>
 
           <!-- Item name -->
diff --git a/src/models/item-info.ts b/src/models/item-info.ts
index f3e3077..b61edb4 100644
--- a/src/models/item-info.ts
+++ b/src/models/item-info.ts
@@ -1,10 +1,10 @@
 export interface ItemInfo {
-  itemType: string;
-  displayName: string;
   description?: string;
   moreInfoLink?: string;
   hideWikiLink?: boolean;
   shopCaveats?: string;
+  icon?: string | null;
+  picture?: string | null;
 }
 
 const itemInfo = {} as { [itemType: string]: ItemInfo };
@@ -14,89 +14,110 @@ export function getItemInfo(itemType?: string): ItemInfo | null {
   return itemInfo[itemType] ?? null;
 }
 
-// Item info
+// CUSTOM ITEMS
 itemInfo["ENCHANTED_BOOK"] = {
-  itemType: "ENCHANTED_BOOK",
-  displayName: "Enchanted Books",
   description: "A book with one or more enchantments, used to enchant other items.",
+  picture: "https://minecraft.wiki/images/Enchanted_Book.gif?b21c4"
 };
 itemInfo["POTION"] = {
-  itemType: "POTION",
-  displayName: "Potions",
   description: "A regular potion with a status effect that you have to drink.",
+  picture: "https://minecraft.wiki/images/Water_Bottle_JE2_BE2.png?acae5",
 };
 itemInfo["SPLASH_POTION"] = {
-  itemType: "SPLASH_POTION",
-  displayName: "Splash Potions",
   description: "A throwable potion with a status effect.",
+  picture: "https://minecraft.wiki/images/Splash_Water_Bottle_JE2_BE2.png?7a92d",
 };
 itemInfo["LINGERING_POTION"] = {
-  itemType: "LINGERING_POTION",
-  displayName: "Lingering Potions",
   description: "A throwable potion which creates a cloud with a status effect.",
+  picture: "https://minecraft.wiki/images/Lingering_Water_Bottle_JE2_BE2.png?ed26b",
 };
 itemInfo["CUSTOM_MUSIC_DISC"] = {
-  itemType: "CUSTOM_MUSIC_DISC",
-  displayName: "Custom Music Discs",
   description: "Music discs with custom songs. They may sometimes be shown as music disc 11.",
-  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/custom-music-discs"
+  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/custom-music-discs",
+  icon: "fa-solid fa-record-vinyl"
 };
 itemInfo["LUA_FISH_MUSIC_BOOK"] = {
-  itemType: "LUA_FISH_MUSIC_BOOK",
-  displayName: "Custom Music Books",
   description: "Written books that can be used on the Lua_Fish record player to play music.",
   hideWikiLink: true,
+  icon: "fa-solid fa-file-audio",
 };
 itemInfo["PAINTING"] = {
-  itemType: "PAINTING",
-  displayName: "Player Paintings",
   description: "Paintings created by the players of the server",
   moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/joy-of-painting",
+  icon: "fa-solid fa-image",
 };
 itemInfo["PALETTE"] = {
-  itemType: "PALETTE",
-  displayName: "Palette",
   description: "Used with a blank canvas to create a painting.",
   moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/joy-of-painting",
+  icon: "fa-solid fa-palette",
 };
 itemInfo["FILLED_MAP"] = {
-  itemType: "FILLED_MAP",
-  displayName: "Map Artwork",
   description: "Maps used to display artwork. Includes regular maps too",
   shopCaveats: "Shop listings will include regular maps as well as map artwork.",
+  icon: "fa-solid fa-map",
 };
 itemInfo["WAYSTONE"] = {
-  itemType: "WAYSTONE",
-  displayName: "Waystones",
   description: "Makes it easier for players to teleport back to a location like a town.",
-  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/waystones"
+  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/waystones",
+  icon: "fa-solid fa-chess-rook"
 };
 itemInfo["WARP_PLATE"] = {
-  itemType: "WARP_PLATE",
-  displayName: "Warp Plates",
   description: "Allows teleporting between two locations by linking two warp plates together.",
-  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/warp-plates"
+  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/warp-plates",
+  icon: "fa-solid fa-layer-group"
 };
 itemInfo["CAMERA"] = {
-  itemType: "CAMERA",
-  displayName: "Camera",
   description: "Can be used with gunpowder to take in-game pictures!",
-  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/camerapture"
+  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/camerapture",
+  icon: "fa-solid fa-camera"
 };
 itemInfo["CAMERA_PICTURE"] = {
-  itemType: "CAMERA_PICTURE",
-  displayName: "Camera Picture",
   description: "Pictures taken using the in-game camera",
-  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/camerapture"
+  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/camerapture",
+  icon: "fa-solid fa-photo-film"
 };
 itemInfo["PLAYER_HEAD"] = {
-  itemType: "PLAYER_HEAD",
-  displayName: "Player Heads",
   description: "Can be used as decoration. Some have additional functionality through Figura.",
+  picture: "https://minecraft.wiki/images/Player_Head_%28S%29_JE2.png?6f81f",
 };
 itemInfo["BEDROCK_DRILL"] = {
-  itemType: "BEDROCK_DRILL",
-  displayName: "Bedrock Drill",
   description: "Destroys blocks of bedrock.",
-  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/fung-tech-bedrock-drill"
+  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/fung-tech-bedrock-drill",
+  icon: "fa-solid fa-trowel",
 };
+
+
+// VANILLA ITEMS
+itemInfo["IRON_INGOT"] = { picture: "https://minecraft.wiki/images/Iron_Ingot_JE3_BE2.png?849cb" };
+itemInfo["IRON_BLOCK"] = { picture: "https://minecraft.wiki/images/Block_of_Iron_JE4_BE3.png?18948" };
+itemInfo["GOLD_INGOT"] = { picture: "https://minecraft.wiki/images/Gold_Ingot_JE4_BE2.png?80cd6" };
+itemInfo["GOLD_BLOCK"] = { picture: "https://minecraft.wiki/images/Block_of_Gold_JE6_BE3.png?09478" };
+itemInfo["NETHERITE_INGOT"] = { picture: "https://minecraft.wiki/images/Netherite_Ingot_JE1_BE2.png?79364" };
+itemInfo["EMERALD"] = { picture: "https://minecraft.wiki/images/Emerald_JE3_BE3.png?4c5f3" };
+itemInfo["EMERALD_BLOCK"] = { picture: "https://minecraft.wiki/images/Block_of_Emerald_JE4_BE3.png?d5a3c" };
+itemInfo["RAW_COPPER_BLOCK"] = { picture: "https://minecraft.wiki/images/Block_of_Raw_Copper_JE2_BE2.png?a4e9a" };
+itemInfo["GUNPOWDER"] = { picture: "https://minecraft.wiki/images/Gunpowder_JE2_BE2.png?c4145" };
+itemInfo["HEAVY_CORE"] = { picture: "https://minecraft.wiki/images/Heavy_Core_JE1_BE1.png?57df9" };
+itemInfo["SHULKER_SHELL"] = { picture: "https://minecraft.wiki/images/Shulker_Shell_JE2_BE2.png?f3027" };
+itemInfo["TRIAL_KEY"] = { picture: "https://minecraft.wiki/images/Trial_Key_JE2_BE2.png?a203a" };
+itemInfo["OMINOUS_TRIAL_KEY"] = { picture: "https://minecraft.wiki/images/Ominous_Trial_Key_JE1_BE1.png?56dd6" };
+itemInfo["NETHER_STAR"] = { picture: "https://minecraft.wiki/images/Nether_Star.gif?fb01f" };
+itemInfo["BEACON"] = { picture: "https://minecraft.wiki/images/Beacon_JE6_BE2.png?684bf" };
+itemInfo["ELYTRA"] = { picture: "https://minecraft.wiki/images/Elytra_%28item%29_JE1_BE1.png?8f01d" };
+itemInfo["TOTEM_OF_UNDYING"] = { picture: "https://minecraft.wiki/images/Totem_of_Undying_JE2_BE2.png?d56eb" };
+itemInfo["OAK_LOG"] = { picture: "https://minecraft.wiki/images/Oak_Log_%28UD%29_JE8_BE3.png" };
+itemInfo["SPRUCE_LOG"] = { picture: "https://minecraft.wiki/images/Spruce_Log_(UD)_JE8_BE4.png" };
+itemInfo["PALE_OAK_LOG"] = { picture: "https://minecraft.wiki/images/Pale_Oak_Log_(UD)_JE1_BE1.png" };
+itemInfo["DARK_OAK_LOG"] = { picture: "https://minecraft.wiki/images/Dark_Oak_Log_(UD)_JE9_BE4.png" };
+itemInfo["BIRCH_LOG"] = { picture: "https://minecraft.wiki/images/Birch_Log_(UD)_JE8_BE4.png" };
+itemInfo["CHERRY_LOG"] = { picture: "https://minecraft.wiki/images/Cherry_Log_(UD)_JE1_BE1.png" };
+itemInfo["JUNGLE_LOG"] = { picture: "https://minecraft.wiki/images/Jungle_Log_(UD)_JE9_BE4.png" };
+itemInfo["MANGROVE_LOG"] = { picture: "https://minecraft.wiki/images/Mangrove_Log_(UD)_JE1_BE1.png" };
+itemInfo["ACACIA_LOG"] = { picture: "https://minecraft.wiki/images/Acacia_Log_(UD)_JE8_BE3.png" };
+itemInfo["BONE_BLOCK"] = { picture: "https://minecraft.wiki/images/Bone_Block_%28UD%29_JE2_BE2.png?21f6b" };
+itemInfo["STONE"] = { picture: "https://minecraft.wiki/images/Stone_JE5_BE3.png?5780c" };
+itemInfo["DIRT"] = { picture: "https://minecraft.wiki/images/Dirt_JE2_BE2.png?438ac" };
+itemInfo["COBBLED_DEEPSLATE"] = { picture: "https://minecraft.wiki/images/Cobbled_Deepslate.png?86523" };
+itemInfo["WRITTEN_BOOK"] = { picture: "https://minecraft.wiki/images/Written_Book_JE2_BE2.gif?c6510" };
+
+

From 5e98dc7dcf7ba3e2cbad8f11a3a4a11e5f644f14 Mon Sep 17 00:00:00 2001
From: Michael Hawkins <BadgerCode@users.noreply.github.com>
Date: Fri, 27 Mar 2026 17:54:37 +0000
Subject: [PATCH 7/8] Show item picture on overview page

---
 src/components/ItemTypeCategories.vue |   2 +-
 src/components/ItemTypeOverview.vue   | 134 ++++++++++++--------------
 2 files changed, 62 insertions(+), 74 deletions(-)

diff --git a/src/components/ItemTypeCategories.vue b/src/components/ItemTypeCategories.vue
index 94d4835..94f7d94 100644
--- a/src/components/ItemTypeCategories.vue
+++ b/src/components/ItemTypeCategories.vue
@@ -155,7 +155,7 @@ function selectCategory(name: string) {
             <font-awesome-icon :icon="item.info.icon" />
           </div>
           <div v-else-if="item.info?.picture">
-            <img :src="item.info.picture" class="w-6 h-6" />
+            <img :src="item.info.picture" class="size-6" />
           </div>
 
           <!-- Item name -->
diff --git a/src/components/ItemTypeOverview.vue b/src/components/ItemTypeOverview.vue
index be6288c..033b95f 100644
--- a/src/components/ItemTypeOverview.vue
+++ b/src/components/ItemTypeOverview.vue
@@ -147,10 +147,10 @@ async function loadEnchantments(): Promise<DropdownOption[]> {
   return uniqueItems
     .map(
       (i: string) =>
-        ({
-          text: formatEnchantment(i),
-          value: i,
-        } as DropdownOption)
+      ({
+        text: formatEnchantment(i),
+        value: i,
+      } as DropdownOption)
     )
     .sort((a, b) => a.text.localeCompare(b.text));
 }
@@ -177,10 +177,10 @@ async function loadPotions(): Promise<DropdownOption[]> {
   return uniqueItems
     .map(
       (i: string) =>
-        ({
-          text: formatPotionEffect(i),
-          value: i,
-        } as DropdownOption)
+      ({
+        text: formatPotionEffect(i),
+        value: i,
+      } as DropdownOption)
     )
     .sort((a, b) => a.text.localeCompare(b.text));
 }
@@ -254,42 +254,59 @@ function getWikiLink() {
   <div class="flex flex-col gap-8">
     <div class="mb-2 flex flex-col gap-4">
       <div class="flex flex-row items-center justify-center">
-        <ItemTypeSearch
-          @selection="
-            (itemType) => {
-              if (itemType) $router.push({ name: 'itemSales', params: { itemType: itemType } });
-            }
-          ">
+        <ItemTypeSearch @selection="
+          (itemType) => {
+            if (itemType) $router.push({ name: 'itemSales', params: { itemType: itemType } });
+          }
+        ">
         </ItemTypeSearch>
       </div>
     </div>
 
     <!-- Item info -->
     <div class="flex flex-col gap-4">
-      <div class="flex flex-col">
-        <!-- Item type and description -->
-        <h1 class="text-3xl font-bold capitalize">{{ formatItemType(itemType)?.toLocaleLowerCase() }}</h1>
-        <p class="text-gray-300" v-if="itemInfo?.description">{{ itemInfo.description }}</p>
-
-        <!-- Specific item type info -->
-        <p class="text-gray-300" v-if="numUndiscoveredMusicDiscs > 0">
-          {{ numUndiscoveredMusicDiscs }} custom discs have not been sold yet (possibly undiscovered).
-        </p>
+      <div class="flex flex-row justify-between gap-4 items-center">
+        <!-- Item Info -->
+        <div class="flex flex-col">
+          <!-- Item type -->
+          <h1 class="text-3xl font-bold capitalize">{{ formatItemType(itemType)?.toLocaleLowerCase() }}</h1>
 
-        <!-- More info -->
-        <p class="text-xs" v-if="itemInfo?.moreInfoLink">
-          <a :href="itemInfo.moreInfoLink" class="hyperlink" target="_blank">More info</a>
-        </p>
-        <p class="text-xs" v-else-if="!itemInfo?.hideWikiLink">
-          <a :href="getWikiLink()" class="hyperlink" target="_blank">Minecraft Wiki</a>
-        </p>
+
+
+          <!-- Description -->
+          <p class="text-gray-300" v-if="itemInfo?.description">{{ itemInfo.description }}</p>
+
+          <!-- Specific item type info -->
+          <p class="text-gray-300" v-if="numUndiscoveredMusicDiscs > 0">
+            {{ numUndiscoveredMusicDiscs }} custom discs have not been sold yet (possibly undiscovered).
+          </p>
+
+          <!-- More info -->
+          <p class="text-xs" v-if="itemInfo?.moreInfoLink">
+            <a :href="itemInfo.moreInfoLink" class="hyperlink" target="_blank">More info</a>
+          </p>
+          <p class="text-xs" v-else-if="!itemInfo?.hideWikiLink">
+            <a :href="getWikiLink()" class="hyperlink" target="_blank">Minecraft Wiki</a>
+          </p>
+        </div>
+
+        <!-- Item icon/picture -->
+        <div>
+          <div v-if="itemInfo?.icon" class="text-5xl">
+            <font-awesome-icon :icon="itemInfo.icon" />
+          </div>
+          <div v-else-if="itemInfo?.picture" class="size-[48px]">
+            <img :src="itemInfo.picture" />
+          </div>
+        </div>
       </div>
 
       <!-- Villager trades -->
       <div class="flex flex-col" v-if="villagerTrades.length > 0">
         <h2 class="text-xl font-bold capitalize">Villager Trade</h2>
         <p class="text-gray-300" v-for="villagerTrade in villagerTrades">
-          {{ villagerTrade.villager }}: {{ villagerTrade.price }} {{ villagerTrade.currency }} for {{ villagerTrade.quantity }}
+          {{ villagerTrade.villager }}: {{ villagerTrade.price }} {{ villagerTrade.currency }} for {{
+            villagerTrade.quantity }}
           {{ villagerTrade.itemType }} {{ villagerTrade.extraInfo ? `(${villagerTrade.extraInfo})` : "" }}
         </p>
         <p class="text-gray-300 text-xs">
@@ -307,31 +324,17 @@ function getWikiLink() {
         </div>
 
         <div class="flex flex-row flex-wrap gap-1 items-end">
-          <DropdownFilter
-            v-if="enchantments.length > 0"
-            :placeholder="'Enchantments'"
-            :icon="'fa-solid fa-wand-sparkles'"
-            :options="enchantments"
-            :single-selection="true"
+          <DropdownFilter v-if="enchantments.length > 0" :placeholder="'Enchantments'"
+            :icon="'fa-solid fa-wand-sparkles'" :options="enchantments" :single-selection="true"
             v-model="enchantmentFilter">
           </DropdownFilter>
 
-          <DropdownFilter
-            v-if="potionEffects.length > 0"
-            :placeholder="'Potion Effect'"
-            :icon="'fa-solid fa-flask'"
-            :options="potionEffects"
-            :single-selection="true"
-            v-model="potionEffectFilter">
+          <DropdownFilter v-if="potionEffects.length > 0" :placeholder="'Potion Effect'" :icon="'fa-solid fa-flask'"
+            :options="potionEffects" :single-selection="true" v-model="potionEffectFilter">
           </DropdownFilter>
 
-          <DropdownFilter
-            v-if="customDiscs.length > 0"
-            :placeholder="'Custom Discs'"
-            :icon="'fa-solid fa-record-vinyl'"
-            :options="customDiscs"
-            :single-selection="true"
-            v-model="customDiscFilter">
+          <DropdownFilter v-if="customDiscs.length > 0" :placeholder="'Custom Discs'" :icon="'fa-solid fa-record-vinyl'"
+            :options="customDiscs" :single-selection="true" v-model="customDiscFilter">
           </DropdownFilter>
 
           <SearchBox :placeholder="'Item Name'" v-model="nameFilter"></SearchBox>
@@ -356,39 +359,24 @@ function getWikiLink() {
         </div>
 
         <div class="flex flex-row flex-wrap gap-1 items-end">
-          <DropdownFilter
-            v-if="enchantments.length > 0"
-            :placeholder="'Enchantments'"
-            :icon="'fa-solid fa-wand-sparkles'"
-            :options="enchantments"
-            :single-selection="true"
+          <DropdownFilter v-if="enchantments.length > 0" :placeholder="'Enchantments'"
+            :icon="'fa-solid fa-wand-sparkles'" :options="enchantments" :single-selection="true"
             v-model="enchantmentFilter">
           </DropdownFilter>
 
-          <DropdownFilter
-            v-if="potionEffects.length > 0"
-            :placeholder="'Potion Effect'"
-            :icon="'fa-solid fa-flask'"
-            :options="potionEffects"
-            :single-selection="true"
-            v-model="potionEffectFilter">
+          <DropdownFilter v-if="potionEffects.length > 0" :placeholder="'Potion Effect'" :icon="'fa-solid fa-flask'"
+            :options="potionEffects" :single-selection="true" v-model="potionEffectFilter">
           </DropdownFilter>
 
-          <DropdownFilter
-            v-if="customDiscs.length > 0"
-            :placeholder="'Custom Discs'"
-            :icon="'fa-solid fa-record-vinyl'"
-            :options="customDiscs"
-            :single-selection="true"
-            v-model="customDiscFilter">
+          <DropdownFilter v-if="customDiscs.length > 0" :placeholder="'Custom Discs'" :icon="'fa-solid fa-record-vinyl'"
+            :options="customDiscs" :single-selection="true" v-model="customDiscFilter">
           </DropdownFilter>
 
           <SearchBox :placeholder="'Item Name'" v-model="nameFilter"></SearchBox>
         </div>
       </div>
 
-      <div
-        v-if="itemInfo?.shopCaveats"
+      <div v-if="itemInfo?.shopCaveats"
         class="p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300"
         role="alert">
         {{ itemInfo.shopCaveats }}

From 99a227f93bbc3bd1332fcd0df7e52bd506544833 Mon Sep 17 00:00:00 2001
From: Michael Hawkins <BadgerCode@users.noreply.github.com>
Date: Fri, 27 Mar 2026 17:55:35 +0000
Subject: [PATCH 8/8] Fix

---
 src/components/ItemTypeCategories.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ItemTypeCategories.vue b/src/components/ItemTypeCategories.vue
index 94f7d94..3cf863b 100644
--- a/src/components/ItemTypeCategories.vue
+++ b/src/components/ItemTypeCategories.vue
@@ -146,7 +146,6 @@ function selectCategory(name: string) {
 
       <!-- Item types -->
       <div class="flex flex-row flex-wrap gap-1 content-start justify-center max-h-48 h-auto overflow-x-scroll">
-        <!-- TODO: Router link -->
         <RouterLink v-for="item in categoryItems" :to="{ name: 'itemSales', params: { itemType: item.type } }"
           class="item-button" :title="formatItemType(item.type).toLocaleLowerCase()">