Merge pull request #124 from fosslife/master

release v3.3.0
fosslife · Nov 14, 2024 · 2da24e9 · 2da24e9
2 parents 51850ab + 8f3f867
commit 2da24e9
Show file tree

Hide file tree

Showing 12 changed files with 177 additions and 152 deletions.
diff --git a/.prettierrc.js → .prettierrc.cjs b/.prettierrc.js → .prettierrc.cjs
@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   semi: true,
   trailingComma: "es5",
   singleQuote: false,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devtools-x",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -73,6 +73,7 @@
     "react-katex": "^3.0.1",
     "react-live": "^4.1.5",
     "react-pdf": "^9.1.1",
+    "react-resizable-panels": "^2.1.6",
     "react-router-dom": "6.22.3",
     "react-shepherd": "^4.3.0",
     "recharts": "2.12.3",

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "devtools-x"
-version = "3.2.0"
+version = "3.3.0"
 description = "Developer tools desktop application"
 authors = ["Sparkenstein"]
 license = "MIT"

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -44,7 +44,7 @@
   },
   "productName": "devtools-x",
   "mainBinaryName": "devtools-x",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "identifier": "com.fosslife.devtoolsx",
   "plugins": {
     "sql": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -17,11 +17,17 @@ import {
 } from "@mantine/core";
 import { Spotlight } from "@mantine/spotlight";
 import { loader } from "@monaco-editor/react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { IconSearch } from "@tabler/icons-react";
 import { useShepherdTour } from "react-shepherd";
 import steps from "./utils/steps";
 import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
+import {
+  ImperativePanelHandle,
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+} from "react-resizable-panels";
 
 // NOTE: keep Num converter here, do not lazy load. there's a rare crashing bug.
 import Nums from "./Features/number-tools/Nums";
@@ -197,85 +203,123 @@ function App() {
 
   useWindowEvent("keydown", listener);
 
+  const [iconMode, setIconMode] = useState(false);
+
+  const panelRef = useRef<ImperativePanelHandle>(null);
+
+  useEffect(() => {
+    if (panelRef.current) {
+      panelRef.current.resize(50);
+    }
+  }, []);
+
   return (
-    <>
-      <Box className={classes.container}>
-        <Box className={classes.navbar}>
-          <Navbar />
-        </Box>
-        <Group
-          className={`${transitionStage} ${classes.body}`}
-          grow
-          align="start"
-          onAnimationEnd={() => {
-            if (transitionStage === "fadeOut") {
-              setTransistionStage("fadeIn");
-              setDisplayLocation(location);
-            }
+    <Box className={classes.container}>
+      <PanelGroup direction="horizontal" autoSaveId="navbar-layout">
+        <Panel
+          id="navbar"
+          defaultSize={5}
+          maxSize={20}
+          minSize={5}
+          collapsible
+          collapsedSize={4}
+          ref={panelRef}
+          onCollapse={() => {
+            setIconMode(true);
+          }}
+          onExpand={() => {
+            setIconMode(false);
           }}
         >
-          <Stack gap={2} h="100%">
-            <Routes location={displayLocation}>
-              <Route
-                path="/"
-                element={
-                  <Welcome
-                    openSettings={(t: boolean) => setSettingsOpened(t)}
-                  />
-                }
-              ></Route>
-              <Route path="/json-formatter" element={<JsonFormatter />}></Route>
-              <Route path="/hash-text" element={<Hash />}></Route>
-              <Route path="/hash-file" element={<FileHash />}></Route>
-              <Route path="/password" element={<Random />}></Route>
-              <Route path="/jwt" element={<JWT />}></Route>
-              <Route path="/nums" element={<Nums />}></Route>
-              <Route path="/sql" element={<Sql />}></Route>
-              <Route path="/colors" element={<Colors />}></Route>
-              <Route path="/harmonies" element={<ColorHarmonies />}></Route>
-              <Route path="/color-testing" element={<ColorTesting />}></Route>
-              <Route path="/regex" element={<RegexTester />}></Route>
-              <Route path="/diff" element={<TextDiff />}></Route>
-              <Route path="/text" element={<TextUtils />}></Route>
-              <Route path="/markdown" element={<Markdown />}></Route>
-              <Route path="/readme" element={<Readme />}></Route>
-              <Route path="/yamljson" element={<YamlJson />}></Route>
-              <Route path="/snippets" element={<Snippets />}></Route>
-              <Route path="/pastebin" element={<Pastebin />}></Route>
-              <Route path="/repl" element={<Repl />}></Route>
-              <Route path="/image" element={<Image />}></Route>
-              <Route path="/bulk-image" element={<BulkImage />}></Route>
-              <Route path="/units" element={<UnitConverter />}></Route>
-              <Route path="/playground" element={<Playground />}></Route>
-              <Route path="/rest" element={<Rest />}></Route>
-              <Route path="/epoch" element={<Epoch />}></Route>
-              <Route path="/stateless" element={<Stateless />}></Route>
-              <Route path="/base64-image" element={<Base64Image />}></Route>
-              <Route path="/base64-text" element={<Base64Text />}></Route>
-              <Route path="/quicktype" element={<Quicktpe />}></Route>
-              <Route path="/ping" element={<Ping />}></Route>
-              <Route path="/html-minifier" element={<HtmlMinifier />}></Route>
-              <Route path="/css-minifier" element={<CssMinifier />}></Route>
-              <Route path="/js-minifier" element={<JsMinifier />}></Route>
-              <Route path="/url-parser" element={<UrlParser />}></Route>
-              <Route path="/url-encoder" element={<UrlEncoder />}></Route>
-              <Route path="/html-preview" element={<HtmlPreview />}></Route>
-              <Route path="/lorem" element={<Lorem />}></Route>
-              <Route path="/qrcode" element={<QrCode />}></Route>
-              <Route path="/pdf-reader" element={<PdfReader />}></Route>
-              <Route path="/cron" element={<Cron />}></Route>
-              <Route path="/ids" element={<Ids />}></Route>
-              <Route path="/compress" element={<Compress />}></Route>
-              <Route path="/faker" element={<Faker />}></Route>
-              <Route path="/cssplayground" element={<CssPlayground />}></Route>
-              <Route path="/svg-preview" element={<SvgPreview />}></Route>
-              <Route path="/qrcode-reader" element={<QrReadcer />}></Route>
-              <Route path="/hmac-generator" element={<HmacGenerator />}></Route>
-              <Route path="/image-crop" element={<ImageCrop />}></Route>
-            </Routes>
-          </Stack>
-        </Group>
-      </Box>
+          <Navbar iconMode={iconMode} setIconMode={(v) => setIconMode(v)} />
+        </Panel>
+        <PanelResizeHandle
+          style={{ backgroundColor: "var(--mantine-color-brand-5)", width: 1 }}
+        />
+        <Panel>
+          <Group
+            className={`${transitionStage} ${classes.body}`}
+            grow
+            align="start"
+            onAnimationEnd={() => {
+              if (transitionStage === "fadeOut") {
+                setTransistionStage("fadeIn");
+                setDisplayLocation(location);
+              }
+            }}
+          >
+            <Stack gap={2} h="100%">
+              <Routes location={displayLocation}>
+                <Route
+                  path="/"
+                  element={
+                    <Welcome
+                      openSettings={(t: boolean) => setSettingsOpened(t)}
+                    />
+                  }
+                ></Route>
+                <Route
+                  path="/json-formatter"
+                  element={<JsonFormatter />}
+                ></Route>
+                <Route path="/hash-text" element={<Hash />}></Route>
+                <Route path="/hash-file" element={<FileHash />}></Route>
+                <Route path="/password" element={<Random />}></Route>
+                <Route path="/jwt" element={<JWT />}></Route>
+                <Route path="/nums" element={<Nums />}></Route>
+                <Route path="/sql" element={<Sql />}></Route>
+                <Route path="/colors" element={<Colors />}></Route>
+                <Route path="/harmonies" element={<ColorHarmonies />}></Route>
+                <Route path="/color-testing" element={<ColorTesting />}></Route>
+                <Route path="/regex" element={<RegexTester />}></Route>
+                <Route path="/diff" element={<TextDiff />}></Route>
+                <Route path="/text" element={<TextUtils />}></Route>
+                <Route path="/markdown" element={<Markdown />}></Route>
+                <Route path="/readme" element={<Readme />}></Route>
+                <Route path="/yamljson" element={<YamlJson />}></Route>
+                <Route path="/snippets" element={<Snippets />}></Route>
+                <Route path="/pastebin" element={<Pastebin />}></Route>
+                <Route path="/repl" element={<Repl />}></Route>
+                <Route path="/image" element={<Image />}></Route>
+                <Route path="/bulk-image" element={<BulkImage />}></Route>
+                <Route path="/units" element={<UnitConverter />}></Route>
+                <Route path="/playground" element={<Playground />}></Route>
+                <Route path="/rest" element={<Rest />}></Route>
+                <Route path="/epoch" element={<Epoch />}></Route>
+                <Route path="/stateless" element={<Stateless />}></Route>
+                <Route path="/base64-image" element={<Base64Image />}></Route>
+                <Route path="/base64-text" element={<Base64Text />}></Route>
+                <Route path="/quicktype" element={<Quicktpe />}></Route>
+                <Route path="/ping" element={<Ping />}></Route>
+                <Route path="/html-minifier" element={<HtmlMinifier />}></Route>
+                <Route path="/css-minifier" element={<CssMinifier />}></Route>
+                <Route path="/js-minifier" element={<JsMinifier />}></Route>
+                <Route path="/url-parser" element={<UrlParser />}></Route>
+                <Route path="/url-encoder" element={<UrlEncoder />}></Route>
+                <Route path="/html-preview" element={<HtmlPreview />}></Route>
+                <Route path="/lorem" element={<Lorem />}></Route>
+                <Route path="/qrcode" element={<QrCode />}></Route>
+                <Route path="/pdf-reader" element={<PdfReader />}></Route>
+                <Route path="/cron" element={<Cron />}></Route>
+                <Route path="/ids" element={<Ids />}></Route>
+                <Route path="/compress" element={<Compress />}></Route>
+                <Route path="/faker" element={<Faker />}></Route>
+                <Route
+                  path="/cssplayground"
+                  element={<CssPlayground />}
+                ></Route>
+                <Route path="/svg-preview" element={<SvgPreview />}></Route>
+                <Route path="/qrcode-reader" element={<QrReadcer />}></Route>
+                <Route
+                  path="/hmac-generator"
+                  element={<HmacGenerator />}
+                ></Route>
+                <Route path="/image-crop" element={<ImageCrop />}></Route>
+              </Routes>
+            </Stack>
+          </Group>
+        </Panel>
+      </PanelGroup>
       <Drawer
         position="right"
         opened={settingsOpened}
@@ -336,7 +380,7 @@ function App() {
           <br />
         </Modal.Body>
       </Modal>
-    </>
+    </Box>
   );
 }
 

diff --git a/src/Layout/Navbar/components/GroupedView.tsx b/src/Layout/Navbar/components/GroupedView.tsx
@@ -4,7 +4,7 @@ import cx from "clsx";
 import { groupIcons } from "../items";
 import { DropDownItem } from "..";
 
-import classes from "../styles.module.css";
+import classes from "./grouped.module.css";
 import { useLocation, useNavigate } from "react-router-dom";
 import { cloneElement, ReactElement, useEffect, useState } from "react";
 

diff --git a/src/Layout/Navbar/components/grouped.module.css b/src/Layout/Navbar/components/grouped.module.css
@@ -0,0 +1,33 @@
+.active {
+  font-style: normal;
+  font-weight: bold;
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-gray-2));
+  background-color: light-dark(
+    var(--mantine-color-gray-3),
+    var(--mantine-color-gray-8)
+  );
+}
+
+.row {
+  cursor: pointer;
+  border-radius: 4px;
+  color: light-dark(black, var(--mantine-color-gray-2));
+  padding-inline: 10px;
+  user-select: none;
+}
+
+.row:hover {
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-blue-0));
+  background-color: light-dark(
+    var(--mantine-color-gray-3),
+    var(--mantine-color-gray-8)
+  );
+
+  .pinIcon {
+    visibility: visible;
+  }
+}
+
+.pinIcon {
+  visibility: hidden;
+}
diff --git a/src/Layout/Navbar/components/ungrouped.module.css b/src/Layout/Navbar/components/ungrouped.module.css
@@ -35,6 +35,7 @@
   align-items: center;
   color: light-dark(black, var(--mantine-color-gray-2));
   font-weight: 500;
+  min-width: max-content;
 }
 
 .row:hover {

diff --git a/src/Layout/Navbar/index.tsx b/src/Layout/Navbar/index.tsx
@@ -9,7 +9,7 @@ import {
 } from "@mantine/core";
 import React, { useEffect, useMemo, useState } from "react";
 
-import { IconHome, IconMenu2, IconX } from "@tabler/icons-react";
+import { IconHome } from "@tabler/icons-react";
 
 import { useLocation, useNavigate } from "react-router-dom";
 import cx from "clsx";
@@ -23,7 +23,7 @@ import { db } from "@/utils";
 import classes from "./styles.module.css";
 
 import { useLocalStorage, useWindowEvent } from "@mantine/hooks";
-import { trackButtonClick, trackOtherEvent } from "@/utils/analytics";
+import { trackOtherEvent } from "@/utils/analytics";
 import { GroupedView } from "./components/GroupedView";
 import { UngroupedView } from "./components/UngroupedView";
 
@@ -61,7 +61,12 @@ export type DropDownItem = {
 
 export { data };
 
-export const Navbar = () => {
+type Props = {
+  iconMode: boolean;
+  setIconMode: (value: boolean) => void;
+};
+
+export const Navbar = ({ iconMode, setIconMode }: Props) => {
   const location = useLocation();
   const nav = useNavigate();
   const [navItems, setNavItems] = useState<NavItem[]>([]);
@@ -70,7 +75,6 @@ export const Navbar = () => {
     defaultValue: true,
   });
   const { pinned, handleState, handleConfig } = useAppContext();
-  const [iconMode, setIconMode] = useState(false);
 
   useEffect(() => {
     async function pinnedItems() {
@@ -163,7 +167,7 @@ export const Navbar = () => {
     <Stack
       className={classes.navbar}
       id="navbar"
-      w={iconMode ? 50 : 250}
+      w={iconMode ? 50 : "fit-content"}
       align={iconMode ? "center" : undefined}
     >
       <Stack
@@ -195,19 +199,6 @@ export const Navbar = () => {
             mt={15}
             width={""}
           />
-
-          <ActionIcon
-            variant={"filled"}
-            onClick={() => {
-              trackButtonClick({
-                name: "toggle-icon-mode",
-                value: !iconMode,
-              });
-              setIconMode(!iconMode);
-            }}
-          >
-            {iconMode ? <IconMenu2 width={16} /> : <IconX width={16} />}
-          </ActionIcon>
         </Group>
       </Stack>