From 10a43729c5883e7613029bfc2f2ace22665fc811 Mon Sep 17 00:00:00 2001
From: ginnoir <ginnoir@users.noreply.github.com>
Date: Thu, 11 Jun 2026 22:28:42 -0500
Subject: [PATCH] feat(ui): right rail inventory placeholder and optional event
 log

- RightRail: add Inventory section (placeholder "Items coming soon") between
  Resources and Event Log, matching the existing heading style
- RightRail: gate Event Log section on prefs.showEventLog; add local-state
  collapse toggle with aria-expanded and chevron indicator
- SettingsPanel: add "Show event log" checkbox row bound to prefs.showEventLog
  via setPrefs, matching existing card styling
- PlayPanel: gate mobile EventLog behind prefs.showEventLog for consistency
  with desktop; mobile ResourceBar unchanged
---
 src/ui/PlayPanel.tsx     |  9 ++++++---
 src/ui/RightRail.tsx     | 33 +++++++++++++++++++++++++++++++--
 src/ui/SettingsPanel.tsx | 17 +++++++++++++++++
 3 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/src/ui/PlayPanel.tsx b/src/ui/PlayPanel.tsx
index a151c12..bff01aa 100644
--- a/src/ui/PlayPanel.tsx
+++ b/src/ui/PlayPanel.tsx
@@ -5,6 +5,7 @@ import { EventLog } from './EventLog';
 import { ResourceBar } from './ResourceBar';
 
 export function PlayPanel() {
+  const showEventLog = useGameStore((s) => s.prefs.showEventLog);
   const columns = useGameStore((s) => s.actionColumns).filter(
     (col) => col.groups.length > 0 && col.groups.some((g) => g.actions.length > 0),
   );
@@ -55,9 +56,11 @@ export function PlayPanel() {
         </div>
       ) : null}
 
-      <div className="block md:hidden">
-        <EventLog />
-      </div>
+      {showEventLog && (
+        <div className="block md:hidden">
+          <EventLog />
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/ui/RightRail.tsx b/src/ui/RightRail.tsx
index 453fc04..30da995 100644
--- a/src/ui/RightRail.tsx
+++ b/src/ui/RightRail.tsx
@@ -1,18 +1,47 @@
+import { useState } from 'react';
+import { useGameStore } from '../state/store';
 import { EventLog } from './EventLog';
 import { ResourceBar } from './ResourceBar';
 
 export function RightRail() {
+  const showEventLog = useGameStore((s) => s.prefs.showEventLog);
+  const [logOpen, setLogOpen] = useState(true);
+
   return (
     <div className="flex h-full flex-col gap-6">
+      {/* Resources */}
       <div>
         <h2 className="mb-3 font-semibold text-slate-400 text-xs tracking-wider uppercase">
           Resources
         </h2>
         <ResourceBar />
       </div>
-      <div className="flex-1 border-slate-900 border-t pt-4">
-        <EventLog />
+
+      {/* Inventory placeholder */}
+      <div className="border-slate-900 border-t pt-4">
+        <h2 className="mb-3 font-semibold text-slate-400 text-xs tracking-wider uppercase">
+          Inventory
+        </h2>
+        <p className="text-slate-600 text-xs">Items coming soon.</p>
       </div>
+
+      {/* Event log — gated by pref, collapsible via local state */}
+      {showEventLog && (
+        <div className="flex-1 border-slate-900 border-t pt-4">
+          <button
+            type="button"
+            aria-expanded={logOpen}
+            onClick={() => setLogOpen((prev) => !prev)}
+            className="mb-3 flex w-full items-center justify-between font-semibold text-slate-400 text-xs tracking-wider uppercase hover:text-slate-300"
+          >
+            <span>Event Log</span>
+            <span aria-hidden="true" className="text-slate-500">
+              {logOpen ? '▾' : '▸'}
+            </span>
+          </button>
+          {logOpen && <EventLog />}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/ui/SettingsPanel.tsx b/src/ui/SettingsPanel.tsx
index 6080a1e..b23a942 100644
--- a/src/ui/SettingsPanel.tsx
+++ b/src/ui/SettingsPanel.tsx
@@ -80,6 +80,23 @@ export function SettingsPanel() {
             })}
           </div>
         </div>
+        {/* Show event log */}
+        <div className="flex flex-col gap-2 rounded-xl border border-slate-800 bg-slate-900/40 p-5">
+          <label className="flex cursor-pointer items-center justify-between gap-4">
+            <div className="flex flex-col">
+              <span className="font-semibold text-slate-200 text-sm">Show event log</span>
+              <span className="text-slate-400 text-xs">
+                Display the scrollable event log in the right rail and on mobile.
+              </span>
+            </div>
+            <input
+              type="checkbox"
+              checked={prefs.showEventLog}
+              onChange={(e) => setPrefs({ showEventLog: e.target.checked })}
+              className="h-4 w-4 cursor-pointer accent-amber-500"
+            />
+          </label>
+        </div>
       </div>
     </div>
   );