Merge pull request #130 from fosslife/master

Author: Sparkenstein

README.md

@@ -19,6 +19,11 @@ So here's DevTools-X -- an x-platform non-electron, collection of dev-tools that
 
 <img width="1317" alt="Screenshot 2024-04-01 at 12 20 37 PM" src="https://github.com/fosslife/devtools-x/assets/24642451/4ab136a2-e8df-448e-96c2-e6525a35b393">
 
+### NOTE
+
+After migrating to tauri v2, app is facing minor bugs again, (because of tauri) You might see basic css breaking or app not working on specific platform. Please
+open a bug in issue tracker if you do. I will fix it if anything I can fix on my side.
+
 ## Installation
 
 ### Download prebuilt binaries

src-tauri/src/main.rs

@@ -181,6 +181,7 @@ fn main() {
         .title("DevTools-X")
         .inner_size(1000.0, 850.0)
         .resizable(true)
+        .min_inner_size(900.0, 800.0)
         .fullscreen(false)
         .build()?;
       // #[cfg(debug_assertions)]

src-tauri/tauri.conf.json

@@ -65,6 +65,7 @@
       },
       "dangerousDisableAssetCspModification": ["style-src"],
       "csp": {
+        "connect-src": ["ipc:", "http://ipc.localhost"],
         "default-src": [
           "'self'",
           "blob:",

src/App.tsx

@@ -37,7 +37,7 @@ import { Settings } from "./Layout/Settings";
 import { useDisclosure, useWindowEvent } from "@mantine/hooks";
 import { trackOtherEvent, trackPageView } from "./utils/analytics";
 import { db } from "./utils";
-import { ask, message } from "@tauri-apps/plugin-dialog";
+import { ask } from "@tauri-apps/plugin-dialog";
 import { relaunch } from "@tauri-apps/plugin-process";
 
 // Lazy load components
@@ -159,12 +159,8 @@ function App() {
     async function init() {
       const update = await check();
       if (update === null) {
-        await message("Failed to check for updates.\nPlease try again later.", {
-          title: "Error",
-          kind: "error",
-          okLabel: "OK",
-        });
-        return;
+        console.log("no update");
+        // can re use this logic to manually check for updates
       } else if (update?.available) {
         const yes = await ask(
           `Update to ${update.version} is available!\n\nRelease notes: ${update.body}`,
@@ -247,9 +243,9 @@ function App() {
           id="navbar"
           defaultSize={5}
           maxSize={20}
-          minSize={5}
+          minSize={8}
           collapsible
-          collapsedSize={4}
+          collapsedSize={5}
           ref={panelRef}
           onCollapse={() => {
             setIconMode(true);

src/Features/url/UrlParser.tsx

@@ -23,7 +23,7 @@ export default function UrlParser() {
   const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
     e.preventDefault();
     if (!key || !value) return;
-    searchParams.set(key, value);
+    searchParams.append(key, value);
     setSearchParams(searchParams);
     setUrl(
       url.split("?")[0] +
@@ -76,23 +76,24 @@ export default function UrlParser() {
             </Table>
 
             <Divider />
-            <Table w="100%" withColumnBorders>
+            <Table w="100%" withColumnBorders striped>
               <Table.Thead>
                 <Table.Tr>
                   <Table.Th>Key</Table.Th>
                   <Table.Th>Value</Table.Th>
                 </Table.Tr>
               </Table.Thead>
               <Table.Tbody>
-                {Array.from(searchParams.keys()).map((key, i) => (
+                {[...new Set(searchParams.keys())].map((key, i) => (
                   <Table.Tr key={key + i}>
                     <Table.Td>{key}</Table.Td>
-                    <Table.Td>{searchParams.get(key)}</Table.Td>
+                    <Table.Td>{searchParams.getAll(key).join(", ")}</Table.Td>
                   </Table.Tr>
                 ))}
                 <Table.Tr>
                   <Table.Td>
                     <TextInput
+                      autoComplete="off"
                       value={key}
                       onChange={(e) => {
                         let key = e.currentTarget.value;
@@ -103,6 +104,7 @@ export default function UrlParser() {
                   </Table.Td>
                   <Table.Td>
                     <TextInput
+                      autoComplete="off"
                       value={value}
                       onChange={(e) => {
                         let value = e.currentTarget.value;

src/Layout/Navbar/ColorIcons.tsx

@@ -4,6 +4,8 @@ export const Package = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48"
     enableBackground="new 0 0 48 48"
+    height={20}
+    width={20}
   >
     <path
       fill="#FF9800"
@@ -22,6 +24,8 @@ export const Transit = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48"
     enableBackground="new 0 0 48 48"
+    height={20}
+    width={20}
   >
     <path
       fill="#FFC107"
@@ -61,6 +65,8 @@ export const DataProtection = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48"
     enableBackground="new 0 0 48 48"
+    height={20}
+    width={20}
   >
     <g fill="#D1C4E9">
       <path d="M38,7H10C8.9,7,8,7.9,8,9v6c0,1.1,0.9,2,2,2h28c1.1,0,2-0.9,2-2V9C40,7.9,39.1,7,38,7z" />
@@ -80,6 +86,8 @@ export const Safe = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48"
     enableBackground="new 0 0 48 48"
+    height={20}
+    width={20}
   >
     <rect x="8" y="39" fill="#455A64" width="6" height="3" />
     <rect x="34" y="39" fill="#455A64" width="6" height="3" />
@@ -122,6 +130,8 @@ export const Picture = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48"
     enableBackground="new 0 0 48 48"
+    height={20}
+    width={20}
   >
     <path
       fill="#F57C00"
@@ -139,6 +149,8 @@ export const Shop = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48"
     enableBackground="new 0 0 48 48"
+    height={20}
+    width={20}
   >
     <rect x="5" y="19" fill="#CFD8DC" width="38" height="19" />
     <rect x="5" y="38" fill="#B0BEC5" width="38" height="4" />
@@ -182,6 +194,8 @@ export const MindMap = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48"
     enableBackground="new 0 0 48 48"
+    height={20}
+    width={20}
   >
     <polygon
       fill="#CFD8DC"
@@ -204,6 +218,8 @@ export const Binoculars = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48"
     enableBackground="new 0 0 48 48"
+    height={20}
+    width={20}
   >
     <g fill="#37474F">
       <circle cx="33" cy="16" r="6" />
@@ -231,6 +247,8 @@ export const Electricity = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48"
     enableBackground="new 0 0 48 48"
+    height={20}
+    width={20}
   >
     <path
       fill="#00BCD4"
@@ -245,6 +263,8 @@ export const SerialTask = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48"
     enableBackground="new 0 0 48 48"
+    height={20}
+    width={20}
   >
     <path
       fill="#90CAF9"

src/Layout/Navbar/components/GroupedView.tsx

@@ -48,17 +48,7 @@ export const GroupedView = ({
         .map((group) => {
           return (
             <Accordion.Item key={group.group} value={group.group}>
-              <Accordion.Control
-                icon={cloneElement(groupIcons[group.group], {
-                  size: "16px",
-                })}
-                styles={{
-                  icon: {
-                    height: "20px",
-                    width: "20px",
-                  },
-                }}
-              >
+              <Accordion.Control icon={cloneElement(groupIcons[group.group])}>
                 <Text size="sm">{group.group}</Text>
               </Accordion.Control>
               <Accordion.Panel>

src/Layout/Navbar/index.tsx

@@ -167,7 +167,7 @@ export const Navbar = ({ iconMode, setIconMode }: Props) => {
     <Stack
       className={classes.navbar}
       id="navbar"
-      w={iconMode ? 50 : "fit-content"}
+      w={"auto"}
       align={iconMode ? "center" : undefined}
     >
       <Stack

src/Layout/Navbar/styles.module.css

@@ -40,7 +40,6 @@
 }
 
 .iconsBarRow {
-  font-size: 18px;
   cursor: pointer;
   display: flex;
   justify-content: start;

src/index.css

@@ -21,11 +21,10 @@ code {
 
 /* hide scrollbar on left nav */
 ::-webkit-scrollbar {
-  width: 2px; /* Remove scrollbar space */
-  height: 2px;
-  border-radius: 10px;
+  display: none;
 }
 
+/* this won't have any effect but keeping it here */
 ::-webkit-scrollbar-track {
   background: transparent; /* color of the tracking area */
 }