Add Resize the room sidepanel using a hoverable tool

.changeset/add_resize-side-panel.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add Resize the room sidepanel using a hoverable tool

src/app/components/nav/styles.css.ts

@@ -9,6 +9,7 @@ export const NavCategory = style([
   DefaultReset,
   {
     position: 'relative',
+    overflow: 'scroll',
   },
 ]);
 

src/app/components/page/style.css.ts

@@ -6,6 +6,9 @@ import { DefaultReset, color, config, toRem } from 'folds';
 export const PageNav = recipe({
   variants: {
     size: {
+      '100%': {
+        width: '100%',
+      },
       '400': {
         width: toRem(256),
       },
@@ -15,7 +18,7 @@ export const PageNav = recipe({
     },
   },
   defaultVariants: {
-    size: '400',
+    size: '100%',
   },
 });
 export type PageNavVariants = RecipeVariants<typeof PageNav>;

src/app/features/room/CallChatView.tsx

@@ -1,10 +1,15 @@
 import { useSetAtom } from 'jotai';
 import { useParams } from 'react-router-dom';
-import { Box, Text, TooltipProvider, Tooltip, Icon, Icons, IconButton, toRem } from 'folds';
+import { Box, Text, TooltipProvider, Tooltip, Icon, Icons, IconButton } from 'folds';
 import { Page, PageHeader } from '../../components/page';
 import { callChatAtom } from '../../state/callEmbed';
 import { RoomView } from './RoomView';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { SidebarResizer } from '$pages/client/sidebar/SidebarResizer';
+import { useSetting } from '$state/hooks/settings';
+import { settingsAtom } from '$state/settings';
+import { mobileOrTablet } from '$utils/user-agent';
+import { useState, useEffect } from 'react';
 
 export function CallChatView() {
   const { eventId } = useParams();
@@ -13,44 +18,59 @@ export function CallChatView() {
 
   const handleClose = () => setChat(false);
 
+  const [threadSidebarWidth, setThreadSidebarWidth] = useSetting(settingsAtom, 'vcmsgSidebarWidth');
+  const [curWidth, setCurWidth] = useState(threadSidebarWidth);
+  useEffect(() => {
+    setCurWidth(threadSidebarWidth);
+  }, [threadSidebarWidth]);
   return (
-    <Page
-      style={{
-        width: screenSize === ScreenSize.Desktop ? toRem(399) : '100%',
-        flexShrink: 0,
-        flexGrow: 0,
-      }}
-    >
-      <PageHeader>
-        <Box grow="Yes" alignItems="Center" gap="200">
-          <Box grow="Yes">
-            <Text size="H5" truncate>
-              Chat
-            </Text>
-          </Box>
-          <Box shrink="No" alignItems="Center">
-            <TooltipProvider
-              position="Bottom"
-              align="End"
-              offset={4}
-              tooltip={
-                <Tooltip>
-                  <Text>Close</Text>
-                </Tooltip>
-              }
-            >
-              {(triggerRef) => (
-                <IconButton ref={triggerRef} variant="Surface" onClick={handleClose}>
-                  <Icon src={Icons.Cross} />
-                </IconButton>
-              )}
-            </TooltipProvider>
+    <>
+      {!mobileOrTablet() && (
+        <SidebarResizer
+          setCurWidth={setCurWidth}
+          sidebarWidth={threadSidebarWidth}
+          setSidebarWidth={setThreadSidebarWidth}
+          rightSided
+        />
+      )}
+      <Page
+        style={{
+          width: screenSize === ScreenSize.Desktop ? curWidth : '100%',
+          flexShrink: 0,
+          flexGrow: 0,
+        }}
+      >
+        <PageHeader>
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Box grow="Yes">
+              <Text size="H5" truncate>
+                Chat
+              </Text>
+            </Box>
+            <Box shrink="No" alignItems="Center">
+              <TooltipProvider
+                position="Bottom"
+                align="End"
+                offset={4}
+                tooltip={
+                  <Tooltip>
+                    <Text>Close</Text>
+                  </Tooltip>
+                }
+              >
+                {(triggerRef) => (
+                  <IconButton ref={triggerRef} variant="Surface" onClick={handleClose}>
+                    <Icon src={Icons.Cross} />
+                  </IconButton>
+                )}
+              </TooltipProvider>
+            </Box>
           </Box>
+        </PageHeader>
+        <Box grow="Yes" direction="Column">
+          <RoomView eventId={eventId} />
         </Box>
-      </PageHeader>
-      <Box grow="Yes" direction="Column">
-        <RoomView eventId={eventId} />
-      </Box>
-    </Page>
+      </Page>
+    </>
   );
 }