feat: resizeable panels

package.json

@@ -51,6 +51,7 @@
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-hook-form": "^7.53.0",
+        "react-resizable-panels": "^2.1.1",
         "remeda": "^2.11.0",
         "swr": "^2.2.5",
         "tailwind-merge": "^2.5.2",

src/app/_preload.tsx

@@ -3,7 +3,7 @@
 import ReactDOM from 'react-dom'
 
 function Preload(): null {
-    ReactDOM.preload('https://cdn.nav.no/aksel/fonts/SourceSans3/normal-latin.woff2', {
+    ReactDOM.preload('https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2', {
         as: 'font',
         type: 'font/woff2',
         crossOrigin: 'anonymous',

src/app/nasjonal/[oppgaveId]/page.tsx

@@ -2,13 +2,14 @@ import React, { ReactElement } from 'react'
 import { Metadata } from 'next'
 
 import NasjonalOppgaveView from '../../../components/nasjonal-oppgave/NasjonalOppgaveView'
+import { getPersistentPaneLayout } from '../../../components/split-view-layout/persistent-layout'
 
 export const metadata: Metadata = {
     title: 'Registrer mangler i nasjonal sykmelding',
 }
 
 function Page({ params }: { params: { oppgaveId: string } }): ReactElement {
-    return <NasjonalOppgaveView oppgaveId={params.oppgaveId} />
+    return <NasjonalOppgaveView oppgaveId={params.oppgaveId} layout={getPersistentPaneLayout()} />
 }
 
 export default Page

src/app/nasjonal/ferdigstilt/[sykmeldingId]/page.tsx

@@ -2,13 +2,14 @@ import React, { ReactElement } from 'react'
 import { Metadata } from 'next'
 
 import NasjonalOppgaveFerdigstiltView from '../../../../components/nasjonal-oppgave/NasjonalOppgaveFerdigstiltView'
+import { getPersistentPaneLayout } from '../../../../components/split-view-layout/persistent-layout'
 
 export const metadata: Metadata = {
     title: 'Rediger mangler i nasjonal sykmelding',
 }
 
 function Page({ params }: { params: { sykmeldingId: string } }): ReactElement {
-    return <NasjonalOppgaveFerdigstiltView sykmeldingId={params.sykmeldingId} />
+    return <NasjonalOppgaveFerdigstiltView sykmeldingId={params.sykmeldingId} layout={getPersistentPaneLayout()} />
 }
 
 export default Page

src/app/oppgave/[oppgaveId]/page.tsx

@@ -2,13 +2,14 @@ import React, { ReactElement } from 'react'
 import { Metadata } from 'next'
 
 import UtenlandskOppgaveView from '../../../components/utenlandsk-oppgave/UtenlandskOppgaveView'
+import { getPersistentPaneLayout } from '../../../components/split-view-layout/persistent-layout'
 
 export const metadata: Metadata = {
     title: 'Registrer mangler i utenlandsk sykmelding',
 }
 
 function Page({ params }: { params: { oppgaveId: string } }): ReactElement {
-    return <UtenlandskOppgaveView oppgaveId={params.oppgaveId} />
+    return <UtenlandskOppgaveView oppgaveId={params.oppgaveId} layout={getPersistentPaneLayout()} />
 }
 
 export default Page

src/app/registrer-sykmelding/page.tsx

@@ -2,13 +2,14 @@ import { ReactElement } from 'react'
 import { Metadata } from 'next'
 
 import RegistrerSykmeldingView from '../../components/registrer-sykmelding/RegistrerSykmeldingView'
+import { getPersistentPaneLayout } from '../../components/split-view-layout/persistent-layout'
 
 export const metadata: Metadata = {
     title: 'Registrer sykmelding',
 }
 
 function RegistrerSykmelding(): ReactElement {
-    return <RegistrerSykmeldingView />
+    return <RegistrerSykmeldingView layout={getPersistentPaneLayout()} />
 }
 
 export default RegistrerSykmelding

src/components/nasjonal-oppgave/NasjonalOppgaveFerdigstiltView.tsx

@@ -3,6 +3,7 @@
 import React, { ReactElement } from 'react'
 
 import SplitDocumentView from '../split-view-layout/SplitDocumentView'
+import { PaneView } from '../split-view-layout/persistent-layout'
 
 import NasjonalSykmeldingForm from './form/NasjonalSykmeldingForm'
 import { useFerdigstiltNasjonalOppgave } from './useNasjonalOppgave'
@@ -12,11 +13,11 @@ import {
     NasjonalOppgaveSkeleton,
 } from './NasjonalOppgaveStates'
 
-type Props = {
+type Props = PaneView & {
     sykmeldingId: string
 }
 
-function NasjonalOppgaveFerdigstiltView({ sykmeldingId }: Props): ReactElement {
+function NasjonalOppgaveFerdigstiltView({ sykmeldingId, layout }: Props): ReactElement {
     const query = useFerdigstiltNasjonalOppgave(sykmeldingId)
 
     return (
@@ -25,6 +26,7 @@ function NasjonalOppgaveFerdigstiltView({ sykmeldingId }: Props): ReactElement {
             ingress="Under kan du korrigere opplysningene i en allerede registrert papirsykmelding"
             documentView={<NasjonalOppgaveFerdigstiltDocuments query={query} />}
             closeReturnsTo="modia"
+            defaultLayout={layout}
         >
             {query.loading && <NasjonalOppgaveSkeleton />}
             {query.data && (

src/components/nasjonal-oppgave/NasjonalOppgaveView.tsx

@@ -3,16 +3,17 @@
 import React, { ReactElement } from 'react'
 
 import SplitDocumentView from '../split-view-layout/SplitDocumentView'
+import { PaneView } from '../split-view-layout/persistent-layout'
 
 import NasjonalSykmeldingForm from './form/NasjonalSykmeldingForm'
 import { useNasjonalOppgave } from './useNasjonalOppgave'
 import { NasjonalOppgaveDocuments, NasjonalOppgaveError, NasjonalOppgaveSkeleton } from './NasjonalOppgaveStates'
 
-type Props = {
+type Props = PaneView & {
     oppgaveId: string
 }
 
-function NasjonalOppgaveView({ oppgaveId }: Props): ReactElement {
+function NasjonalOppgaveView({ oppgaveId, layout }: Props): ReactElement {
     const query = useNasjonalOppgave(oppgaveId)
 
     return (
@@ -21,6 +22,7 @@ function NasjonalOppgaveView({ oppgaveId }: Props): ReactElement {
             ingress="Vennligst legg inn opplysningene fra papirsykmeldingen"
             documentView={<NasjonalOppgaveDocuments oppgaveId={oppgaveId} query={query} />}
             closeReturnsTo="gosys"
+            defaultLayout={layout}
         >
             {query.loading && <NasjonalOppgaveSkeleton />}
             {query.data && (

src/components/nasjonal-oppgave/__tests__/apiError.test.tsx

@@ -24,7 +24,7 @@ describe('Registration api errors', async () => {
             ),
         )
 
-        render(<NasjonalOppgaveView oppgaveId={`${fullOppgave.oppgaveid}`} />, {
+        render(<NasjonalOppgaveView oppgaveId={`${fullOppgave.oppgaveid}`} layout={undefined} />, {
             useRestLink: true,
         })
 
@@ -50,7 +50,7 @@ describe('Registration api errors', async () => {
             ),
         )
 
-        render(<NasjonalOppgaveView oppgaveId={`${fullOppgave.oppgaveid}`} />, {
+        render(<NasjonalOppgaveView oppgaveId={`${fullOppgave.oppgaveid}`} layout={undefined} />, {
             useRestLink: true,
         })
 
@@ -89,7 +89,7 @@ describe('Registration api errors', async () => {
             ),
         )
 
-        render(<NasjonalOppgaveView oppgaveId={`${fullOppgave.oppgaveid}`} />, {
+        render(<NasjonalOppgaveView oppgaveId={`${fullOppgave.oppgaveid}`} layout={undefined} />, {
             useRestLink: true,
         })
 

src/components/nasjonal-oppgave/__tests__/avvisOppgave.test.tsx

@@ -26,7 +26,7 @@ describe('Avvis oppgave', async () => {
             ),
         )
 
-        render(<NasjonalOppgaveView oppgaveId={`${fullOppgave.oppgaveid}`} />, {
+        render(<NasjonalOppgaveView oppgaveId={`${fullOppgave.oppgaveid}`} layout={undefined} />, {
             useRestLink: true,
         })
 

src/components/nasjonal-oppgave/__tests__/loadPasient.test.tsx

@@ -27,7 +27,7 @@ describe('Load pasientinfo', async () => {
             ),
         )
 
-        render(<NasjonalOppgaveView oppgaveId={`${nullFnrOppgave.oppgaveid}`} />, {
+        render(<NasjonalOppgaveView oppgaveId={`${nullFnrOppgave.oppgaveid}`} layout={undefined} />, {
             useRestLink: true,
         })
 
@@ -44,7 +44,7 @@ describe('Load pasientinfo', async () => {
             http.get(apiUrl('/pasient'), () => HttpResponse.text('Internal server error', { status: 500 })),
         )
 
-        render(<NasjonalOppgaveView oppgaveId={`${nullFnrOppgave.oppgaveid}`} />, {
+        render(<NasjonalOppgaveView oppgaveId={`${nullFnrOppgave.oppgaveid}`} layout={undefined} />, {
             useRestLink: true,
         })
 

src/components/nasjonal-oppgave/__tests__/mulighetForArbeid.test.tsx

@@ -29,7 +29,7 @@ describe('Mulighet for arbeid section', async () => {
             }),
         )
 
-        render(<NasjonalOppgaveView oppgaveId={`${fullOppgaveWithoutPeriods.oppgaveid}`} />, {
+        render(<NasjonalOppgaveView oppgaveId={`${fullOppgaveWithoutPeriods.oppgaveid}`} layout={undefined} />, {
             useRestLink: true,
         })
 

src/components/nasjonal-oppgave/__tests__/newAppHint.test.tsx

@@ -19,7 +19,7 @@ describe('Informing about new app', async () => {
     it('Should link to smreg oppgave', async () => {
         server.use(http.get(apiUrl(`/oppgave/${fullOppgave.oppgaveid}`), () => HttpResponse.json(fullOppgave)))
 
-        render(<NasjonalOppgaveView oppgaveId={`${fullOppgave.oppgaveid}`} />, {
+        render(<NasjonalOppgaveView oppgaveId={`${fullOppgave.oppgaveid}`} layout={undefined} />, {
             useRestLink: true,
         })
 
@@ -39,9 +39,15 @@ describe('Informing about new app', async () => {
             ),
         )
 
-        render(<NasjonalOppgaveFerdigstiltView sykmeldingId={`${fullOppgave.papirSmRegistering.sykmeldingId}`} />, {
-            useRestLink: true,
-        })
+        render(
+            <NasjonalOppgaveFerdigstiltView
+                sykmeldingId={`${fullOppgave.papirSmRegistering.sykmeldingId}`}
+                layout={undefined}
+            />,
+            {
+                useRestLink: true,
+            },
+        )
 
         expect(
             await screen.findByRole('heading', { name: 'Korrigering av registrert papirsykmelding' }),

src/components/nasjonal-oppgave/__tests__/oppgaveMapping.test.tsx

@@ -26,7 +26,7 @@ describe('Mapping opppgave fetched from API', async () => {
     it('Should map all fields when "oppgave.papirSmRegistrering" is completely filled out', async () => {
         server.use(http.get(apiUrl(`/oppgave/${fullOppgave.oppgaveid}`), () => HttpResponse.json(fullOppgave)))
 
-        render(<NasjonalOppgaveView oppgaveId={`${fullOppgave.oppgaveid}`} />, {
+        render(<NasjonalOppgaveView oppgaveId={`${fullOppgave.oppgaveid}`} layout={undefined} />, {
             useRestLink: true,
         })
 
@@ -193,7 +193,7 @@ describe('Mapping opppgave fetched from API', async () => {
     it('Should not map any field when "oppgave.papirSmRegistrering" is null', async () => {
         server.use(http.get(apiUrl(`/oppgave/${emptyOppgave.oppgaveid}`), () => HttpResponse.json(emptyOppgave)))
 
-        render(<NasjonalOppgaveView oppgaveId={`${emptyOppgave.oppgaveid}`} />, {
+        render(<NasjonalOppgaveView oppgaveId={`${emptyOppgave.oppgaveid}`} layout={undefined} />, {
             useRestLink: true,
         })
 

src/components/nasjonal-oppgave/__tests__/revertToGosysOppgave.test.tsx

@@ -24,7 +24,7 @@ describe('Send til Gosys', async () => {
             ),
         )
 
-        render(<NasjonalOppgaveView oppgaveId={`${emptyOppgave.oppgaveid}`} />, {
+        render(<NasjonalOppgaveView oppgaveId={`${emptyOppgave.oppgaveid}`} layout={undefined} />, {
             useRestLink: true,
         })
 

src/components/nasjonal-oppgave/__tests__/submitOppgave.test.tsx

@@ -28,7 +28,7 @@ describe('Submit oppgave', async () => {
             }),
         )
 
-        render(<NasjonalOppgaveView oppgaveId={`${emptyOppgave.oppgaveid}`} />, {
+        render(<NasjonalOppgaveView oppgaveId={`${emptyOppgave.oppgaveid}`} layout={undefined} />, {
             useRestLink: true,
         })
 

src/components/nasjonal-oppgave/form/NasjonalSykmeldingForm.tsx

@@ -99,7 +99,7 @@ function NasjonalSykmeldingForm({ sykmelding, ...props }: Props): ReactElement {
 /**
  * @Deprecated Once smreg is shut down we can remove this info and redirect
  */
-function InfoAboutSmregMigrationAlert(props: OppgaveOrFerdigstilt): ReactElement {
+export function InfoAboutSmregMigrationAlert(props: OppgaveOrFerdigstilt): ReactElement {
     return (
         <ExpansionCard
             defaultOpen={localStorage.getItem('minimized-smreg-info-card') == null}

src/components/registrer-sykmelding/RegistrerSykmeldingView.tsx

@@ -12,10 +12,11 @@ import {
     SykmeldingFraJournalpostDocument,
 } from '../../graphql/queries/graphql.generated'
 import SplitDocumentView from '../split-view-layout/SplitDocumentView'
+import { PaneView } from '../split-view-layout/persistent-layout'
 
 import RegistrerSykmeldingDocuments from './RegistrerSykmeldingDocuments'
 
-function RegistrerSykmeldingView(): ReactElement {
+function RegistrerSykmeldingView({ layout }: PaneView): ReactElement {
     const [journalpostId, setJournalpostId] = useState('')
     const [registrer, registrerResult] = useLazyQuery(JournalpostByIdDocument, {
         fetchPolicy: 'network-only',
@@ -28,6 +29,7 @@ function RegistrerSykmeldingView(): ReactElement {
             title="Registrer sykmelding"
             documentView={<RegistrerSykmeldingDocuments query={registrerResult} />}
             closeReturnsTo="gosys"
+            defaultLayout={layout}
         >
             <div className="container p-4 mx-auto">
                 <div className="flex items-end gap-3">

src/components/split-view-layout/SplitDocumentView.module.css

@@ -1,44 +1,24 @@
-.contentWrapper {
-    display: flex;
+.root {
     --content-height: calc(100vh - 48px);
 }
 
-.scrollArea {
-    position: relative;
-    flex: 1 1 55%;
-    max-width: var(--content-width);
-    max-height: var(--content-height);
-    overflow-y: scroll;
-}
-
-.scrollArea.inactiveTab {
-    display: none;
+.withBar {
+    --content-height: calc(100vh - 48px - 48px);
 }
 
-.scrollArea.activeTab {
-    min-width: unset;
-    max-width: unset;
-    max-height: calc(var(--content-height) - 48px);
-}
+.section {
+    /* Needed because of some weird funky overflow issues with sr-only stuff in the form */
+    position: relative;
+    height: 100%;
+    max-height: var(--content-height);
+    overflow: auto;
 
-.scrollArea.activeTab > .content {
-    max-width: 60rem;
-    margin: 0 auto;
+    @apply transition-all duration-300;
 }
 
 .pdf {
-    height: var(--content-height);
-    flex: 1 1 45%;
-}
-
-.pdf.activeTab {
-    max-height: calc(var(--content-height) - 48px);
-}
-
-.pdf.inactiveTab {
-    display: none;
-}
+    height: 100%;
+    max-height: var(--content-height);
 
-.pdf embed {
-    margin-bottom: -7px;
+    @apply transition-all duration-300;
 }