feat: responsive sidebar, client selector and layout with alert/device counts

src/components/layout/SidebarItem.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import Link from 'next/link'
+import { cn } from '@/lib/utils'
+
+export type BadgeType = 'red' | 'blue' | 'green'
+
+export interface SidebarItemProps {
+  label: string
+  href: string
+  icon: React.ReactNode
+  active?: boolean
+  badge?: {
+    type: BadgeType
+    value: string | number
+  }
+  onClick?: () => void
+}
+
+const badgeStyles: Record<BadgeType, string> = {
+  red: 'bg-red-500/90 text-white',
+  blue: 'bg-blue-500/90 text-white',
+  green: 'bg-emerald-500/90 text-white',
+}
+
+export default function SidebarItem({
+  label,
+  href,
+  icon,
+  active,
+  badge,
+  onClick,
+}: SidebarItemProps) {
+  const isPill = badge?.type === 'green' && typeof badge.value === 'string'
+
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      className={cn(
+        'flex items-center gap-3 rounded-lg px-4 py-2.5 transition-all duration-200',
+        active
+          ? 'bg-gradient-to-r from-cyan-600/30 to-blue-600/20 text-white shadow-[0_0_20px_-5px_rgba(6,182,212,0.25)]'
+          : 'text-slate-400 hover:bg-slate-700/50 hover:text-slate-200'
+      )}
+    >
+      <span
+        className={cn(
+          'flex shrink-0',
+          active ? 'text-cyan-300' : 'text-slate-500'
+        )}
+      >
+        {icon}
+      </span>
+      <span className="min-w-0 flex-1 truncate">{label}</span>
+      {badge != null && (
+        <span
+          className={cn(
+            'flex shrink-0 items-center justify-center text-xs font-bold',
+            isPill ? 'rounded-full px-2 py-0.5' : 'h-5 min-w-[1.25rem] rounded-full px-1.5',
+            badgeStyles[badge.type]
+          )}
+        >
+          {badge.value}
+        </span>
+      )}
+    </Link>
+  )
+}