feat: google calendar integration, calendar tab, redesign home/devices tabs

components/Sidebar.tsx

@@ -1,19 +1,19 @@
 'use client'
 
-import { Home, LayoutGrid, Thermometer, Settings } from 'lucide-react'
+import { Home, Cpu, CalendarDays, Settings } from 'lucide-react'
 
-type Tab = 'home' | 'rooms' | 'sensors' | 'settings'
+type Tab = 'home' | 'devices' | 'calendar' | 'settings'
 
 interface SidebarProps {
   active: Tab
   onChange: (tab: Tab) => void
 }
 
-const navItems: { id: Tab; icon: any }[] = [
-  { id: 'home', icon: Home },
-  { id: 'rooms', icon: LayoutGrid },
-  { id: 'sensors', icon: Thermometer },
-  { id: 'settings', icon: Settings },
+const navItems: { id: Tab; icon: any; label: string }[] = [
+  { id: 'home', icon: Home, label: 'Главная' },
+  { id: 'devices', icon: Cpu, label: 'Устройства' },
+  { id: 'calendar', icon: CalendarDays, label: 'Календарь' },
+  { id: 'settings', icon: Settings, label: 'Настройки' },
 ]
 
 export default function Sidebar({ active, onChange }: SidebarProps) {
@@ -56,12 +56,13 @@ export default function Sidebar({ active, onChange }: SidebarProps) {
       </div>
 
       {/* Nav items */}
-      {navItems.map(({ id, icon: Icon }) => {
+      {navItems.map(({ id, icon: Icon, label }) => {
         const isActive = active === id
         return (
           <button
             key={id}
             onClick={() => onChange(id)}
+            title={label}
             style={{
               width: 48,
               height: 48,