second commit

src/components/Palette.tsx

@@ -1,5 +1,5 @@
 import { useState, type PointerEvent, type ReactNode } from "react";
-import type { FurnitureType } from "../types";
+import { FURNITURE_TYPES, TYPE_LABEL, type FurnitureType } from "../types";
 
 const CLICK_THRESHOLD_PX = 5;
 
@@ -112,12 +112,30 @@ function Tile({ type, remaining, onStartDrag, onOpenMenu }: TileProps) {
       >
         {remaining}
       </span>
-      {type === "chair" ? <ChairIcon /> : <TableIcon />}
-      {type === "chair" ? "Chair" : "Table"}
+      {(() => {
+        const Icon = TYPE_ICON[type];
+        return <Icon />;
+      })()}
+      {TYPE_LABEL[type]}
     </div>
   );
 }
 
+export function ScreenIcon({ size = 36 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 36 36">
+      <rect x="2" y="14" width="32" height="8" rx="2" fill="#2d3748" stroke="#3b3b3b" strokeWidth="1.5" />
+      <rect x="4" y="16" width="28" height="4" fill="#63b3ed" />
+    </svg>
+  );
+}
+
+export const TYPE_ICON: Record<FurnitureType, (p: { size?: number }) => React.JSX.Element> = {
+  chair: ChairIcon,
+  table: TableIcon,
+  screen: ScreenIcon,
+};
+
 export function Palette({ remaining, onStartDrag, onOpenMenu, panel }: Props) {
   const [width, setWidth] = useState(264);
 
@@ -151,7 +169,7 @@ export function Palette({ remaining, onStartDrag, onOpenMenu, panel }: Props) {
         background: "#ececec",
       }}
     >
-      {panel ?? (["chair", "table"] as const).map((type) => (
+      {panel ?? FURNITURE_TYPES.map((type) => (
         <Tile key={type} type={type} remaining={remaining[type]} onStartDrag={onStartDrag} onOpenMenu={onOpenMenu} />
       ))}
       <div