Feat/all panels styling

apps/tissuumaps/src/components/panels/ImagesPanel/ImagesLayersPanel.tsx

@@ -0,0 +1,22 @@
+import { type Image } from "@tissuumaps/core";
+
+import { cn } from "@/lib/utils";
+
+import { Fieldset, FieldsetLegend } from "../../common/fieldset";
+
+export type ImagesLayersPanelProps = {
+  image: Image;
+  className?: string;
+};
+
+export function ImagesLayersPanel({ className }: ImagesLayersPanelProps) {
+  return (
+    <Fieldset
+      className={cn("flex flex-col gap-y-2 border rounded-md p-2", className)}
+    >
+      <FieldsetLegend className="font-medium text-foreground">
+        Layers
+      </FieldsetLegend>
+    </Fieldset>
+  );
+}

apps/tissuumaps/src/components/panels/ImagesPanel/ImagesSettingsPanel.tsx

@@ -0,0 +1,70 @@
+import { type Image } from "@tissuumaps/core";
+
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+import { useTissUUmaps } from "../../../store";
+import { Field, FieldLabel } from "../../common/field";
+import { Fieldset, FieldsetLegend } from "../../common/fieldset";
+
+export type ImagesSettingsPanelProps = {
+  image: Image;
+  className?: string;
+};
+
+export function ImagesSettingsPanel({
+  image,
+  className,
+}: ImagesSettingsPanelProps) {
+  const updateImage = useTissUUmaps((state) => state.updateImage);
+
+  return (
+    <Fieldset
+      className={cn("flex flex-col gap-y-2 border rounded-md p-2", className)}
+    >
+      <FieldsetLegend className="font-medium text-foreground">
+        Settings
+      </FieldsetLegend>
+      <Field>
+        <FieldLabel>Name</FieldLabel>
+        <Input
+          value={image.name}
+          onChange={(event) =>
+            updateImage(image.id, { name: event.target.value })
+          }
+        />
+      </Field>
+      <Field>
+        <FieldLabel>Visibility</FieldLabel>
+        <div className="flex flex-row items-center gap-x-2">
+          <Switch
+            checked={image.visibility}
+            onCheckedChange={(checked) =>
+              updateImage(image.id, { visibility: checked })
+            }
+          />
+          {image.visibility ? "Visible" : "Hidden"}
+        </div>
+      </Field>
+      <Field>
+        <FieldLabel>Opacity</FieldLabel>
+        <Input
+          type="number"
+          min={0}
+          max={1}
+          step={0.01}
+          value={image.opacity}
+          onChange={(event) => {
+            const opacity = event.target.valueAsNumber;
+            if (Number.isFinite(opacity)) {
+              updateImage(image.id, {
+                opacity: Math.min(Math.max(0, opacity), 1),
+              });
+            }
+          }}
+        />
+      </Field>
+    </Fieldset>
+  );
+}

apps/tissuumaps/src/components/panels/ImagesPanel/ImagesPanelItemSettings.tsx → apps/tissuumaps/src/components/panels/ImagesPanel/ImagesSourcePanel.tsx

@@ -1,22 +1,29 @@
 import { JsonForms } from "@jsonforms/react";
+import { EditIcon } from "lucide-react";
 import { useMemo } from "react";
 
-import { type Image, type ImageDataSource } from "@tissuumaps/core";
+import { type Image } from "@tissuumaps/core";
+
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
 
 import { useTissUUmaps } from "../../../store";
+import { Field, FieldLabel } from "../../common/field";
+import { Fieldset, FieldsetLegend } from "../../common/fieldset";
 import { cells, renderers } from "../../jsonforms";
 
-export type ImagesPanelItemSettingsProps = {
+export type ImagesSourcePanelProps = {
   image: Image;
+  className?: string;
 };
 
-export function ImagesPanelItemSettings({
+export function ImagesSourcePanel({
   image,
-}: ImagesPanelItemSettingsProps) {
+  className,
+}: ImagesSourcePanelProps) {
   const imageDataStorageRegistry = useTissUUmaps(
     (state) => state.imageDataStorageRegistry,
   );
-  const updateImage = useTissUUmaps((state) => state.updateImage);
 
   const { dataSourceSchema, dataSourceUISchema } = useMemo(() => {
     const value = imageDataStorageRegistry.get(image.dataSource.type);
@@ -29,25 +36,25 @@ export function ImagesPanelItemSettings({
   }, [imageDataStorageRegistry, image.dataSource.type]);
 
   return (
-    <div>
-      {/* Data source */}
+    <Fieldset
+      className={cn("flex flex-col gap-y-2 border rounded-md p-2", className)}
+    >
+      <FieldsetLegend className="flex flex-row items-center font-medium text-foreground">
+        Source
+        <EditIcon className="ml-auto size-4" />
+      </FieldsetLegend>
+      <Field>
+        <FieldLabel>Type</FieldLabel>
+        <Input type="text" value={image.dataSource.type} disabled />
+      </Field>
       <JsonForms
         schema={dataSourceSchema}
         uischema={dataSourceUISchema}
         data={image.dataSource}
-        onChange={({ data, errors }) => {
-          if (errors === undefined || errors.length === 0) {
-            updateImage(image.id, {
-              dataSource: {
-                ...image.dataSource,
-                ...(data as ImageDataSource),
-              },
-            });
-          }
-        }}
         renderers={renderers}
         cells={cells}
+        readonly={true}
       />
-    </div>
+    </Fieldset>
   );
 }

apps/tissuumaps/src/components/panels/ImagesPanel/index.tsx

@@ -1,9 +1,16 @@
 import { DragDropProvider } from "@dnd-kit/react";
 import { isSortable, useSortable } from "@dnd-kit/react/sortable";
-import { GripVertical } from "lucide-react";
+import { EyeIcon, EyeOffIcon, GripVertical, Trash2Icon } from "lucide-react";
 
 import { type Image } from "@tissuumaps/core";
 
+import { Button } from "@/components/ui/button";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+
 import { useTissUUmaps } from "../../../store";
 import {
   Accordion,
@@ -13,7 +20,9 @@ import {
   AccordionTrigger,
   AccordionTriggerUpDownIcon,
 } from "../../common/accordion";
-import { ImagesPanelItem } from "./ImagesPanelItem";
+import { ImagesLayersPanel } from "./ImagesLayersPanel";
+import { ImagesSettingsPanel } from "./ImagesSettingsPanel";
+import { ImagesSourcePanel } from "./ImagesSourcePanel";
 
 export type ImagesPanelProps = {
   className?: string;
@@ -28,8 +37,6 @@ export function ImagesPanel({ className }: ImagesPanelProps) {
       onDragEnd={(event) => {
         const { source, canceled } = event.operation;
         if (isSortable(source) && !canceled) {
-          // dnd-kit optimistically updates the DOM
-          // https://github.com/clauderic/dnd-kit/issues/1564
           moveImage(source.id as string, source.index);
         }
       }}
@@ -49,18 +56,70 @@ type ImageAccordionItemProps = {
 };
 
 function ImageAccordionItem({ image, index }: ImageAccordionItemProps) {
+  const updateImage = useTissUUmaps((state) => state.updateImage);
+  const deleteImage = useTissUUmaps((state) => state.deleteImage);
+
   const { ref, handleRef } = useSortable({ id: image.id, index });
 
   return (
-    <AccordionItem render={<div ref={ref} />}>
-      <AccordionHeader>
-        <GripVertical ref={handleRef} />
-        <AccordionTrigger>{image.name}</AccordionTrigger>
-        <AccordionTriggerUpDownIcon className="ml-auto" />
-      </AccordionHeader>
-      <AccordionPanel>
-        <ImagesPanelItem image={image} />
-      </AccordionPanel>
-    </AccordionItem>
+    <div ref={ref}>
+      <AccordionItem className="border rounded-md bg-sidebar p-2">
+        <AccordionHeader>
+          <GripVertical ref={handleRef} />
+          <div className="flex-1 w-full">
+            <AccordionTrigger className="w-full cursor-pointer">
+              {image.name}
+            </AccordionTrigger>
+          </div>
+          <div className="ml-auto flex flex-row items-center gap-x-2">
+            <InputGroup className="w-24">
+              <InputGroupAddon>OPA</InputGroupAddon>
+              <InputGroupInput
+                type="number"
+                min={0}
+                max={1}
+                step={0.01}
+                value={image.opacity}
+                onChange={(event) => {
+                  const opacity = event.target.valueAsNumber;
+                  if (Number.isFinite(opacity)) {
+                    updateImage(image.id, {
+                      opacity: Math.min(Math.max(0, opacity), 1),
+                    });
+                  }
+                }}
+              />
+            </InputGroup>
+            <Button
+              variant="ghost"
+              onClick={() =>
+                updateImage(image.id, { visibility: !image.visibility })
+              }
+            >
+              {image.visibility ? <EyeIcon /> : <EyeOffIcon />}
+            </Button>
+            <Button
+              variant="ghost"
+              onClick={() => {
+                if (
+                  window.confirm("Are you sure you want to delete this image?")
+                ) {
+                  deleteImage(image.id);
+                }
+              }}
+              title="Delete image"
+            >
+              <Trash2Icon />
+            </Button>
+          </div>
+          <AccordionTriggerUpDownIcon />
+        </AccordionHeader>
+        <AccordionPanel className="pt-2 flex flex-col gap-y-2">
+          <ImagesSourcePanel image={image} className="bg-card" />
+          <ImagesSettingsPanel image={image} className="bg-card" />
+          <ImagesLayersPanel image={image} className="bg-card" />
+        </AccordionPanel>
+      </AccordionItem>
+    </div>
   );
 }

apps/tissuumaps/src/components/panels/LabelsPanel/LabelsLayersPanel.tsx

@@ -0,0 +1,22 @@
+import { type Labels } from "@tissuumaps/core";
+
+import { cn } from "@/lib/utils";
+
+import { Fieldset, FieldsetLegend } from "../../common/fieldset";
+
+export type LabelsLayersPanelProps = {
+  labels: Labels;
+  className?: string;
+};
+
+export function LabelsLayersPanel({ className }: LabelsLayersPanelProps) {
+  return (
+    <Fieldset
+      className={cn("flex flex-col gap-y-2 border rounded-md p-2", className)}
+    >
+      <FieldsetLegend className="font-medium text-foreground">
+        Layers
+      </FieldsetLegend>
+    </Fieldset>
+  );
+}