feat: add paper details to paper view

src/lib/components/composites/input/ToggleableInput.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type { HTMLInputAttributes } from "svelte/elements";
+    import type { WithElementRef } from "bits-ui";
+    import { cn } from "$lib/utils/shadcn-helper";
+
+    type Props = WithElementRef<HTMLInputAttributes> & {
+        isEditable: boolean;
+    };
+
+    let { isEditable = $bindable(false), value = $bindable(), class: className }: Props = $props();
+</script>
+
+<div
+    class={cn(
+        "bg-background border border-input rounded-md px-1.5 py-1 h-fit w-full resize-none text-default focus-visible:outline-none",
+        className,
+    )}
+    role="textbox"
+    contenteditable={isEditable}
+>
+    {value}
+</div>

src/lib/components/composites/paper-components/PaperInfo.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { Paper, PaperSpec } from "$lib/model/backend";
+    import { getNames } from "$lib/utils/common-helper";
 
     interface Props {
         paper: Paper | PaperSpec;
@@ -17,9 +18,7 @@
     </div>
     <div class="flex flex-row items-center text-hint truncate">
         {#if paper.authors.length > 0}
-            <span class="place-content-start truncate"
-                >{paper.authors.map((a) => `${a.firstName} ${a.lastName}`).join(", ")}</span
-            >
+            <span class="place-content-start truncate">{getNames(paper.authors)}</span>
         {:else}
             <span class="italic">unknown authors</span>
         {/if}

src/lib/components/composites/paper-components/paper-view/PaperView.svelte

@@ -13,21 +13,25 @@
         user: User;
         paper: Paper;
         isPaperBookmarked?: boolean;
-        showButtonBar: boolean;
+        showButtonBar?: boolean;
         backRef: string;
         userConfig: {
             isReviewMode: boolean;
             showMaybeButton: boolean;
         };
+        allowEditModeToggle?: boolean;
+        startInEditMode?: boolean;
     }
 
     const {
         user,
         paper,
         isPaperBookmarked = false,
-        showButtonBar,
+        showButtonBar = false,
         backRef,
         userConfig,
+        allowEditModeToggle = false,
+        startInEditMode = false,
     }: Props = $props();
 </script>
 
@@ -41,17 +45,24 @@ Additonally, there are buttons to navigate to the previous or next paper.
 - when `userConfig.isReviewMode` is false, then no decision buttons are shown
 - when `userConfig.showMaybeButton` is false, then the maybe button is not shown
 
+Edit Mode:
+- in the edit mode, the user can edit the paper details. When the mode is turned off, the details are displayed as read-only.
+- when `allowEditModeToggle` is true, then the user can toggle the edit mode
+- when `startInEditMode` is true, then the paper details can be edited from the start
+
 Usage:
 ```svelte
     <PaperView
         user={user}
         paper={paper}
-        showButtonBar={true}
+        showButtonBar
         backRef="/"
         userConfig={{
             isReviewMode: true,
             showMaybeButton: true,
         }}
+        allowEditModeToggle
+        startInEditMode
     />
 ```
 -->
@@ -61,7 +72,7 @@ Usage:
 </div>
 <main class="flex flex-col h-full w-full px-2 py-4 gap-5">
     <div class="flex flex-row w-full h-full gap-5">
-        <PaperDetailsCard />
+        <PaperDetailsCard {paper} allowEditModeToggle startInEditMode />
         <PaperResearchContextCard />
     </div>
     {#if showButtonBar}

src/lib/components/composites/paper-components/paper-view/cards/PaperCard.svelte

@@ -32,11 +32,11 @@ Usage:
     </PaperCard>
 ```
 -->
-<Card.Root class="shadow-lg border-container-border-grey w-full h-full">
-    <section>
-        <Tabs.Root value={tabs.length == 0 ? "" : tabs[0].value}>
+<Card.Root class="shadow-lg border-container-border-grey flex w-full h-full">
+    <section class="flex flex-col h-full w-full">
+        <Tabs.Root value={tabs.length == 0 ? "" : tabs[0].value} class="flex flex-col h-full">
             <UnderlineTabsList {tabs} />
-            <Card.Content class="p-5">
+            <Card.Content class="p-5 flex flex-col h-full">
                 {@render children()}
             </Card.Content>
         </Tabs.Root>

src/lib/components/composites/paper-components/paper-view/cards/PaperCardContent.svelte

@@ -22,8 +22,8 @@ Usage:
     </PaperCardContent>
 ```
 -->
-<Tabs.Content {value}>
-    <div class="flex flex-col gap-5">
+<Tabs.Content {value} class="h-full overflow-hidden">
+    <div class="flex flex-col gap-5 h-full">
         {@render children()}
     </div>
 </Tabs.Content>

src/lib/components/composites/paper-components/paper-view/cards/PaperDetailsCard.svelte

@@ -1,11 +1,52 @@
 <script lang="ts">
+    import ToggleableInput from "$lib/components/composites/input/ToggleableInput.svelte";
+    import Button from "$lib/components/primitives/button/button.svelte";
+    import type { Paper } from "$lib/model/backend";
+    import { getNames } from "$lib/utils/common-helper";
     import PaperCard from "./PaperCard.svelte";
     import PaperCardContent from "./PaperCardContent.svelte";
+    import ChevronDown from "lucide-svelte/icons/chevron-down";
+    import ChevronUp from "lucide-svelte/icons/chevron-up";
+
+    interface Props {
+        paper: Paper;
+        allowEditModeToggle: boolean;
+        startInEditMode: boolean;
+    }
+
+    const { paper, allowEditModeToggle, startInEditMode }: Props = $props();
+
+    let isInEditMode = $state(startInEditMode);
 
     const tabs = [
         { value: "1", label: "Information" },
         { value: "2", label: "Document" },
     ];
+
+    interface Info {
+        label: string;
+        value: unknown;
+    }
+
+    const basicInfos: Info[] = [
+        { label: "Title", value: paper.title },
+        { label: "Authors", value: getNames(paper.authors) },
+        { label: "Year", value: paper.year },
+        { label: "Publisher", value: "..." },
+    ];
+    const additionalInfos: Info[] = [
+        { label: "Publication Type", value: paper.type },
+        { label: "Publication Name", value: "..." },
+        { label: "DOI", value: paper.doi },
+    ];
+    let showAdditionalInfos = $state(true);
+    let paperInfos: Info[] = $derived(
+        showAdditionalInfos ? [...basicInfos, ...additionalInfos] : basicInfos,
+    );
+
+    function toggleAdditionalInfos() {
+        showAdditionalInfos = !showAdditionalInfos;
+    }
 </script>
 
 <!--
@@ -14,24 +55,46 @@ Paper Card for paper details in the Paper View component.
 
 Usage:
 ```svelte
-<PaperDetailsCard />
+    <PaperDetailsCard {paper} allowEditModeToggle startInEditMode />
 ```
 -->
 <PaperCard {tabs}>
     <PaperCardContent value="1">
-        <span
-            >Will be implemented in <a
-                class="text-blue-400"
-                href="https://github.com/SE-UUlm/snowballr-frontend/issues/41">#41</a
-            >.</span
-        >
+        <section class="flex flex-col gap-2 px-1">
+            <h2>General Information</h2>
+            <div class="flex flex-col gap-2">
+                {#each paperInfos as { label, value }}
+                    <div class="flex flex-row gap-2">
+                        <!-- Match top padding of input -->
+                        <span class="w-24 pt-[0.3125rem]">{label}</span>
+                        <ToggleableInput isEditable={isInEditMode} {value} />
+                    </div>
+                {/each}
+            </div>
+            <div class="flex justify-center">
+                <Button class="w-fit" variant="outline" onclick={toggleAdditionalInfos}>
+                    {#if showAdditionalInfos}
+                        <ChevronUp />
+                        Show less information
+                    {:else}
+                        <ChevronDown />
+                        Show more information
+                    {/if}
+                </Button>
+            </div>
+        </section>
+        <section class="flex flex-col gap-2 px-1">
+            <h2>Abstract</h2>
+            <ToggleableInput isEditable={isInEditMode} value={paper.abstrakt} />
+        </section>
     </PaperCardContent>
     <PaperCardContent value="2">
-        <span
-            >Will be implemented in <a
-                class="text-blue-400"
-                href="https://github.com/SE-UUlm/snowballr-frontend/issues/98">#98</a
-            >.</span
-        >
+        <span>
+            Will be implemented in
+            <a class="text-blue-400" href="https://github.com/SE-UUlm/snowballr-frontend/issues/98">
+                #98
+            </a>
+            .
+        </span>
     </PaperCardContent>
 </PaperCard>

src/routes/paper/[paperId]/+page.svelte

@@ -11,7 +11,7 @@
 <PaperView
     {user}
     {paper}
-    showButtonBar={false}
     backRef="/"
     userConfig={{ isReviewMode: false, showMaybeButton: false }}
+    allowEditModeToggle
 />

src/routes/paper/[paperId]/+page.ts

@@ -10,7 +10,9 @@ export const load: PageLoad = ({ params }) => {
         doi: "Doi",
         id: paperId,
         title: "Field-Sensitive Pointer Analysis for Static Dataflow in the R Programming Language",
-        abstrakt: "Abstrakt",
+        abstrakt: `Context Many researchers rely on the R programming language to perform their statistical analyses and visualizations in the form of R scripts. However, recent research and experience show, that many of these scripts contain problems. From being hard to comprehend by combining several analyses and plots into a single source file to being non-reproducible, with a lack of analysis tools supporting the writing of correct and maintainable code. Objective In this work, we address the problem of comprehending and maintaining R scripts by proposing flowR, a program slicer and static dataflow analyzer for the R programming language, which can be integrated directly into Visual Studio Code. Given a set of variables of interest, like the generation of a single figure in a script, flowR automatically reduces the program to the parts relevant for the output of interest, like the value of a variable. Method First, we use static program analysis to construct a detailed dataflow graph of the R script. The analysis supports loops, function calls, side effects, sourcing external files, and even redefinitions of R's primitive constructs. Subsequently, we calculate the program slice by solving a reachability problem on the graph, collecting all required parts and presenting them to the user. Results Providing several interactive ways of slicing the program, we require an average of 16 ms to calculate the slice on a given dataflow graph, reducing the code by around 94% of tokens.
+
+The demonstration video is available at https://youtu.be/Zgq6rnbvvhk. For the full source code and extensive documentation, refer to https://github.com/Code-Inspect/flowr. To try the docker image, use docker run -rm -it eagleoutice/flowr.`,
         year: 2015,
         type: "Paper",
         authors: [

src/routes/project/[projectId]/paper/[paperId]/+page.svelte

@@ -11,7 +11,8 @@
 <PaperView
     {user}
     {paper}
-    showButtonBar={true}
+    showButtonBar
     backRef={`/project/${project.id}/dashboard`}
     userConfig={{ isReviewMode, showMaybeButton: true }}
+    allowEditModeToggle
 />

src/routes/project/[projectId]/paper/[paperId]/+page.ts

@@ -10,7 +10,9 @@ export const load: PageLoad = ({ params }) => {
         doi: "Doi",
         id: paperId,
         title: "Field-Sensitive Pointer Analysis for Static Dataflow in the R Programming Language",
-        abstrakt: "Abstrakt",
+        abstrakt: `Context Many researchers rely on the R programming language to perform their statistical analyses and visualizations in the form of R scripts. However, recent research and experience show, that many of these scripts contain problems. From being hard to comprehend by combining several analyses and plots into a single source file to being non-reproducible, with a lack of analysis tools supporting the writing of correct and maintainable code. Objective In this work, we address the problem of comprehending and maintaining R scripts by proposing flowR, a program slicer and static dataflow analyzer for the R programming language, which can be integrated directly into Visual Studio Code. Given a set of variables of interest, like the generation of a single figure in a script, flowR automatically reduces the program to the parts relevant for the output of interest, like the value of a variable. Method First, we use static program analysis to construct a detailed dataflow graph of the R script. The analysis supports loops, function calls, side effects, sourcing external files, and even redefinitions of R's primitive constructs. Subsequently, we calculate the program slice by solving a reachability problem on the graph, collecting all required parts and presenting them to the user. Results Providing several interactive ways of slicing the program, we require an average of 16 ms to calculate the slice on a given dataflow graph, reducing the code by around 94% of tokens.
+
+The demonstration video is available at https://youtu.be/Zgq6rnbvvhk. For the full source code and extensive documentation, refer to https://github.com/Code-Inspect/flowr. To try the docker image, use docker run -rm -it eagleoutice/flowr.`,
         year: 2015,
         type: "Paper",
         authors: [