Adds streets, cleans up various small things in the source list and equipment list

src/components/Equipment.module.css

@@ -7,7 +7,7 @@
 
 .itemList {
   display: grid;
-  grid-template-columns: 1fr 10em 5em;
+  grid-template-columns: 5em 10em 2em 1fr;
 }
 
 .gridItem {
@@ -20,19 +20,3 @@
   background-color: #666;
   padding: 4px 8px;
 }
-
-.item {
-  grid-column: 1;
-}
-
-.quality {
-  grid-column: 2;
-}
-
-.bis {
-  grid-column: 3;
-}
-
-.actions {
-  grid-column: 4;
-}

src/components/Equipment.tsx

@@ -57,8 +57,10 @@ const Slot = ({ slot, onUnequip }: SlotProps) => {
             const isBis = state.bisList.includes(item.id);
             return (
               <>
-                <div className={`${styles.gridItem} ${styles.item}`}>
-                  <ItemLink item={item} />
+                <div className={`${styles.gridItem} ${styles.actions}`}>
+                  {equiped && (
+                    <button onClick={() => onUnequip(item)}>X</button>
+                  )}
                 </div>
                 <div className={`${styles.gridItem} ${styles.quality}`}>
                   <QualitySelector
@@ -79,10 +81,8 @@ const Slot = ({ slot, onUnequip }: SlotProps) => {
                     }
                   />
                 </div>
-                <div className={`${styles.gridItem} ${styles.actions}`}>
-                  {equiped && (
-                    <button onClick={() => onUnequip(item)}>X</button>
-                  )}
+                <div className={`${styles.gridItem} ${styles.item}`}>
+                  <ItemLink item={item} />
                 </div>
               </>
             );

src/components/SourceList.module.css

@@ -8,6 +8,17 @@
   grid-column: 1 / span 4;
 }
 
+.itemRow {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
 .visibleQuality {
   font-weight: bold;
 }
+
+.bisCount {
+  color: #ff6327;
+}

src/components/SourceList.tsx

@@ -93,7 +93,9 @@ const SourceInfo = ({ source, items }: SourceInfoProps) => {
           onClick={() => toggleIsOpen(quality)}
         >
           {upgrades[quality].length}{" "}
-          {numBiS[quality] > 0 && `(${numBiS[quality]})`}
+          {numBiS[quality] > 0 && (
+            <span className={styles.bisCount}>({numBiS[quality]})</span>
+          )}
         </div>
       ))}
       {QualitiesInGrid.map((quality) => {
@@ -103,7 +105,7 @@ const SourceInfo = ({ source, items }: SourceInfoProps) => {
         return (
           <div className={styles.itemList} key={quality}>
             {upgrades[quality].map((upgrade) => (
-              <div>
+              <div className={styles.itemRow}>
                 <ItemLink item={upgrade.item} />{" "}
                 <TagList
                   tags={[

src/index.css

@@ -37,15 +37,15 @@ h1 {
 }
 
 button {
-  border-radius: 8px;
+  border-radius: 4px;
   border: 1px solid transparent;
-  padding: 0.6em 1.2em;
+  padding: 4px 8px;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
   background-color: #1a1a1a;
   cursor: pointer;
-  transition: border-color 0.25s;
+  transition: border-color 0.1s;
 }
 button:hover {
   border-color: #646cff;

src/lib/drops/manaforge-omega.ts

@@ -154,7 +154,7 @@ export const ManaforgeOmega = [
   {
     id: 237552,
     name: "Deathbound Shoulderpads",
-    slot: "shoulder",
+    slot: "shoulders",
     source: "manaforge omega",
   },
   {

src/lib/state.ts

@@ -60,15 +60,13 @@ export const reducer = (state: State, action: Action): State => {
     case "changeQuality":
       return {
         ...state,
-        equipedItems: state.equipedItems.map((item) => {
-          if (item.id === action.itemId) {
-            return {
-              id: item.id,
-              quality: action.quality,
-            };
-          }
-          return item;
-        }),
+        equipedItems: [
+          ...state.equipedItems.filter((item) => item.id !== action.itemId),
+          {
+            id: action.itemId,
+            quality: action.quality,
+          },
+        ],
       };
     case "setBis":
       return {