Merge pull request #3745 from liam-hq/ux/adjustable-panel-width

✨ Implement adjustable panel width for SessionDetailPage

Author: junkisai

.changeset/hot-moles-watch.md

@@ -0,0 +1,5 @@
+---
+"@liam-hq/erd-core": patch
+---
+
+🚸 Disable ERD resize handle when the left pane is closed to prevent accidental resizing and layout conflicts

.claude/commands/commit.md

@@ -23,13 +23,65 @@ Examples of bad commit messages:
 - 🐛 Fixed a typo in the welcome message
 - 📝 Updated README.md with new installation instructions
 
-## Common Gitmoji Reference
+## Gitmoji Reference
 
-- ✨ New feature
-- 🐛 Bug fix
-- 💥 Breaking change
-- ⚡ Performance improvement
-- ♻️ Code improvement
-- 🔧 Configuration/options
+### Frequently Used
+- 🚸 `:children_crossing:` - Improve user experience / usability
+- ✨ `:sparkles:` - Introduce new features
+- 🐛 `:bug:` - Fix a bug
+- ♻️ `:recycle:` - Refactor code
+- ⚡ `:zap:` - Improve performance
+- 💄 `:lipstick:` - Add or update the UI and style files
+- 🎨 `:art:` - Improve structure / format of the code
+- 📝 `:memo:` - Add or update documentation
+- 🔧 `:wrench:` - Add or update configuration files
 
-For the complete list, visit [gitmoji.dev](https://gitmoji.dev/).
+### Testing & Quality
+- ✅ `:white_check_mark:` - Add, update, or pass tests
+- 🚨 `:rotating_light:` - Fix compiler / linter warnings
+- 🧪 `:test_tube:` - Add a failing test
+- 🥅 `:goal_net:` - Catch errors
+
+### Critical Changes
+- 🚑 `:ambulance:` - Critical hotfix
+- 💥 `:boom:` - Introduce breaking changes
+- 🔒 `:lock:` - Fix security or privacy issues
+
+### Dependencies & CI/CD
+- ➕ `:heavy_plus_sign:` - Add a dependency
+- ➖ `:heavy_minus_sign:` - Remove a dependency
+- ⬆️ `:arrow_up:` - Upgrade dependencies
+- ⬇️ `:arrow_down:` - Downgrade dependencies
+- 💚 `:green_heart:` - Fix CI Build
+- 👷 `:construction_worker:` - Add or update CI build system
+
+### Code Management
+- 🔥 `:fire:` - Remove code or files
+- ⚰️ `:coffin:` - Remove dead code
+- 🚚 `:truck:` - Move or rename resources (e.g.: files, paths, routes)
+- ⏪ `:rewind:` - Revert changes
+- 🔀 `:twisted_rightwards_arrows:` - Merge branches
+
+### Work in Progress
+- 🚧 `:construction:` - Work in progress
+- 🩹 `:adhesive_bandage:` - Simple fix for a non-critical issue
+
+### Types & Database
+- 🏷️ `:label:` - Add or update types
+- 🗃️ `:card_file_box:` - Perform database related changes
+
+### Accessibility & i18n
+- ♿ `:wheelchair:` - Improve accessibility
+- 🌐 `:globe_with_meridians:` - Internationalization and localization
+
+### Other Useful
+- 🚀 `:rocket:` - Deploy stuff
+- 🔖 `:bookmark:` - Release / Version tags
+- 📱 `:iphone:` - Work on responsive design
+- 💫 `:dizzy:` - Add or update animations and transitions
+- ✏️ `:pencil2:` - Fix typos
+- 🙈 `:see_no_evil:` - Add or update a .gitignore file
+- 🔊 `:loud_sound:` - Add or update logs
+- 🔇 `:mute:` - Remove logs
+
+For the complete list, run `gitmoji list` or visit [gitmoji.dev](https://gitmoji.dev/).

frontend/apps/app/components/PublicSessionDetailPage/PublicSessionDetailPage.tsx

@@ -5,6 +5,7 @@ import type { ReactElement } from 'react'
 import { safeParse } from 'valibot'
 import { createPublicServerClient } from '../../libs/db/server'
 import { PublicLayout } from '../PublicLayout'
+import { DEFAULT_PANEL_SIZES } from '../SessionDetailPage/constants'
 import { ViewModeProvider } from '../SessionDetailPage/contexts/ViewModeContext'
 import { SessionDetailPageClient } from '../SessionDetailPage/SessionDetailPageClient'
 import { buildPrevSchema } from '../SessionDetailPage/services/buildPrevSchema/server/buildPrevSchema'
@@ -136,6 +137,7 @@ export const PublicSessionDetailPage = async ({
           initialIsPublic={true}
           initialArtifact={initialArtifact}
           senderName="Guest"
+          panelSizes={DEFAULT_PANEL_SIZES}
         />
       </ViewModeProvider>
     </PublicLayout>

frontend/apps/app/components/SessionDetailPage/SessionDetailPage.tsx

@@ -8,10 +8,12 @@ import { type Artifact, artifactSchema } from '@liam-hq/artifact'
 import type { Schema } from '@liam-hq/schema'
 import { schemaSchema } from '@liam-hq/schema'
 import { err, ok, type Result } from 'neverthrow'
+import { cookies } from 'next/headers'
 import type { FC } from 'react'
 import { safeParse } from 'valibot'
 import { checkPublicShareStatus } from '../../features/public-share/actions'
 import { createClient } from '../../libs/db/server'
+import { DEFAULT_PANEL_SIZES, PANEL_LAYOUT_COOKIE_NAME } from './constants'
 import { ViewModeProvider } from './contexts/ViewModeContext'
 import { SessionDetailPageClient } from './SessionDetailPageClient'
 import { getBuildingSchema } from './services/buildingSchema/server/getBuildingSchema'
@@ -148,6 +150,17 @@ export const SessionDetailPage: FC<Props> = async ({
   const { isPublic: initialIsPublic } =
     await checkPublicShareStatus(designSessionId)
 
+  const cookieStore = await cookies()
+  const layoutCookie = cookieStore.get(PANEL_LAYOUT_COOKIE_NAME)
+  const panelSizes = (() => {
+    if (!layoutCookie) return DEFAULT_PANEL_SIZES
+    try {
+      const sizes = JSON.parse(layoutCookie.value)
+      if (Array.isArray(sizes) && sizes.length >= 2) return sizes
+    } catch {}
+    return DEFAULT_PANEL_SIZES
+  })()
+
   return (
     <ViewModeProvider mode="private">
       <SessionDetailPageClient
@@ -162,6 +175,7 @@ export const SessionDetailPage: FC<Props> = async ({
         initialIsPublic={initialIsPublic}
         initialWorkflowError={workflowError}
         senderName={senderName}
+        panelSizes={panelSizes}
       />
     </ViewModeProvider>
   )

frontend/apps/app/components/SessionDetailPage/SessionDetailPage.module.css renamed to frontend/apps/app/components/SessionDetailPage/SessionDetailPageClient.module.css

@@ -6,28 +6,32 @@
 }
 
 .columns {
-  display: grid;
   width: 100%;
   height: 100%;
-  transition: grid-template-columns var(--default-animation-duration)
-    var(--default-timing-function);
-}
-
-.oneColumn {
-  grid-template-columns: 46rem 0fr;
-  justify-content: center;
-}
-
-.twoColumns {
-  grid-template-columns: 23rem 1fr;
 }
 
 .outputSection {
   min-height: 0;
   border-left: solid 1px var(--pane-border);
   overflow: hidden;
+  height: 100%;
 }
 
 .chatSection {
   min-height: 0;
+  height: 100%;
+}
+
+.columns[data-layout='one-column'] .chatSection {
+  display: flex;
+  justify-content: center;
+}
+
+.chatWrapper {
+  width: auto;
+  height: 100%;
+}
+
+.columns[data-layout='one-column'] .chatWrapper {
+  width: 46rem;
 }

frontend/apps/app/components/SessionDetailPage/SessionDetailPageClient.tsx

@@ -6,20 +6,28 @@ import {
 } from '@langchain/core/messages'
 import type { Artifact } from '@liam-hq/artifact'
 import type { Schema } from '@liam-hq/schema'
-import clsx from 'clsx'
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@liam-hq/ui'
 import { type FC, useCallback, useEffect, useRef, useState } from 'react'
+import { setCookieJson } from '../../libs/utils/cookie'
 import { Chat } from './components/Chat'
 import { Output } from './components/Output'
 import { useRealtimeArtifact } from './components/Output/components/Artifact/hooks/useRealtimeArtifact'
 import { OUTPUT_TABS, type OutputTabValue } from './components/Output/constants'
+import { PANEL_LAYOUT_COOKIE_NAME } from './constants'
 import { useRealtimeVersionsWithSchema } from './hooks/useRealtimeVersionsWithSchema'
 import { useStream } from './hooks/useStream'
 import { SQL_REVIEW_COMMENTS } from './mock'
-import styles from './SessionDetailPage.module.css'
+import styles from './SessionDetailPageClient.module.css'
 import type { Version } from './types'
 import { determineWorkflowAction } from './utils/determineWorkflowAction'
 import { getWorkflowInProgress } from './utils/workflowStorage'
 
+const COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+
 type Props = {
   buildingSchemaId: string
   designSessionId: string
@@ -32,6 +40,7 @@ type Props = {
   initialWorkflowError?: string | null
   initialArtifact: Artifact | null
   senderName: string
+  panelSizes: number[]
 }
 
 // Determine the initial active tab based on available data
@@ -71,10 +80,12 @@ export const SessionDetailPageClient: FC<Props> = ({
   initialWorkflowError,
   initialArtifact,
   senderName,
+  panelSizes,
 }) => {
   const [activeTab, setActiveTab] = useState<OutputTabValue | undefined>(
     determineInitialTab(initialArtifact, initialVersions),
   )
+  const [isResizing, setIsResizing] = useState(false)
 
   const {
     versions,
@@ -123,6 +134,13 @@ export const SessionDetailPageClient: FC<Props> = ({
     senderName,
   })
 
+  const handleLayoutChange = useCallback((sizes: number[]) => {
+    setCookieJson(PANEL_LAYOUT_COOKIE_NAME, sizes, {
+      path: '/',
+      maxAge: COOKIE_MAX_AGE,
+    })
+  }, [])
+
   // Combine streaming error with workflow errors
   const combinedError = error || initialWorkflowError
   // Track if initial workflow has been triggered to prevent multiple executions
@@ -165,47 +183,66 @@ export const SessionDetailPageClient: FC<Props> = ({
 
   return (
     <div className={styles.container}>
-      <div
-        className={clsx(
-          styles.columns,
-          shouldShowOutputSection ? styles.twoColumns : styles.oneColumn,
-        )}
+      <ResizablePanelGroup
+        direction="horizontal"
+        className={styles.columns}
+        data-layout={shouldShowOutputSection ? 'two-columns' : 'one-column'}
+        onLayout={handleLayoutChange}
       >
-        <div className={styles.chatSection}>
-          <Chat
-            schemaData={displayedSchema}
-            messages={messages}
-            isWorkflowRunning={isStreaming}
-            onSendMessage={(content: string) =>
-              start({
-                userInput: content,
-                designSessionId,
-                isDeepModelingEnabled,
-              })
-            }
-            onNavigate={setActiveTab}
-            error={combinedError}
-          />
-        </div>
-        {shouldShowOutputSection && (
-          <div className={styles.outputSection}>
-            <Output
-              designSessionId={designSessionId}
-              schema={displayedSchema}
-              prevSchema={prevSchema}
-              sqlReviewComments={SQL_REVIEW_COMMENTS}
-              versions={versions}
-              selectedVersion={selectedVersion}
-              onSelectedVersionChange={handleVersionChange}
-              activeTab={activeTab}
-              onTabChange={setActiveTab}
-              initialIsPublic={initialIsPublic}
-              artifact={artifact}
-              artifactError={artifactError}
-            />
+        <ResizablePanel
+          defaultSize={panelSizes[0]}
+          minSize={22}
+          maxSize={70}
+          isResizing={isResizing}
+        >
+          <div className={styles.chatSection}>
+            <div className={styles.chatWrapper}>
+              <Chat
+                schemaData={displayedSchema}
+                messages={messages}
+                isWorkflowRunning={isStreaming}
+                onSendMessage={(content: string) =>
+                  start({
+                    userInput: content,
+                    designSessionId,
+                    isDeepModelingEnabled,
+                  })
+                }
+                onNavigate={setActiveTab}
+                error={combinedError}
+              />
+            </div>
           </div>
+        </ResizablePanel>
+        {shouldShowOutputSection && (
+          <>
+            <ResizableHandle onDragging={(e) => setIsResizing(e)} />
+            <ResizablePanel
+              defaultSize={panelSizes[1]}
+              minSize={30}
+              maxSize={78}
+              isResizing={isResizing}
+            >
+              <div className={styles.outputSection}>
+                <Output
+                  designSessionId={designSessionId}
+                  schema={displayedSchema}
+                  prevSchema={prevSchema}
+                  sqlReviewComments={SQL_REVIEW_COMMENTS}
+                  versions={versions}
+                  selectedVersion={selectedVersion}
+                  onSelectedVersionChange={handleVersionChange}
+                  activeTab={activeTab}
+                  onTabChange={setActiveTab}
+                  initialIsPublic={initialIsPublic}
+                  artifact={artifact}
+                  artifactError={artifactError}
+                />
+              </div>
+            </ResizablePanel>
+          </>
         )}
-      </div>
+      </ResizablePanelGroup>
     </div>
   )
 }

frontend/apps/app/components/SessionDetailPage/constants.ts

@@ -0,0 +1,2 @@
+export const PANEL_LAYOUT_COOKIE_NAME = 'session-panels:layout'
+export const DEFAULT_PANEL_SIZES = [22, 78]

frontend/apps/app/eslint-suppressions.json

@@ -59,11 +59,6 @@
       "count": 3
     }
   },
-  "components/SessionDetailPage/SessionDetailPage.module.css": {
-    "css-modules-kit/no-unused-class-names": {
-      "count": 6
-    }
-  },
   "features/sessions/components/GitHubSessionForm/ProjectsDropdown/ProjectsDropdown.module.css": {
     "css-modules-kit/no-unused-class-names": {
       "count": 5
@@ -94,4 +89,4 @@
       "count": 1
     }
   }
-}
+}