From ed9c5265ea507af89aa68aad2112adf3dfc609fe Mon Sep 17 00:00:00 2001
From: azidancorp <azidancorp@gmail.com>
Date: Sat, 20 Dec 2025 10:27:08 +0000
Subject: [PATCH 1/2] Improve side panel drawer UX

- Make session sidebar click-to-toggle and off-canvas on narrow widths\n- Add drawer top bar with logo + close button\n- Improve header responsiveness to prevent overflow\n- Keep IndependentPanel full-height even with few messages
---
 src/components/ConversationCard/index.jsx |  30 ++++-
 src/pages/IndependentPanel/App.jsx        | 139 ++++++++++++---------
 src/pages/IndependentPanel/styles.scss    | 141 ++++++++++++++++++++--
 3 files changed, 245 insertions(+), 65 deletions(-)

diff --git a/src/components/ConversationCard/index.jsx b/src/components/ConversationCard/index.jsx
index 440bfffe1..8e85ce2f2 100644
--- a/src/components/ConversationCard/index.jsx
+++ b/src/components/ConversationCard/index.jsx
@@ -347,7 +347,11 @@ function ConversationCard(props) {
           className="gpt-util-group"
           style={{
             padding: '15px 0 15px 15px',
-            ...(props.notClampSize ? {} : { flexGrow: isSafari() ? 0 : 1 }),
+            ...(props.pageMode
+              ? { flexGrow: 1, minWidth: 0 }
+              : props.notClampSize
+              ? {}
+              : { flexGrow: isSafari() ? 0 : 1 }),
             ...(isSafari() ? { maxWidth: '200px' } : {}),
           }}
         >
@@ -372,11 +376,28 @@ function ConversationCard(props) {
             >
               <Pin size={16} />
             </span>
+          ) : props.onToggleSidebar ? (
+            <button
+              type="button"
+              className="gpt-util-icon gpt-menu-toggle"
+              title="Toggle sidebar"
+              aria-label="Toggle sidebar"
+              aria-expanded={Boolean(props.sidebarOpen)}
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                props.onToggleSidebar()
+              }}
+            >
+              ☰
+            </button>
           ) : (
             <img src={logo} style="user-select:none;width:20px;height:20px;" />
           )}
           <select
-            style={props.notClampSize ? {} : { width: 0, flexGrow: 1 }}
+            style={
+              props.pageMode || !props.notClampSize ? { width: 0, flexGrow: 1, minWidth: 0 } : {}
+            }
             className="normal-button"
             required
             onChange={(e) => {
@@ -425,7 +446,8 @@ function ConversationCard(props) {
           style={{
             padding: '15px 15px 15px 0',
             justifyContent: 'flex-end',
-            flexGrow: props.draggable && !completeDraggable ? 0 : 1,
+            flexGrow: props.pageMode ? 0 : props.draggable && !completeDraggable ? 0 : 1,
+            flexShrink: 0,
           }}
         >
           {!config.disableWebModeHistory && session && session.conversationId && (
@@ -622,6 +644,8 @@ ConversationCard.propTypes = {
   notClampSize: PropTypes.bool,
   pageMode: PropTypes.bool,
   waitForTrigger: PropTypes.bool,
+  onToggleSidebar: PropTypes.func,
+  sidebarOpen: PropTypes.bool,
 }
 
 export default memo(ConversationCard)
diff --git a/src/pages/IndependentPanel/App.jsx b/src/pages/IndependentPanel/App.jsx
index 5552b6106..b2a1d76cf 100644
--- a/src/pages/IndependentPanel/App.jsx
+++ b/src/pages/IndependentPanel/App.jsx
@@ -17,6 +17,8 @@ import { openUrl } from '../../utils/index.mjs'
 import Browser from 'webextension-polyfill'
 import FileSaver from 'file-saver'
 
+const logo = Browser.runtime.getURL('logo.png')
+
 function App() {
   const { t } = useTranslation()
   const [collapsed, setCollapsed] = useState(true)
@@ -85,6 +87,16 @@ function App() {
     setCollapsed(!collapsed)
   }
 
+  const closeSidebar = () => {
+    setCollapsed(true)
+  }
+
+  const closeSidebarIfOverlay = () => {
+    if (window.matchMedia('(max-width: 600px)').matches) {
+      closeSidebar()
+    }
+  }
+
   const createNewChat = async () => {
     const { session, currentSessions } = await createSession()
     setSessions(currentSessions)
@@ -105,62 +117,77 @@ function App() {
 
   return (
     <div className="IndependentPanel">
-      <div className="chat-container">
+      <div className={`chat-container ${collapsed ? 'sidebar-collapsed' : 'sidebar-open'}`}>
+        {!collapsed && (
+          <div className="chat-sidebar-backdrop" role="presentation" onClick={closeSidebar} />
+        )}
         <div className={`chat-sidebar ${collapsed ? 'collapsed' : ''}`}>
-          <div className="chat-sidebar-button-group">
-            <button className="normal-button" onClick={toggleSidebar}>
-              {collapsed ? t('Pin') : t('Unpin')}
-            </button>
-            <button className="normal-button" onClick={createNewChat}>
-              {t('New Chat')}
-            </button>
-            <button className="normal-button" onClick={exportConversations}>
-              {t('Export')}
-            </button>
-          </div>
-          <hr />
-          <div className="chat-list">
-            {sessions.map(
-              (
-                session,
-                index, // TODO editable session name
-              ) => (
-                <button
-                  key={index}
-                  className={`normal-button ${sessionId === session.sessionId ? 'active' : ''}`}
-                  style="display: flex; align-items: center; justify-content: space-between;"
-                  onClick={() => {
-                    setSessionIdSafe(session.sessionId)
-                  }}
-                >
-                  {session.sessionName}
-                  <span className="gpt-util-group">
-                    <DeleteButton
-                      size={14}
-                      text={t('Delete Conversation')}
-                      onConfirm={() =>
-                        deleteSession(session.sessionId).then((sessions) => {
-                          setSessions(sessions)
-                          setSessionIdSafe(sessions[0].sessionId)
-                        })
-                      }
-                    />
-                  </span>
-                </button>
-              ),
-            )}
-          </div>
-          <hr />
-          <div className="chat-sidebar-button-group">
-            <ConfirmButton text={t('Clear conversations')} onConfirm={clearConversations} />
-            <button
-              className="normal-button"
-              onClick={() => {
-                openUrl(Browser.runtime.getURL('popup.html'))
-              }}
-            >
-              {t('Settings')}
-            </button>
+          <div className="chat-sidebar-content">
+            <div className="chat-sidebar-topbar">
+              <img className="chat-sidebar-logo" src={logo} alt="ChatGPTBox" />
+              <button
+                type="button"
+                className="gpt-util-icon gpt-menu-toggle chat-sidebar-close"
+                aria-label="Close sidebar"
+                onClick={closeSidebar}
+              >
+                ✕
+              </button>
+            </div>
+            <div className="chat-sidebar-button-group">
+              <button className="normal-button" onClick={createNewChat}>
+                {t('New Chat')}
+              </button>
+              <button className="normal-button" onClick={exportConversations}>
+                {t('Export')}
+              </button>
+            </div>
+            <hr />
+            <div className="chat-list">
+              {sessions.map(
+                (
+                  session,
+                  index, // TODO editable session name
+                ) => (
+                  <button
+                    key={index}
+                    className={`normal-button ${sessionId === session.sessionId ? 'active' : ''}`}
+                    style="display: flex; align-items: center; justify-content: space-between;"
+                    onClick={() => {
+                      setSessionIdSafe(session.sessionId)
+                      closeSidebarIfOverlay()
+                    }}
+                  >
+                    {session.sessionName}
+                    <span className="gpt-util-group">
+                      <DeleteButton
+                        size={14}
+                        text={t('Delete Conversation')}
+                        onConfirm={() =>
+                          deleteSession(session.sessionId).then((sessions) => {
+                            setSessions(sessions)
+                            setSessionIdSafe(sessions[0].sessionId)
+                          })
+                        }
+                      />
+                    </span>
+                  </button>
+                ),
+              )}
+            </div>
+            <hr />
+            <div className="chat-sidebar-button-group">
+              <ConfirmButton text={t('Clear conversations')} onConfirm={clearConversations} />
+              <button
+                className="normal-button"
+                onClick={() => {
+                  openUrl(Browser.runtime.getURL('popup.html'))
+                  closeSidebarIfOverlay()
+                }}
+              >
+                {t('Settings')}
+              </button>
+            </div>
           </div>
         </div>
         <div className="chat-content">
@@ -170,6 +197,8 @@ function App() {
                 session={currentSession}
                 notClampSize={true}
                 pageMode={true}
+                sidebarOpen={!collapsed}
+                onToggleSidebar={toggleSidebar}
                 onUpdate={(port, session, cData) => {
                   currentPort.current = port
                   if (cData.length > 0 && cData[cData.length - 1].done) {
diff --git a/src/pages/IndependentPanel/styles.scss b/src/pages/IndependentPanel/styles.scss
index d7d76870b..a4cce3b6d 100644
--- a/src/pages/IndependentPanel/styles.scss
+++ b/src/pages/IndependentPanel/styles.scss
@@ -37,10 +37,39 @@
 }
 
 .IndependentPanel {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  min-height: 100vh;
+  background-color: var(--theme-color);
+
+  .gpt-menu-toggle {
+    width: 28px;
+    height: 28px;
+    border: 1px solid var(--theme-border-color);
+    background-color: var(--theme-color);
+    color: var(--font-color);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    line-height: 1;
+  }
+
   .chat-container {
     display: flex;
     width: 100%;
-    height: 100%;
+    flex: 1 1 auto;
+    flex-grow: 1;
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .chat-sidebar-backdrop {
+    display: none;
   }
 
   .chat-sidebar {
@@ -51,6 +80,7 @@
     background-color: var(--theme-color);
     transition: width 0.3s, min-width 0.3s;
     padding: 10px;
+    flex-shrink: 0;
 
     ::-webkit-scrollbar {
       background-color: var(--theme-color);
@@ -67,14 +97,45 @@
   }
 
   .chat-sidebar.collapsed {
-    min-width: 60px;
-    width: 60px;
+    min-width: 0;
+    width: 0;
+    padding: 0;
   }
 
-  .chat-sidebar:hover,
-  .chat-sidebar:not(.collapsed) {
-    min-width: 250px;
-    width: 250px;
+  .chat-sidebar-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: 15px;
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  .chat-sidebar-topbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin: -10px -10px 0;
+    height: 78px;
+    padding: 0 15px;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--theme-border-color);
+  }
+
+  .chat-sidebar-logo {
+    width: 20px;
+    height: 20px;
+    flex: 0 0 auto;
+  }
+
+  .chat-sidebar-topbar .gpt-menu-toggle {
+    width: 28px;
+    height: 28px;
+  }
+
+  .chat-sidebar.collapsed .chat-sidebar-content {
+    display: none;
   }
 
   .chat-sidebar-button-group {
@@ -100,6 +161,72 @@
     flex-grow: 1;
     border: 1px solid var(--theme-border-color);
     background-color: var(--theme-color);
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .chat-content .chatgptbox-container {
+    min-width: 0;
+    height: 100%;
+  }
+
+  .chat-content .gpt-inner {
+    min-width: 0;
+    height: 100%;
+  }
+
+  .chat-content .gpt-header {
+    flex-wrap: wrap;
+    row-gap: 8px;
+  }
+
+  .chat-content .gpt-header > .gpt-util-group {
+    min-width: 0;
+  }
+
+  .chat-content .gpt-header > .gpt-util-group:first-child select.normal-button {
+    width: 0;
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  @media screen and (max-width: 600px) {
+    .chat-container.sidebar-open .chat-sidebar-backdrop {
+      display: block;
+      position: absolute;
+      inset: 0;
+      background-color: rgba(0, 0, 0, 0.35);
+      z-index: 10;
+    }
+
+    .chat-sidebar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: min(280px, 85vw);
+      min-width: 0;
+      transform: translateX(0);
+      transition: transform 0.3s;
+      visibility: visible;
+      z-index: 11;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+    }
+
+    .chat-sidebar.collapsed {
+      width: min(280px, 85vw);
+      min-width: 0;
+      transform: translateX(-105%);
+      padding: 10px;
+      visibility: hidden;
+      pointer-events: none;
+      transition: transform 0.3s, visibility 0s linear 0.3s;
+    }
+
+    .chat-sidebar.collapsed .chat-sidebar-content {
+      display: flex;
+    }
   }
 
   .normal-button {

From 56b416b0ad73af2146752e092794e4af5544ae81 Mon Sep 17 00:00:00 2001
From: azidancorp <azidancorp@gmail.com>
Date: Sat, 20 Dec 2025 10:58:29 +0000
Subject: [PATCH 2/2] Auto-open drawer on wide IndependentPanel

- Auto-open drawer by default on wide standalone IndependentPanel tabs\n- Keep side panel closed by default via tabs.getCurrent() detection\n- Add ChatGPTBox label in drawer header
---
 src/pages/IndependentPanel/App.jsx     | 24 +++++++++++++++++++++++-
 src/pages/IndependentPanel/styles.scss | 17 ++++++++++++++++-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/pages/IndependentPanel/App.jsx b/src/pages/IndependentPanel/App.jsx
index b2a1d76cf..6387042fb 100644
--- a/src/pages/IndependentPanel/App.jsx
+++ b/src/pages/IndependentPanel/App.jsx
@@ -21,6 +21,7 @@ const logo = Browser.runtime.getURL('logo.png')
 
 function App() {
   const { t } = useTranslation()
+  const hasUserToggledRef = useRef(false)
   const [collapsed, setCollapsed] = useState(true)
   const config = useConfig(null, false)
   const [sessions, setSessions] = useState([])
@@ -66,6 +67,22 @@ function App() {
     })()
   }, [])
 
+  useEffect(() => {
+    // Default open only on the standalone IndependentPanel (tab/window) when wide enough.
+    // Keep the existing side-panel behavior (closed by default).
+    void (async () => {
+      if (hasUserToggledRef.current) return
+      if (!window.matchMedia('(min-width: 900px)').matches) return
+      try {
+        // In a regular tab, this returns the current tab object; in the side panel it returns null.
+        const tab = await Browser.tabs.getCurrent()
+        if (!hasUserToggledRef.current && tab) setCollapsed(false)
+      } catch (e) {
+        // If we can't tell, keep current (closed) default.
+      }
+    })()
+  }, [])
+
   useEffect(() => {
     if ('sessions' in config && config['sessions']) setSessions(config['sessions'])
   }, [config])
@@ -84,10 +101,12 @@ function App() {
   }, [sessionId])
 
   const toggleSidebar = () => {
+    hasUserToggledRef.current = true
     setCollapsed(!collapsed)
   }
 
   const closeSidebar = () => {
+    hasUserToggledRef.current = true
     setCollapsed(true)
   }
 
@@ -124,7 +143,10 @@ function App() {
         <div className={`chat-sidebar ${collapsed ? 'collapsed' : ''}`}>
           <div className="chat-sidebar-content">
             <div className="chat-sidebar-topbar">
-              <img className="chat-sidebar-logo" src={logo} alt="ChatGPTBox" />
+              <div className="chat-sidebar-brand-group">
+                <img className="chat-sidebar-logo" src={logo} alt="ChatGPTBox" />
+                <div className="chat-sidebar-brand">ChatGPTBox</div>
+              </div>
               <button
                 type="button"
                 className="gpt-util-icon gpt-menu-toggle chat-sidebar-close"
diff --git a/src/pages/IndependentPanel/styles.scss b/src/pages/IndependentPanel/styles.scss
index a4cce3b6d..d376c137b 100644
--- a/src/pages/IndependentPanel/styles.scss
+++ b/src/pages/IndependentPanel/styles.scss
@@ -118,17 +118,32 @@
     gap: 10px;
     margin: -10px -10px 0;
     height: 78px;
-    padding: 0 15px;
+    padding: 15px;
     box-sizing: border-box;
     border-bottom: 1px solid var(--theme-border-color);
   }
 
+  .chat-sidebar-brand-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
   .chat-sidebar-logo {
     width: 20px;
     height: 20px;
     flex: 0 0 auto;
   }
 
+  .chat-sidebar-brand {
+    color: var(--font-color);
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .chat-sidebar-topbar .gpt-menu-toggle {
     width: 28px;
     height: 28px;