feat: add tablet layout with icons

app/globals.css

@@ -224,3 +224,57 @@
 .mapboxgl-ctrl-group button {
   pointer-events: auto !important;
 }
+
+/* Tablet layout specific styles */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .tablet-layout-container {
+    display: flex;
+    height: 100vh;
+    width: 100%;
+    background-color: hsl(var(--background));
+  }
+
+  .tablet-map-and-icons-section {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+
+  .tablet-map-section {
+    flex-grow: 1;
+    background-color: hsl(var(--secondary));
+    z-index: 10;
+  }
+
+  .tablet-icons-bar {
+    height: 60px;
+    background-color: hsl(var(--background));
+    border-top: 1px solid hsl(var(--border));
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    z-index: 20;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .tablet-icons-bar::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Edge */
+  }
+
+  .tablet-chat-section {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    border-left: 1px solid hsl(var(--border));
+    padding: 12px;
+    overflow-y: auto;
+  }
+
+  .tablet-icons-bar .mobile-icons-bar-content {
+    justify-content: flex-start;
+  }
+}

components/chat.tsx

@@ -22,7 +22,8 @@ export function Chat({ id }: ChatProps) {
   const path = usePathname()
   const [messages] = useUIState()
   const [aiState] = useAIState()
-  const [isMobile, setIsMobile] = useState(false)
+  const [isMobile, setIsMobile] = useState(false);
+  const [isTablet, setIsTablet] = useState(false);
   const { activeView } = useProfileToggle();
   const [input, setInput] = useState('')
   const [showEmptyScreen, setShowEmptyScreen] = useState(false)
@@ -32,20 +33,16 @@ export function Chat({ id }: ChatProps) {
   }, [messages])
 
   useEffect(() => {
-    // Check if device is mobile
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth <= 1024)
-    }
-
-    // Initial check
-    checkMobile()
-
-    // Add event listener for window resize
-    window.addEventListener('resize', checkMobile)
+    const checkDevice = () => {
+      const width = window.innerWidth;
+      setIsMobile(width <= 768);
+      setIsTablet(width > 768 && width <= 1024);
+    };
 
-    // Cleanup
-    return () => window.removeEventListener('resize', checkMobile)
-  }, [])
+    checkDevice();
+    window.addEventListener('resize', checkDevice);
+    return () => window.removeEventListener('resize', checkDevice);
+  }, []);
 
   useEffect(() => {
     if (!path.includes('search') && messages.length === 1) {
@@ -100,6 +97,28 @@ export function Chat({ id }: ChatProps) {
       </MapDataProvider>
     );
   }
+
+  // Tablet layout
+  if (isTablet) {
+    return (
+      <MapDataProvider>
+        <div className="tablet-layout-container">
+          <div className="tablet-map-and-icons-section">
+            <div className="tablet-map-section">
+              {activeView ? <SettingsView /> : <Mapbox />}
+            </div>
+            <div className="tablet-icons-bar">
+              <MobileIconsBar />
+            </div>
+          </div>
+          <div className="tablet-chat-section">
+            <ChatMessages messages={messages} />
+            <ChatPanel messages={messages} input={input} setInput={setInput} />
+          </div>
+        </div>
+      </MapDataProvider>
+    );
+  }
 
   // Desktop layout
   return (