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

components/Sidebar.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import { Home, LayoutGrid, Thermometer, Settings } from 'lucide-react'
+
+type Tab = 'home' | 'rooms' | 'sensors' | 'settings'
+
+interface SidebarProps {
+  active: Tab
+  onChange: (tab: Tab) => void
+}
+
+const navItems: { id: Tab; icon: React.ComponentType<{ size?: number; color?: string }> }[] = [
+  { id: 'home', icon: Home },
+  { id: 'rooms', icon: LayoutGrid },
+  { id: 'sensors', icon: Thermometer },
+  { id: 'settings', icon: Settings },
+]
+
+export default function Sidebar({ active, onChange }: SidebarProps) {
+  return (
+    <nav
+      style={{
+        width: 72,
+        minWidth: 72,
+        height: '100dvh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        paddingTop: 20,
+        paddingBottom: 20,
+        background: 'rgba(0,0,0,0.5)',
+        backdropFilter: 'blur(20px)',
+        WebkitBackdropFilter: 'blur(20px)',
+        borderRight: '1px solid rgba(255,255,255,0.05)',
+        gap: 8,
+        flexShrink: 0,
+        zIndex: 10,
+      }}
+    >
+      {/* Logo */}
+      <div
+        style={{
+          width: 44,
+          height: 44,
+          borderRadius: 14,
+          background: 'linear-gradient(135deg, #00d4ff22, #00d4ff44)',
+          border: '1px solid rgba(0,212,255,0.3)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: 24,
+          flexShrink: 0,
+        }}
+      >
+        <Home size={20} color="#00d4ff" />
+      </div>
+
+      {/* Nav items */}
+      {navItems.map(({ id, icon: Icon }) => {
+        const isActive = active === id
+        return (
+          <button
+            key={id}
+            onClick={() => onChange(id)}
+            style={{
+              width: 48,
+              height: 48,
+              borderRadius: 14,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: isActive ? 'rgba(0,212,255,0.15)' : 'transparent',
+              border: isActive ? '1px solid rgba(0,212,255,0.25)' : '1px solid transparent',
+              transition: 'all 0.2s ease',
+              flexShrink: 0,
+            }}
+          >
+            <Icon size={22} color={isActive ? '#00d4ff' : 'rgba(255,255,255,0.4)'} />
+          </button>
+        )
+      })}
+    </nav>
+  )
+}