From fb159b054aa0902db33411c879b519d18b349edc Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 14 Aug 2025 14:17:08 +0000
Subject: [PATCH 1/3] feat: add tablet layout with icons

---
 app/globals.css     | 50 +++++++++++++++++++++++++++++++++++++++++++++
 components/chat.tsx | 47 +++++++++++++++++++++++++++++-------------
 2 files changed, 83 insertions(+), 14 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 32dec0fe..4c1ef698 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -224,3 +224,53 @@
 .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;
+  }
+}
diff --git a/components/chat.tsx b/components/chat.tsx
index 34e92244..dfd59ce7 100644
--- a/components/chat.tsx
+++ b/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 (

From f93151b74511216731bbbcac8f8b0413d439d1d9 Mon Sep 17 00:00:00 2001
From: EreQ <info.ericmail@gmail.com>
Date: Thu, 14 Aug 2025 17:41:32 +0300
Subject: [PATCH 2/3] Update components/chat.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 components/chat.tsx | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/components/chat.tsx b/components/chat.tsx
index dfd59ce7..16802ef5 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -101,22 +101,20 @@ export function Chat({ id }: ChatProps) {
   // 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 className="tablet-layout-container">
+        <div className="tablet-map-and-icons-section">
+          <div className="tablet-map-section">
+            {activeView ? <SettingsView /> : <Mapbox />}
           </div>
-          <div className="tablet-chat-section">
-            <ChatMessages messages={messages} />
-            <ChatPanel messages={messages} input={input} setInput={setInput} />
+          <div className="tablet-icons-bar">
+            <MobileIconsBar />
           </div>
         </div>
-      </MapDataProvider>
+        <div className="tablet-chat-section">
+          <ChatMessages messages={messages} />
+          <ChatPanel messages={messages} input={input} setInput={setInput} />
+        </div>
+      </div>
     );
   }
   

From ac8178b4b2c2c077c2880f6f23df534f60e58990 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 14 Aug 2025 16:36:21 +0000
Subject: [PATCH 3/3] fix: adjust tablet icon bar styling

The icons in the tablet layout were overflowing and not all visible. This change adjusts the CSS for the tablet icon bar to ensure all icons are visible and correctly aligned.
---
 app/globals.css     |  4 ++++
 components/chat.tsx | 24 +++++++++++++-----------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 4c1ef698..a62102d6 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -273,4 +273,8 @@
     padding: 12px;
     overflow-y: auto;
   }
+
+  .tablet-icons-bar .mobile-icons-bar-content {
+    justify-content: flex-start;
+  }
 }
diff --git a/components/chat.tsx b/components/chat.tsx
index 16802ef5..dfd59ce7 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -101,20 +101,22 @@ export function Chat({ id }: ChatProps) {
   // Tablet layout
   if (isTablet) {
     return (
-      <div className="tablet-layout-container">
-        <div className="tablet-map-and-icons-section">
-          <div className="tablet-map-section">
-            {activeView ? <SettingsView /> : <Mapbox />}
+      <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-icons-bar">
-            <MobileIconsBar />
+          <div className="tablet-chat-section">
+            <ChatMessages messages={messages} />
+            <ChatPanel messages={messages} input={input} setInput={setInput} />
           </div>
         </div>
-        <div className="tablet-chat-section">
-          <ChatMessages messages={messages} />
-          <ChatPanel messages={messages} input={input} setInput={setInput} />
-        </div>
-      </div>
+      </MapDataProvider>
     );
   }