🧹 chore(app): update icon library

package.json

@@ -13,6 +13,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.1",
     "@iiif/parser": "^2.0.1",
     "@samvera/clover-iiif": "^2.3.2",
     "axios": "^1.6.7",
@@ -49,7 +50,6 @@
     "postcss": "^8.4.33",
     "prettier": "^3.2.4",
     "prettier-plugin-sort-json": "^3.1.0",
-    "react-icons": "^5.0.1",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",

src/components/Artwork.tsx

@@ -1,11 +1,11 @@
+import { ArrowDownTrayIcon, ShareIcon } from "@heroicons/react/24/outline";
 import { saveAs } from "file-saver";
 // @ts-expect-error konsta typing
 import { Block, Button, Icon } from "konsta/react";
 import Konva from "konva";
 import { KonvaEventObject } from "konva/lib/Node";
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { MdDownloadForOffline, MdShare } from "react-icons/md";
 import { Image, Layer, Stage, Transformer } from "react-konva";
 import { Link } from "react-router-dom";
 import useImage from "use-image";
@@ -129,7 +129,7 @@ const Canvas = () => {
 
   useEffect(() => {
     const fitStageIntoParentContainer = () => {
-      const containerWidth = window.innerWidth || 0;
+      const containerWidth = window.innerWidth * 0.9 || 0;
       const scale = containerWidth / sceneWidth;
 
       if (stageRef.current) {
@@ -272,24 +272,25 @@ const Canvas = () => {
           />
         </div>
       )}
-      <Button
-        className="p-2 rounded-full"
-        rounded
-        inline
-        outline
-        onClick={handleShare}
-      >
-        <Icon material={<MdShare className="w-6 h-6" />} />
-      </Button>
-      <Button
-        className="p-2 rounded-full"
-        rounded
-        inline
-        outline
-        onClick={handleDownload}
-      >
-        <Icon material={<MdDownloadForOffline className="w-6 h-6" />} />
-      </Button>
+
+      <div className="flex gap-2 mx-auto">
+        <Button
+          className="p-4 text-xl text-black"
+          rounded
+          inline
+          onClick={handleShare}
+        >
+          <Icon material={<ShareIcon className="w-6 h-6" />} />
+        </Button>
+        <Button
+          className="p-4 text-xl text-black"
+          rounded
+          inline
+          onClick={handleDownload}
+        >
+          <Icon material={<ArrowDownTrayIcon className="w-6 h-6" />} />
+        </Button>
+      </div>
     </>
   );
 };
@@ -298,11 +299,75 @@ function Artwork() {
   const { t } = useTranslation();
   const { canvasList } = useStore();
 
+  const [selectedId] = useState("");
+
+  /* useEffect(() => {
+    const container = stageRef.current?.container();
+    if (container) {
+      container.addEventListener("dragover", (e) => {
+        e.preventDefault();
+      });
+
+      container.addEventListener("drop", (e) => {
+        e.preventDefault();
+        const data = e.dataTransfer.getData("text");
+        const droppedImage = canvasList.find((img) => img.id === data);
+        if (droppedImage) {
+          const scale = stageRef.current?.scaleX() || 1;
+          const position = stageRef.current?.getPointerPosition();
+          const x = (position?.x || 0) / scale;
+          const y = (position?.y || 0) / scale;
+
+          updateCanvasList({ ...droppedImage, x, y });
+        }
+      });
+    }
+
+    return () => {
+      if (container) {
+        container.removeEventListener("dragover", (e) => e.preventDefault());
+        container.removeEventListener("drop", (e) => e.preventDefault());
+      }
+    };
+  }, [canvasList, updateCanvasList]);
+
+  const checkDeselect = (
+    e: Konva.KonvaEventObject<TouchEvent> | Konva.KonvaEventObject<MouseEvent>,
+  ) => {
+    const clickedOnEmpty = e.target === e.target.getStage();
+    if (clickedOnEmpty) {
+      setSelectedId("");
+    }
+  }; */
+
   return (
-    <Block className="flex flex-col flex-wrap gap-4 container mx-auto justify-center content-center text-center">
+    <Block className="flex flex-col flex-wrap gap-4 container mx-auto justify-center content-center text-center max-w-2xl">
       <div className="p-2 m-4">
         <h1 className="text-2xl">{t("artworkTitle")}</h1>
       </div>
+      <div className="flex flex-wrap gap-4 p-2">
+        {canvasList.map((canvasImage) => (
+          <img
+            key={canvasImage.id}
+            src={canvasImage.image}
+            alt={canvasImage.id}
+            draggable
+            onDragStart={(e) => {
+              e.dataTransfer.setData("text", canvasImage.id);
+            }}
+            role="presentation"
+            style={{
+              width: "100px",
+              height: "100px",
+              cursor: "move",
+              border:
+                selectedId === canvasImage.id ? "2px solid #4CAF50" : "none",
+              borderRadius: "5px",
+              margin: "4px",
+            }}
+          />
+        ))}
+      </div>
       {canvasList.length === 0 ? (
         <Button className="p-2 rounded-full text-xl" rounded inline outline>
           <Link to={"/selection"}>{t("artworkEmpty")}</Link>

src/components/Layout.tsx

@@ -1,12 +1,12 @@
+import {
+  HeartIcon,
+  HomeIcon,
+  PhotoIcon,
+  Square2StackIcon,
+} from "@heroicons/react/24/outline";
 // @ts-expect-error konsta typing
 import { App, Icon, Page, Tabbar, TabbarLink } from "konsta/react";
 import { useTranslation } from "react-i18next";
-import {
-  MdFavoriteBorder,
-  MdOutlineAssignmentInd,
-  MdOutlineCollections,
-  MdOutlineDoorFront,
-} from "react-icons/md";
 import { NavLink, Outlet, useMatch, useResolvedPath } from "react-router-dom";
 
 function Layout() {
@@ -18,8 +18,8 @@ function Layout() {
         <Tabbar
           labels={true}
           icons={true}
-          className="left-0 bottom-0 fixed k-color-brand-primary"
-          style={{ paddingTop: "1rem" }}
+          className="left-0 bottom-0 fixed k-color-brand-primary text-center"
+          innerClassName="tabbar-inner"
         >
           <TabbarLink
             active={useMatch({
@@ -30,7 +30,7 @@ function Layout() {
             component={NavLink}
             icon={
               <Icon
-                material={<MdOutlineDoorFront className="w-10 h-10" />}
+                material={<HomeIcon className="w-10 h-10" />}
                 className={`transition duration-300 ${
                   useMatch({
                     path: useResolvedPath("/").pathname,
@@ -39,7 +39,7 @@ function Layout() {
                 }`}
               />
             }
-            label={t("portal")}
+            label={t("start")}
             touchRipple={false}
           />
 
@@ -52,7 +52,7 @@ function Layout() {
             component={NavLink}
             icon={
               <Icon
-                material={<MdFavoriteBorder className="w-10 h-10" />}
+                material={<HeartIcon className="w-10 h-10" />}
                 className={`transition duration-300 ${
                   useMatch({
                     path: useResolvedPath("/selection").pathname,
@@ -74,7 +74,7 @@ function Layout() {
             component={NavLink}
             icon={
               <Icon
-                material={<MdOutlineCollections className="w-10 h-10" />}
+                material={<Square2StackIcon className="w-10 h-10" />}
                 className={`transition duration-300 ${
                   useMatch({
                     path: useResolvedPath("/collection").pathname,
@@ -96,7 +96,7 @@ function Layout() {
             component={NavLink}
             icon={
               <Icon
-                material={<MdOutlineAssignmentInd className="w-10 h-10" />}
+                material={<PhotoIcon className="w-10 h-10" />}
                 className={`transition duration-300 ${
                   useMatch({
                     path: useResolvedPath("/creation").pathname,
@@ -109,7 +109,7 @@ function Layout() {
             touchRipple={false}
           />
         </Tabbar>
-        <main className="h-[calc(100%_-_80px)] overflow-auto">
+        <main className="h-[calc(100%_-_128px)] overflow-auto">
           <Outlet />
         </main>
       </Page>

src/components/Select.tsx

@@ -1,9 +1,12 @@
+import {
+  HandThumbDownIcon,
+  HandThumbUpIcon,
+} from "@heroicons/react/24/outline";
 import axios from "axios";
 // @ts-expect-error konsta typing
 import { Button, Card, Icon } from "konsta/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { MdOutlineThumbDown, MdOutlineThumbUp } from "react-icons/md";
 import TinderCard from "react-tinder-card";
 
 import api from "../api";
@@ -172,11 +175,11 @@ function Selection() {
               <div className="flex justify-between">
                 <SwipeButton
                   onClick={() => swipe("left")}
-                  materialIcon={<MdOutlineThumbDown className="w-6 h-6" />}
+                  materialIcon={<HandThumbDownIcon className="w-6 h-6" />}
                 />
                 <SwipeButton
                   onClick={() => swipe("right")}
-                  materialIcon={<MdOutlineThumbUp className="w-6 h-6" />}
+                  materialIcon={<HandThumbUpIcon className="w-6 h-6" />}
                 />
               </div>
             </>

src/index.css

@@ -30,5 +30,5 @@ a > span > .text-xs, button {
 }
 
 .tabbar-inner {
-  height: 6.5rem;
+  height: 8rem;
 }