feat: add new UI components and icons

refactor: reorganize setup tabs and pages

dist-electron/main.js

@@ -38,7 +38,11 @@ function createWindow() {
     icon: path.join(__dirname, "path-to-your-icon", "electron-vite.svg"),
     webPreferences: {
       preload: path.join(__dirname, "preload.mjs")
-    }
+    },
+    width: 900,
+    height: 700,
+    minWidth: 900,
+    minHeight: 700
   });
   win.webContents.on("did-finish-load", () => {
     win == null ? void 0 : win.webContents.send("main-process-message", (/* @__PURE__ */ new Date()).toLocaleString());

electron/main.ts

@@ -51,6 +51,10 @@ function createWindow() {
     webPreferences: {
       preload: path.join(__dirname, "preload.mjs"),
     },
+    width: 900,
+    height: 700,
+    minWidth: 900,
+    minHeight: 700,
   });
 
   // Send a message to the Renderer process when the window has finished loading

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.1",
     "@headlessui/react": "^2.1.3",
+    "@tanstack/react-query": "^5.53.3",
     "axios": "^1.7.5",
     "class-variance-authority": "^0.7.0",
     "framer-motion": "^11.3.30",

src/App.tsx

@@ -4,16 +4,21 @@ import router from "./router/MainRouter";
 import "./i18n";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 const App = () => {
   const { i18n } = useTranslation();
   useEffect(() => {
     const lng = navigator.language;
     i18n.changeLanguage(lng);
   }, []);
+
+  const queryClient = new QueryClient();
   return (
     <ConfigProvider>
-      <RouterProvider router={router}></RouterProvider>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router}></RouterProvider>
+      </QueryClientProvider>
     </ConfigProvider>
   );
 };

src/assets/Icons/CheckIcon.tsx

@@ -0,0 +1,24 @@
+const CheckIcon = ({
+  stroke,
+  className,
+}: {
+  stroke?: number;
+  className?: string;
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={stroke}
+    stroke="currentColor"
+    className={className}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m4.5 12.75 6 6 9-13.5"
+    />
+  </svg>
+);
+
+export default CheckIcon;

src/assets/Icons/DownIcon.tsx

@@ -0,0 +1,24 @@
+const DownIcon = ({
+  stroke,
+  className,
+}: {
+  stroke?: number;
+  className?: string;
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={stroke}
+    stroke="currentColor"
+    className={className}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m19.5 8.25-7.5 7.5-7.5-7.5"
+    />
+  </svg>
+);
+
+export default DownIcon;

src/assets/Icons/FolderAddIcon.tsx

@@ -0,0 +1,40 @@
+const FolderAddIcon = ({
+  stroke,
+  className,
+  solid,
+}: {
+  stroke?: number;
+  className?: string;
+  solid?: boolean;
+}) =>
+  solid ? (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        d="M19.5 21a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3h-5.379a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H4.5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h15Zm-6.75-10.5a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25v2.25a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V10.5Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ) : (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={stroke}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+      />
+    </svg>
+  );
+
+export default FolderAddIcon;

src/assets/Icons/LeftIcon.tsx

@@ -0,0 +1,24 @@
+const LeftIcon = ({
+  stroke,
+  className,
+}: {
+  stroke?: number;
+  className?: string;
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={stroke}
+    stroke="currentColor"
+    className={className}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M15.75 19.5 8.25 12l7.5-7.5"
+    />
+  </svg>
+);
+
+export default LeftIcon;

src/assets/Icons/RightIcon.tsx

@@ -0,0 +1,24 @@
+const RightIcon = ({
+  stroke,
+  className,
+}: {
+  stroke?: number;
+  className?: string;
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={stroke}
+    stroke="currentColor"
+    className={className}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m8.25 4.5 7.5 7.5-7.5 7.5"
+    />
+  </svg>
+);
+
+export default RightIcon;

src/assets/Icons/UpIcon.tsx

@@ -0,0 +1,24 @@
+const UpIcon = ({
+  stroke,
+  className,
+}: {
+  stroke?: number;
+  className?: string;
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={stroke}
+    stroke="currentColor"
+    className={className}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m4.5 15.75 7.5-7.5 7.5 7.5"
+    />
+  </svg>
+);
+
+export default UpIcon;

src/components/Crax.tsx

@@ -21,7 +21,7 @@ const Crax = () => {
   }, []);
 
   return (
-    <div className="text-4xl font-semibold text-center">
+    <div className="text-4xl font-semibold text-center py-4">
       {eyeOpen ? "0_0" : ">_<"}
     </div>
   );

src/components/Icon.tsx

@@ -1,12 +1,18 @@
 import BookmarkIcon from "../assets/Icons/BookmarkIcon";
+import CheckIcon from "../assets/Icons/CheckIcon";
 import CloseIcon from "../assets/Icons/CloseIcon";
+import DownIcon from "../assets/Icons/DownIcon";
 import FilmIcon from "../assets/Icons/FilmIcon";
+import FolderAddIcon from "../assets/Icons/FolderAddIcon";
 import FolderOpenIcon from "../assets/Icons/FolderOpenIcon";
 import GearIcon from "../assets/Icons/GearIcon";
+import LeftIcon from "../assets/Icons/LeftIcon";
 import MoreHorizontalIcon from "../assets/Icons/MoreHorizontalIcon";
 import PlayIcon from "../assets/Icons/PlayIcon";
+import RightIcon from "../assets/Icons/RightIcon";
 import SearchIcon from "../assets/Icons/SearchIcon";
 import TvIcon from "../assets/Icons/TvIcon";
+import UpIcon from "../assets/Icons/UpIcon";
 import UploadIcon from "../assets/Icons/UploadIcon";
 
 const iconMap = {
@@ -18,8 +24,14 @@ const iconMap = {
   moreHorizontal: MoreHorizontalIcon,
   upload: UploadIcon,
   folderOpen: FolderOpenIcon,
+  folderAdd: FolderAddIcon,
   gear: GearIcon,
-  tv: TvIcon
+  tv: TvIcon,
+  left: LeftIcon,
+  right: RightIcon,
+  up: UpIcon,
+  down: DownIcon,
+  check: CheckIcon,
 };
 
 export type IconName = keyof typeof iconMap;

src/components/inputs/Button.tsx

@@ -2,49 +2,66 @@ import { VariantProps } from "class-variance-authority";
 import buttonStyles from "../../styles/buttonStyles";
 import Icon, { IconName } from "../Icon";
 import { useNavigate } from "react-router-dom";
+import { ReactNode } from "react";
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonStyles> {
+export type ButtonProps = VariantProps<typeof buttonStyles> & {
   icon?: IconName;
   iconType?: "solid" | "outline";
   to?: string;
   rounded?: boolean;
-}
+  isIconLeft?: boolean;
+  fullWidth?: boolean;
+  className?: string;
+  children?: ReactNode;
+  onClick?: () => void;
+};
 
 const Button: React.FC<ButtonProps> = ({
   className,
   variant,
-  title,
   size = "small",
   icon,
   iconType,
   to = "",
   rounded = false,
+  isIconLeft = false,
+  fullWidth,
   children,
   ...props
 }) => {
   const navigate = useNavigate();
 
   return (
     <button
-      title={title}
-      className={buttonStyles({ variant, size, rounded, className })}
+      className={buttonStyles({ variant, size, rounded, fullWidth, className })}
       onClick={() => navigate(to)}
       {...props}
     >
-      {icon && (
+      {icon && !isIconLeft && (
         <div
           className={`aspect-square flex justify-center items-center ${
             size === "small" ? "w-8 h-8" : "w-8 h-8 mr-2"
           }`}
         >
-          <Icon name={icon}></Icon>
+          <Icon name={icon} stroke={2}></Icon>
         </div>
       )}
-      <span className={`w-fit h-6 flex items-center ${icon ? "pr-2" : "px-2"}`}>
+      <span
+        className={`w-fit h-6 flex items-center ${
+          icon ? (isIconLeft ? "pl-2" : "pr-2") : "px-2"
+        }`}
+      >
         {children}
       </span>
+      {icon && isIconLeft && (
+        <div
+          className={`aspect-square flex justify-center items-center ${
+            size === "small" ? "w-8 h-8" : "w-8 h-8 ml-2"
+          }`}
+        >
+          <Icon name={icon} stroke={2}></Icon>
+        </div>
+      )}
     </button>
   );
 };