Add sidebar & Fix #644

electron/utils/convert-and-scale.ts

@@ -36,18 +36,25 @@ const convertAndScale = async (
   if (!originalImage) {
     throw new Error("Could not grab the original image!");
   }
+  console.log("🚀 => originalImage:", originalImage);
 
   // Resize the image to the scale
   const newImage = sharp(upscaledImagePath, {
     limitInputPixels: false,
-  }).resize(
-    originalImage.width && originalImage.width * parseInt(scale),
-    originalImage.height && originalImage.height * parseInt(scale),
-    {
-      fit: "outside",
-    }
-  );
+  })
+    .resize(
+      originalImage.width && originalImage.width * parseInt(scale),
+      originalImage.height && originalImage.height * parseInt(scale),
+      {
+        fit: "outside",
+      }
+    )
+    .withMetadata({
+      density: originalImage.density,
+      orientation: originalImage.orientation,
+    });
 
+  console.log("🚀 => newImage:", newImage);
   // Convert compression percentage (0-100) to compressionLevel (0-9)
   const compressionLevel = Math.round((compression / 100) * 9);
 
@@ -63,11 +70,21 @@ const convertAndScale = async (
     })
   );
 
-  const buffer = await newImage.toBuffer();
+  const buffer = await newImage
+    .withMetadata({
+      density: originalImage.density,
+      orientation: originalImage.orientation,
+    })
+    .toBuffer();
+
   try {
     await sharp(buffer, {
       limitInputPixels: false,
     })
+      .withMetadata({
+        density: originalImage.density,
+        orientation: originalImage.orientation,
+      })
       .toFormat(saveImageAs as keyof FormatEnum, {
         ...(saveImageAs === "jpg" && {
           quality: 100 - (compression === 100 ? 99 : compression),
@@ -89,12 +106,9 @@ const convertAndScale = async (
           lossless: compression === 0,
           smartSubsample: true,
         }),
+
         force: true,
       })
-      .withMetadata({
-        orientation: originalImage.orientation,
-        density: originalImage.density,
-      })
       .toFile(processedImagePath);
   } catch (error) {
     logit("❌ Error converting to: ", saveImageAs, error);

renderer/components/icons/SidebarClosed.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+const SidebarClosed = ({ ...rest }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke="currentColor"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      {...rest}>
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path
+        d="M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-3.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z"
+        stroke-width="0"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default SidebarClosed;

renderer/components/icons/SidebarOpened.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+const SidebarOpened = ({ ...rest }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke="currentColor"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      {...rest}>
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path
+        d="M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-5.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z"
+        stroke-width="0"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default SidebarOpened;

renderer/components/upscayl-tab/view/ImageOptions.tsx

@@ -1,4 +1,6 @@
-import React, { useEffect } from "react";
+import SidebarClosed from "@/components/icons/SidebarClosed";
+import SidebarOpened from "@/components/icons/SidebarOpened";
+import React, { useEffect, useState } from "react";
 
 const ImageOptions = ({
   zoomAmount,
@@ -11,6 +13,8 @@ const ImageOptions = ({
   resetImagePaths: () => void;
   hideZoomOptions?: boolean;
 }) => {
+  const [openSidebar, setOpenSidebar] = useState(false);
+
   useEffect(() => {
     if (!localStorage.getItem("zoomAmount")) {
       localStorage.setItem("zoomAmount", zoomAmount);
@@ -20,15 +24,29 @@ const ImageOptions = ({
   }, []);
 
   return (
-    <div className="animate rounded-btn collapse fixed top-1 m-2 z-50 max-w-lg backdrop-blur-lg">
-      <input type="checkbox" className="peer" />
-      {/* <div className="peer-checked:outline-title-none collapse-title bg-opacity-25 text-center text-sm font-semibold uppercase backdrop-blur-2xl peer-checked:bg-base-300 peer-checked:text-base-content"> */}
-      <div className="outline-title peer-checked:outline-title-none collapse-title text-center text-sm font-semibold uppercase text-black mix-blend-difference outline-2 peer-checked:bg-base-300 peer-checked:text-base-content">
-        Show/Hide Image Settings
-      </div>
+    <div className="">
+      {/* <div
+        className={`bg-base-100 p-4 rounded-btn rounded-r-none fixed top-1/2 right-0 z-50 shadow-xl shadow-black group flex items-center gap-2`}
+        onClick={() => setOpenSidebar(!openSidebar)}>
+        <Sidebar className="text-white text-xl" />
+      </div> */}
 
-      <div className="collapse-content bg-base-100 text-base-content">
-        <div className="flex max-h-96 flex-col justify-center gap-5 overflow-auto p-5">
+      <div
+        className={`transition-all duration-500 bg-base-100 text-base-content h-screen w-[28rem] fixed right-0 top-0 z-50 shadow-xl shadow-black ${
+          openSidebar ? "right-0" : "-right-full translate-x-full"
+        }`}>
+        <div
+          className={`transition-all duration-500 bg-base-100 p-4 rounded-btn rounded-r-none absolute top-1/2 right-[100%] z-50 cursor-pointer flex items-center group gap-2`}
+          onClick={() => {
+            setOpenSidebar(!openSidebar);
+          }}>
+          {openSidebar ? (
+            <SidebarOpened className="text-white text-xl" />
+          ) : (
+            <SidebarClosed className="text-white text-xl" />
+          )}
+        </div>
+        <div className="flex flex-col justify-center gap-5 overflow-auto p-5">
           <button className="btn-primary btn" onClick={resetImagePaths}>
             Reset Image
           </button>

renderer/public/sidebar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layout-sidebar-left-collapse-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-2.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" stroke-width="0" fill="currentColor" /></svg>