Merge pull request #2619 from navikt/ny/draggable-panel

Resizing av meldingpanel

Author: LudvigHz

package.json

@@ -110,6 +110,7 @@
         "react-hook-form": "^7.54.1",
         "react-modal": "^3.16.3",
         "react-redux": "^7.2.0",
+        "react-resizable-panels": "^2.1.7",
         "redux": "^4.2.1",
         "redux-thunk": "^2.4.2",
         "styled-components": "^6.1.15",

pnpm-lock.yaml

@@ -1,11 +1,17 @@
-import { ChatIcon, MinusIcon } from '@navikt/aksel-icons';
-import { Box, Button, HStack } from '@navikt/ds-react';
+import { ChatIcon, ExpandIcon, MinusIcon, ShrinkIcon } from '@navikt/aksel-icons';
+import { Box, Button, HStack, VStack } from '@navikt/ds-react';
 import { useAtomValue } from 'jotai';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { type ImperativePanelHandle, Panel } from 'react-resizable-panels';
 import { dialogUnderArbeidAtom } from 'src/lib/state/dialog';
 import { SendMelding } from './SendMelding';
 
+const PANEL_SIZE = 30;
+const LARGE_SIZE = 50;
+
 export function LukkbarNyMelding() {
+    const panelRef = useRef<ImperativePanelHandle>(null);
+    const [isLarge, setIsLarge] = useState((panelRef.current?.getSize() ?? PANEL_SIZE) > PANEL_SIZE);
     const [isOpen, setIsOpen] = useState(localStorage.getItem('ny-melding-is-open') !== 'false');
 
     useEffect(() => {
@@ -19,31 +25,56 @@ export function LukkbarNyMelding() {
         }
     }, [oppgave]);
 
+    const onExpand = useCallback(() => {
+        if (!panelRef.current) return;
+
+        setIsLarge(panelRef.current.getSize() > PANEL_SIZE);
+    }, []);
+
+    if (!isOpen) {
+        return (
+            <Box>
+                <Button
+                    type="button"
+                    icon={<ChatIcon title="Skriv ny melding" />}
+                    size="small"
+                    onClick={() => setIsOpen(true)}
+                />
+            </Box>
+        );
+    }
+
     return (
-        <HStack flexGrow="1">
-            {!isOpen && (
-                <Box>
-                    <Button
-                        type="button"
-                        icon={<ChatIcon title="Skriv ny melding" />}
-                        size="small"
-                        onClick={() => setIsOpen(true)}
-                    />
-                </Box>
-            )}
-            {isOpen && (
+        <Panel onResize={onExpand} ref={panelRef} defaultSize={PANEL_SIZE} minSize={20} maxSize={60} order={2}>
+            <VStack height="100%">
                 <SendMelding
                     lukkeKnapp={
-                        <Button
-                            type="button"
-                            icon={<MinusIcon title="Lukk" />}
-                            variant="tertiary"
-                            size="small"
-                            onClick={() => setIsOpen(false)}
-                        />
+                        <HStack gap="2">
+                            <Button
+                                aria-hidden
+                                type="button"
+                                icon={isLarge ? <ShrinkIcon title="Minimer" /> : <ExpandIcon title="Ekspander" />}
+                                variant="tertiary"
+                                size="small"
+                                onClick={() => {
+                                    if (!panelRef.current) return;
+
+                                    const newSize = isLarge ? PANEL_SIZE : LARGE_SIZE;
+                                    panelRef.current.resize(newSize);
+                                }}
+                            />
+                            <Button
+                                aria-hidden
+                                type="button"
+                                icon={<MinusIcon title="Lukk" />}
+                                variant="tertiary"
+                                size="small"
+                                onClick={() => setIsOpen(false)}
+                            />
+                        </HStack>
                     }
                 />
-            )}
-        </HStack>
+            </VStack>
+        </Panel>
     );
 }

src/components/melding/LukkbarNyMelding.tsx

@@ -45,7 +45,7 @@ const SendMeldingContent = ({ lukkeKnapp }: Props) => {
     );
 
     return (
-        <Card padding="2" maxWidth="30vw" minWidth="24em">
+        <Card padding="2">
             <HStack justify="space-between">
                 <Heading level="1" size="medium">
                     {oppgave ? continueText : 'Send ny dialog'}

src/components/melding/SendMelding.tsx

@@ -2,6 +2,7 @@ import { Box, HStack, VStack } from '@navikt/ds-react';
 import { Navigate, Outlet, createLazyFileRoute } from '@tanstack/react-router';
 import { useAtomValue } from 'jotai';
 import { Suspense } from 'react';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import { PersonLinje } from 'src/components/PersonLinje';
 import { PersonSidebarMenu } from 'src/components/PersonSidebar';
 import { LukkbarNyMelding } from 'src/components/melding/LukkbarNyMelding';
@@ -27,19 +28,20 @@ function PersonLayout() {
             <VStack>
                 <PersonSidebarMenu />
             </VStack>
-            <HStack gap="2" flexGrow="1" className="flex-nowrap">
-                <VStack gap="2" flexGrow="1">
-                    <Box flexGrow="0">
-                        <PersonLinje />
-                    </Box>
-                    <Suspense>
-                        <Outlet />
-                    </Suspense>
-                </VStack>
-                <VStack flexGrow="0">
-                    <LukkbarNyMelding />
-                </VStack>
-            </HStack>
+            <PanelGroup direction="horizontal" autoSaveId="person-content">
+                <Panel order={1} className="mr-2">
+                    <VStack gap="2" height="100%">
+                        <Box flexGrow="0">
+                            <PersonLinje />
+                        </Box>
+                        <Suspense>
+                            <Outlet />
+                        </Suspense>
+                    </VStack>
+                </Panel>
+                <PanelResizeHandle className="hover:bg-surface-neutral-subtle-hover w-1 focus:bg-blue-50" />
+                <LukkbarNyMelding />
+            </PanelGroup>
         </HStack>
     );
 }