enhance(apps/frontend-manage): make activity evaluation pages resizable

apps/frontend-manage/src/components/evaluation/elements/ChoicesEvaluation.tsx

@@ -1,10 +1,17 @@
 import { ChoicesElementInstanceEvaluation } from '@klicker-uzh/graphql/dist/ops'
 import { ChartType } from '@klicker-uzh/shared-components/src/constants'
+import { useLocalStorage } from '@uidotdev/usehooks'
 import { twMerge } from 'tailwind-merge'
 import ElementChart from '../ElementChart'
 import { TextSizeType } from '../textSizes'
 import ChoicesSidebar from './ChoicesSidebar'
 
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@uzh-bf/design-system/dist/future'
+
 interface ChoicesEvaluationProps {
   instanceEvaluation: ChoicesElementInstanceEvaluation
   textSize: TextSizeType
@@ -18,29 +25,43 @@ function ChoicesEvaluation({
   chartType,
   showSolution,
 }: ChoicesEvaluationProps) {
+  const [isCollapsed, setIsCollapsed] = useLocalStorage(
+    `evaluation-${instanceEvaluation.id}-isCollapsed`,
+    false
+  )
+
   return (
-    <>
-      <div className="order-2 flex-1 px-4 md:order-1">
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel
+        defaultSize={isCollapsed ? 100 : 80}
+        minSize={50}
+        className="px-4"
+      >
         <ElementChart
           chartType={chartType}
           instanceEvaluation={instanceEvaluation}
           showSolution={showSolution}
           textSize={textSize}
         />
-      </div>
-      <div
-        className={twMerge(
-          'order-1 flex flex-none flex-col gap-2 border-l px-4 py-2 md:order-2 md:w-64 lg:w-72 xl:w-80',
-          textSize.text
-        )}
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel
+        key={`parent-${instanceEvaluation.id}-${isCollapsed ? 'collapsed' : 'expanded'}`}
+        defaultSize={isCollapsed ? 0 : 20}
+        minSize={10}
+        collapsible
+        collapsedSize={0}
+        onCollapse={() => setIsCollapsed(true)}
+        onExpand={() => setIsCollapsed(false)}
+        className={twMerge('gap-2 border-l px-4 py-2', textSize.text)}
       >
         <ChoicesSidebar
           instance={instanceEvaluation}
           textSize={textSize}
           showSolution={showSolution}
         />
-      </div>
-    </>
+      </ResizablePanel>
+    </ResizablePanelGroup>
   )
 }
 

apps/frontend-manage/src/components/evaluation/elements/FTEvaluation.tsx

@@ -5,6 +5,13 @@ import ElementChart from '../ElementChart'
 import { TextSizeType } from '../textSizes'
 import FTSidebar from './FTSidebar'
 
+import { useLocalStorage } from '@uidotdev/usehooks'
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@uzh-bf/design-system/dist/future'
+
 interface FTEvaluationProps {
   instanceEvaluation: FreeElementInstanceEvaluation
   textSize: TextSizeType
@@ -18,27 +25,56 @@ function FTEvaluation({
   chartType,
   showSolution,
 }: FTEvaluationProps) {
+  const [isCollapsed, setIsCollapsed] = useLocalStorage(
+    `evaluation-${instanceEvaluation.id}-isCollapsed`,
+    false
+  )
+
   return (
     <>
-      <div className="order-2 flex-1 px-4 md:order-1">
-        <ElementChart
-          chartType={chartType}
-          instanceEvaluation={instanceEvaluation}
-          showSolution={showSolution}
-          textSize={textSize}
-        />
-      </div>
-      {instanceEvaluation.results.solutions && showSolution && (
-        <div
-          className={twMerge(
-            'order-1 flex flex-none flex-col gap-2 border-l px-4 py-2 md:order-2 md:w-64 lg:w-72 xl:w-80',
-            textSize.text
-          )}
-        >
-          <FTSidebar
-            instance={instanceEvaluation}
-            textSize={textSize}
+      {showSolution ? (
+        <ResizablePanelGroup direction="horizontal">
+          <ResizablePanel
+            defaultSize={isCollapsed ? 100 : 80}
+            minSize={50}
+            className="px-4"
+          >
+            <ElementChart
+              chartType={chartType}
+              instanceEvaluation={instanceEvaluation}
+              showSolution={showSolution}
+              textSize={textSize}
+            />
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel
+            key={`parent-${instanceEvaluation.id}-${isCollapsed ? 'collapsed' : 'expanded'}`}
+            defaultSize={isCollapsed ? 0 : 20}
+            minSize={10}
+            collapsible
+            collapsedSize={0}
+            onCollapse={() => setIsCollapsed(true)}
+            onExpand={() => setIsCollapsed(false)}
+            className={twMerge('gap-2 border-l px-4 py-2', textSize.text)}
+          >
+            {instanceEvaluation.results.solutions &&
+              showSolution &&
+              !isCollapsed && (
+                <FTSidebar
+                  instance={instanceEvaluation}
+                  textSize={textSize}
+                  showSolution={showSolution}
+                />
+              )}
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      ) : (
+        <div className="order-2 flex-1 px-4 md:order-1">
+          <ElementChart
+            chartType={chartType}
+            instanceEvaluation={instanceEvaluation}
             showSolution={showSolution}
+            textSize={textSize}
           />
         </div>
       )}

apps/frontend-manage/src/components/evaluation/elements/NREvaluation.tsx

@@ -5,6 +5,13 @@ import ElementChart from '../ElementChart'
 import { TextSizeType } from '../textSizes'
 import NumericalSidebar from './NumericalSidebar'
 
+import { useLocalStorage } from '@uidotdev/usehooks'
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@uzh-bf/design-system/dist/future'
+
 interface NREvaluationProps {
   instanceEvaluation: NumericalElementInstanceEvaluation
   textSize: TextSizeType
@@ -18,29 +25,45 @@ function NREvaluation({
   chartType,
   showSolution,
 }: NREvaluationProps) {
+  const [isCollapsed, setIsCollapsed] = useLocalStorage(
+    `evaluation-${instanceEvaluation.id}-isCollapsed`,
+    false
+  )
+
   return (
-    <>
-      <div className="order-2 flex-1 px-4 md:order-1">
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel
+        defaultSize={isCollapsed ? 100 : 80}
+        minSize={50}
+        className="px-4"
+      >
         <ElementChart
           chartType={chartType}
           instanceEvaluation={instanceEvaluation}
           showSolution={showSolution}
           textSize={textSize}
         />
-      </div>
-      <div
-        className={twMerge(
-          'order-1 flex flex-none flex-col gap-2 border-l px-4 py-2 md:order-2 md:w-64 lg:w-72 xl:w-80',
-          textSize.text
-        )}
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel
+        key={`parent-${instanceEvaluation.id}-${isCollapsed ? 'collapsed' : 'expanded'}`}
+        defaultSize={isCollapsed ? 0 : 20}
+        minSize={10}
+        collapsible
+        collapsedSize={0}
+        onCollapse={() => setIsCollapsed(true)}
+        onExpand={() => setIsCollapsed(false)}
+        className={twMerge('gap-2 border-l px-4 py-2', textSize.text)}
       >
-        <NumericalSidebar
-          instance={instanceEvaluation}
-          textSize={textSize}
-          showSolution={showSolution}
-        />
-      </div>
-    </>
+        {!isCollapsed && (
+          <NumericalSidebar
+            instance={instanceEvaluation}
+            textSize={textSize}
+            showSolution={showSolution}
+          />
+        )}
+      </ResizablePanel>
+    </ResizablePanelGroup>
   )
 }