feat: full redesign - sidebar layout, room tabs, device cards

2026-04-22 11:05:41 +00:00
parent 9c01fd235f
commit 311ae1dc4b
17 changed files with 819 additions and 2016 deletions
--- a/components/RoomTabs.tsx
+++ b/components/RoomTabs.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+interface Room {
+  id: string
+  name: string
+  emoji: string
+  deviceCount: number
+}
+
+interface RoomTabsProps {
+  rooms: Room[]
+  active: string
+  onChange: (id: string) => void
+}
+
+export default function RoomTabs({ rooms, active, onChange }: RoomTabsProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: 10,
+        padding: '12px 20px',
+        overflowX: 'auto',
+        flexShrink: 0,
+        WebkitOverflowScrolling: 'touch' as any,
+        scrollbarWidth: 'none',
+        msOverflowStyle: 'none',
+      }}
+    >
+      {rooms.map(room => {
+        const isActive = active === room.id
+        return (
+          <button
+            key={room.id}
+            onClick={() => onChange(room.id)}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: 2,
+              padding: '10px 18px',
+              borderRadius: 14,
+              background: isActive ? 'rgba(0,212,255,0.12)' : 'rgba(255,255,255,0.04)',
+              border: isActive ? '1px solid rgba(0,212,255,0.3)' : '1px solid rgba(255,255,255,0.06)',
+              minWidth: 90,
+              flexShrink: 0,
+              touchAction: 'manipulation',
+              WebkitTapHighlightColor: 'transparent',
+              transition: 'all 0.2s ease',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              <span style={{ fontSize: 18 }}>{room.emoji}</span>
+              <span
+                style={{
+                  fontSize: 14,
+                  fontWeight: isActive ? 600 : 400,
+                  color: isActive ? 'var(--accent)' : 'var(--text-primary)',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {room.name}
+              </span>
+            </div>
+            <span style={{ fontSize: 11, color: 'var(--text-secondary)' }}>
+              {room.deviceCount} {room.deviceCount === 1 ? 'устройство' : room.deviceCount >= 2 && room.deviceCount <= 4 ? 'устройства' : 'устройств'}
+            </span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}