From d46101b03292e9063c19f4f93afaf1970bc35a66 Mon Sep 17 00:00:00 2001
From: HotelSync <admin@hotelsync.ru>
Date: Mon, 23 Mar 2026 14:04:17 +0300
Subject: [PATCH] fix: compact filters row with dropdowns for floor and
 category

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/RoomsPage.tsx | 103 +++++++++++-----------------------------
 1 file changed, 28 insertions(+), 75 deletions(-)

diff --git a/src/pages/RoomsPage.tsx b/src/pages/RoomsPage.tsx
index 8a8da4d..b4da7b9 100644
--- a/src/pages/RoomsPage.tsx
+++ b/src/pages/RoomsPage.tsx
@@ -171,83 +171,36 @@ export function RoomsPage() {
         ))}
       </div>
 
-      {/* Filters */}
-      <div className="space-y-2">
-        <div className="flex gap-3 flex-wrap">
-          <div className="relative flex-1 min-w-48">
-            <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
-            <input
-              type="text"
-              className="input pl-9"
-              placeholder="Поиск номера..."
-              value={search}
-              onChange={e => setSearch(e.target.value)}
-            />
-          </div>
-          <div className="flex gap-1.5 flex-wrap">
-            <button
-              onClick={() => setFloorFilter('all')}
-              className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
-                floorFilter === 'all'
-                  ? 'bg-brand-600 text-white border-brand-600'
-                  : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600',
-              )}
-            >
-              Все этажи
-            </button>
-            {floors.map(f => (
-              <button
-                key={f}
-                onClick={() => setFloorFilter(f)}
-                className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
-                  floorFilter === f
-                    ? 'bg-brand-600 text-white border-brand-600'
-                    : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600',
-                )}
-              >
-                {f} эт.
-              </button>
-            ))}
-          </div>
+      {/* Filters — one row */}
+      <div className="flex items-center gap-2">
+        <div className="relative flex-1 max-w-xs">
+          <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400" />
+          <input
+            type="text"
+            className="input pl-8 text-sm"
+            placeholder="Поиск номера..."
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+          />
         </div>
-
-        {/* Category filter */}
+        <select
+          className="input text-sm w-36 shrink-0"
+          value={floorFilter === 'all' ? 'all' : String(floorFilter)}
+          onChange={e => setFloorFilter(e.target.value === 'all' ? 'all' : Number(e.target.value))}
+        >
+          <option value="all">Все этажи</option>
+          {floors.map(f => <option key={f} value={f}>{f} этаж</option>)}
+        </select>
         {categories.length > 0 && (
-          <div className="flex gap-1.5 flex-wrap">
-            <button
-              onClick={() => setCategoryFilter('all')}
-              className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
-                categoryFilter === 'all'
-                  ? 'bg-slate-700 text-white border-slate-700 dark:bg-slate-200 dark:text-slate-900 dark:border-slate-200'
-                  : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600',
-              )}
-            >
-              Все категории
-            </button>
-            {categories.map(cat => (
-              <button
-                key={cat.id}
-                onClick={() => setCategoryFilter(cat.id)}
-                className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
-                  categoryFilter === cat.id
-                    ? 'bg-slate-700 text-white border-slate-700 dark:bg-slate-200 dark:text-slate-900 dark:border-slate-200'
-                    : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600',
-                )}
-              >
-                {cat.name}
-              </button>
-            ))}
-            <button
-              onClick={() => setCategoryFilter('')}
-              className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
-                categoryFilter === ''
-                  ? 'bg-slate-700 text-white border-slate-700 dark:bg-slate-200 dark:text-slate-900 dark:border-slate-200'
-                  : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600',
-              )}
-            >
-              Без категории
-            </button>
-          </div>
+          <select
+            className="input text-sm w-44 shrink-0"
+            value={categoryFilter}
+            onChange={e => setCategoryFilter(e.target.value)}
+          >
+            <option value="all">Все категории</option>
+            {categories.map(cat => <option key={cat.id} value={cat.id}>{cat.name}</option>)}
+            <option value="">Без категории</option>
+          </select>
         )}
       </div>