Adds quality selection, all dungeons

src/components/Equipment.tsx

@@ -4,6 +4,7 @@ import { Slots, type Item, type Slot } from "../lib/types";
 import { ItemLink } from "./ItemLink";
 import { ItemTypeahead } from "./ItemTypeahead";
 import styles from "./Equipment.module.css";
+import { QualitySelector } from "./QualitySelector";
 
 export type Props = {
   state: State;
@@ -28,19 +29,37 @@ type SlotProps = {
   onUnequip: (item: Item) => void;
 };
 
-const Slot = ({ state, slot, onUnequip }: SlotProps) => (
-  <>
-    <div className={`${styles.slot} ${styles.gridItem}`}>{slot}</div>
-    <div className={styles.gridItem}>
-      {state.equipedItems
-        .map((item) => ({ ...item, item: ItemsById[item.id] }))
-        .filter((item) => item && item.item.slot === slot)
-        .map((item) => (
-          <div>
-            <ItemLink item={item.item} />({item.quality})
+const Slot = ({ state, slot, onUnequip }: SlotProps) => {
+  const items = state.equipedItems
+    .map((item) => ({ ...item, item: ItemsById[item.id] }))
+    .filter((item) => item && item.item.slot === slot);
+
+  return (
+    <>
+      <div className={`${styles.slot} ${styles.gridItem}`}>{slot}</div>
+      {
+        // Show placeholder if there are no items
+        items.length === 0 && (
+          <>
+            <div className={`${styles.gridItem} ${styles.item}`}></div>
+            <div className={`${styles.gridItem} ${styles.quality}`}></div>
+            <div className={`${styles.gridItem} ${styles.actions}`}></div>
+          </>
+        )
+      }
+      {items.map((item) => (
+        <>
+          <div className={`${styles.gridItem} ${styles.item}`}>
+            <ItemLink item={item.item} />
+          </div>
+          <div className={`${styles.gridItem} ${styles.quality}`}>
+            <QualitySelector item={item} />
+          </div>
+          <div className={`${styles.gridItem} ${styles.actions}`}>
             <button onClick={() => onUnequip(item.item)}>X</button>
           </div>
-        ))}
-    </div>
-  </>
-);
+        </>
+      ))}
+    </>
+  );
+};