From 3fc23eaeccf15e345d998b8adce5fb68f88f23f0 Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Wed, 8 Jul 2026 12:34:22 +0000
Subject: [PATCH] Fix #5 category in search results, rename rooms chip (#6)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- #5: SearchSelect now shows the area/category as a muted right-aligned
  label on every dropdown item — visible at a glance whether a result is
  a Room, Kitchen, Garden etc. Typing the category name already filtered
  correctly; the label makes it clear without needing to read the group header.
  Applies to both the new-task location picker and the asset location picker.
- #6: Rename 'Rooms view' chip to 'Rooms Accessible View' to better convey
  that it shows which rooms staff can actually access right now.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/SearchSelect.tsx | 8 +++++++-
 frontend/src/pages/Summary.tsx           | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/SearchSelect.tsx b/frontend/src/components/SearchSelect.tsx
index 1dc21e3..b966fb2 100644
--- a/frontend/src/components/SearchSelect.tsx
+++ b/frontend/src/components/SearchSelect.tsx
@@ -98,11 +98,17 @@ export default function SearchSelect({ options, value, onChange, placeholder = '
                     padding: '7px 12px', cursor: 'pointer', fontSize: 13.5,
                     background: opt.value === value ? 'var(--warn-bg)' : undefined,
                     color: 'var(--text-dark)',
+                    display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8,
                   }}
                   onMouseEnter={e => (e.currentTarget.style.background = '#f1f5f9')}
                   onMouseLeave={e => (e.currentTarget.style.background = opt.value === value ? 'var(--warn-bg)' : '')}
                 >
-                  {opt.label}
+                  <span>{opt.label}</span>
+                  {opt.group && (
+                    <span style={{ fontSize: 11, color: 'var(--text-mid)', whiteSpace: 'nowrap', flexShrink: 0 }}>
+                      {opt.group}
+                    </span>
+                  )}
                 </div>
               ))}
             </div>
diff --git a/frontend/src/pages/Summary.tsx b/frontend/src/pages/Summary.tsx
index 37ca770..a35a8e5 100644
--- a/frontend/src/pages/Summary.tsx
+++ b/frontend/src/pages/Summary.tsx
@@ -122,13 +122,13 @@ export default function Summary() {
         {roomsCategoryExists && (
           <button
             className={`chip ${roomsView ? 'active' : ''}`}
-            title="Show all rooms tasks — grey indicates an in-house guest right now"
+            title="Show all rooms tasks — greyed tasks have an in-house guest so access may be limited"
             onClick={toggleRoomsView}
           >
             <BedDouble size={13} strokeWidth={1.75} />
             {roomsView
               ? `Rooms (${tasks.length}${freeRoomsCount !== null ? ` • ${freeRoomsCount} free` : ''})`
-              : 'Rooms view'}
+              : 'Rooms Accessible View'}
           </button>
         )}
       </div>