Merge pull request #869 from Dygmalab/reorganizeViewTabs3

Merge Standard and Single views into one
Dygmalab · Sep 19, 2024 · 9fbb991 · 9fbb991
2 parents 19e8aea + 6fd88e6
commit 9fbb991
Show file tree

Hide file tree

Showing 84 changed files with 2,634 additions and 1,984 deletions.
diff --git a/package.json b/package.json
@@ -134,6 +134,7 @@
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",

diff --git a/src/api/keymap/db/mediacontrols.tsx b/src/api/keymap/db/mediacontrols.tsx
@@ -134,7 +134,7 @@ const MediaControlTable = {
     {
       code: 22713,
       labels: {
-        top: "Shuf.",
+        top: "",
         primary: <IconMediaShuffle size="sm" />,
         verbose: "Shuffle",
       },

diff --git a/src/api/keymap/db/numpad.ts b/src/api/keymap/db/numpad.ts
@@ -128,7 +128,7 @@ const NumpadTable = {
     {
       code: 83,
       labels: {
-        primary: "NUMLOCK",
+        primary: "NUM LOCK",
         verbose: "Num Lock",
       },
     },

diff --git a/src/main/managers/Store.ts b/src/main/managers/Store.ts
@@ -25,7 +25,7 @@ const schema: Schema<StorageType> = {
       isStandardView: true,
       autoUpdate: undefined,
     },
-    required: ["backupFolder", "language", "darkMode", "showDefaults"],
+    required: [],
   },
   neurons: {
     type: "array",

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useRef } from "react";
 import { Routes, Navigate, Route, useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import { ThemeProvider } from "styled-components";
@@ -68,6 +68,9 @@ function App() {
   const [fwUpdate, setFwUpdate] = useState(false);
   const [loading, setLoading] = useState(false);
 
+  const saveButtonRef = useRef(null);
+  const discardChangesButtonRef = useRef(null);
+
   const { state, dispatch } = useDevice();
   const navigate = useNavigate();
   const varFlashing = React.useRef(false);
@@ -391,6 +394,8 @@ function App() {
         allowBeta={allowBeta}
         modified={contextBar}
         loading={loading}
+        saveButtonRef={saveButtonRef}
+        discardChangesButtonRef={discardChangesButtonRef}
       />
       <div className="main-container">
         <Routes>
@@ -436,6 +441,8 @@ function App() {
                 inContext={contextBar}
                 restoredOk={restoredOk}
                 handleSetRestoredOk={handleSetRestoredOk}
+                saveButtonRef={saveButtonRef}
+                discardChangesButtonRef={discardChangesButtonRef}
               />
             }
           />
@@ -447,6 +454,8 @@ function App() {
                 startContext={startContext}
                 cancelContext={cancelContext}
                 setLoading={setLoadingData}
+                saveButtonRef={saveButtonRef}
+                discardChangesButtonRef={discardChangesButtonRef}
               />
             }
           />
@@ -458,6 +467,8 @@ function App() {
                 startContext={startContext}
                 cancelContext={cancelContext}
                 setLoading={setLoadingData}
+                saveButtonRef={saveButtonRef}
+                discardChangesButtonRef={discardChangesButtonRef}
               />
             }
           />
@@ -488,6 +499,8 @@ function App() {
                 setLoading={setLoadingData}
                 autoUpdate={autoUpdate}
                 updateAutoUpdate={updateAutoUpdate}
+                saveButtonRef={saveButtonRef}
+                discardChangesButtonRef={discardChangesButtonRef}
               />
             }
           />

diff --git a/src/renderer/component/Button/SuperkeyPicker.tsx b/src/renderer/component/Button/SuperkeyPicker.tsx
@@ -69,7 +69,6 @@ const Style = Styled.div`
     }
     .superkeyButtonWrapper {
         position: relative;
-        align-self: self-end;
         margin-top: auto;
         &:hover {
             .superkeyDeleteButton {
@@ -171,6 +170,7 @@ function SuperkeyPicker(props: SuperkeyPickerProps) {
     macros,
     keymapDB,
     updateAction,
+    variant = "regular",
   } = props;
   const [controlDeleteButton, setControlDeleteButton] = React.useState(false);
   const [keyContent, setKeyContent] = useState<string | JSX.Element>("Loading...");
@@ -229,23 +229,27 @@ function SuperkeyPicker(props: SuperkeyPickerProps) {
   if (superkeys === null) return null;
   return (
     <Style>
-      <div className={`superkeyAction ${elementActive ? "active" : ""}`}>
+      <div className={`superkeyAction ${elementActive ? "active" : ""} ${variant === "subtle" ? "!py-2" : ""}`}>
         <div className={`superkeyTitle ${isStandardViewSuperkeys ? "standard" : "single"}`}>
-          {icon}
-          <Heading headingLevel={5} renderAs="h5">
+          {variant === "regular" && icon}
+          <Heading headingLevel={5} renderAs="h5" className={`${variant === "subtle" ? "my-0 !text-2xxs" : ""}`}>
             {title}
           </Heading>
         </div>
         {isStandardViewSuperkeys && <div className="description">{description}</div>}
         <div className="superkeyButtonWrapper">
-          {controlDeleteButton && (
+          {controlDeleteButton && variant === "regular" && (
             // TODO: Div with click should not exist, use Button instead!!
             <div className="superkeyDeleteButton" aria-hidden="true" onClick={() => updateAction(index, 0)}>
               <IconClose />
             </div>
           )}
           {/* TODO: Div with click should not exist, use Button instead!! */}
-          <div className="superkeyButton" aria-hidden="true" onClick={() => onClick(index)}>
+          <div
+            className={`superkeyButton ${variant === "subtle" ? "!mt-0 pointer-events-none" : ""}`}
+            aria-hidden="true"
+            onClick={() => onClick(index)}
+          >
             <div className="superkeyButtonInner">{keyContent}</div>
             {superkeys[selected] !== undefined ? <ListModifier keyCode={superkeys[selected].actions[index]} /> : ""}
           </div>

diff --git a/src/renderer/components/atoms/Alert.tsx b/src/renderer/components/atoms/Alert.tsx
@@ -17,7 +17,7 @@ const alertVariants = cva("relative w-full rounded-lg", {
       callout: "flex [&>svg]:absolute [&_svg]:left-[-18px] [&_svg]:top-4",
     },
     size: {
-      sm: "text-xs px-[24px] py-[16px]",
+      sm: "text-xs px-[24px] py-[8px]",
       md: "text-sm",
       lg: "text-base",
     },

diff --git a/src/renderer/components/atoms/Checkbox.tsx b/src/renderer/components/atoms/Checkbox.tsx
@@ -13,7 +13,7 @@ const CheckboxWrapper = cva("flex flex-col", {
   variants: {
     variant: {
       default:
-        "p-[2px] m-0 w-[18px] h-[18px] self-center relative rounded-sm bg-transparent border-2 border-solid border-gray-100 dark:border-gray-700 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-gray-600 data-[state=checked]:before:bg-green-200 dark:data-[state=checked]:before:bg-green-200 data-[state=checked]:text-gray-25 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 data-[state=checked]:border-green-200 dark:data-[state=checked]:border-green-200 [&_span]:w-full [&_span]:h-full before:content-[''] before:rounded-sm before:bg-gray-100 dark:before:bg-gray-700 before:absolute before:top-[2px] before:left-[2px] before:w-[10px] before:h-[10px]",
+        "p-[2px] m-0 w-[18px] h-[18px] self-center relative rounded-sm bg-transparent border-2 border-solid border-gray-100 dark:border-gray-500 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-gray-600 data-[state=checked]:before:bg-green-200 dark:data-[state=checked]:before:bg-green-200 data-[state=checked]:text-gray-25 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 data-[state=checked]:border-green-200 dark:data-[state=checked]:border-green-200 [&_span]:w-full [&_span]:h-full before:content-[''] before:rounded-sm before:bg-gray-100 dark:before:bg-gray-500 before:absolute before:top-[2px] before:left-[2px] before:w-[10px] before:h-[10px]",
     },
   },
   defaultVariants: {

diff --git a/src/renderer/components/atoms/Separator.tsx b/src/renderer/components/atoms/Separator.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@Renderer/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-gray-100/25 dark:bg-gray-500/50",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className,
+    )}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/src/renderer/components/atoms/Tabs.tsx b/src/renderer/components/atoms/Tabs.tsx
@@ -10,7 +10,9 @@ const tabsTriggerVariants = cva("flex flex-col", {
   variants: {
     variant: {
       default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-      tab: "tab-item tab-item--active w-full flex flex-row text-left justify-start relative items-center gap-2 font-semibold mt-0 transition-all before:absolute before:w-[32px] before:h-[68px] before:content-[''] before:bg-lightAccent before:opacity-0 before:transition-opacity before:duration-200 before:z-[1] dark:text-gray-100 after:content-[''] after:h-[24px] after:w-[3px] after:absolute after:rounded-tr-[3px] after:rounded-br-[3px] after:opacity-0 after:transition-opacity after:duration-200 after:bg-gradient-to-t after:from-secondary after:to-primary after:top-[50%] after:translate-y-[-50%] after:z-[1] hover:dark:text-gray-25 text-gray-400 dark:text-gray-100 data-[state=active]:before:opacity-50 data-[state=active]:dark:before:opacity-100 data-[state=active]:after:opacity-100 data-[state=active]:text-purple-200 data-[state=active]:dark:text-gray-25",
+      tab: "tab-item tab-item--active w-full flex flex-row text-left justify-start relative items-center gap-2 font-semibold mt-0 transition-all before:absolute before:w-[32px] before:h-[68px] before:content-[''] before:bg-lightAccent before:opacity-0 before:transition-opacity before:duration-200 before:z-[1] dark:text-gray-100 after:content-[''] after:h-[24px] after:w-[3px] after:absolute after:rounded-tr-[3px] after:rounded-br-[3px] after:opacity-0 after:transition-opacity after:duration-200 after:bg-gradient-to-t after:from-secondary after:to-primary after:top-[50%] after:translate-y-[-50%] after:z-[1] hover:dark:text-gray-25 text-gray-400 dark:text-gray-100 data-[state=active]:before:opacity-50 data-[state=active]:dark:before:opacity-100 data-[state=active]:after:opacity-100 data-[state=active]:text-purple-200 data-[state=active]:dark:text-gray-25 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+      "tab-horizontal":
+        "tab-item tab-item--active w-full flex flex-row text-left justify-start relative items-center gap-2 font-semibold mt-0 transition-all dark:text-gray-100 after:content-[''] after:w-[24px] after:h-[3px] after:absolute after:rounded-br-[3px] after:rounded-bl-[3px] after:opacity-0 after:transition-opacity after:duration-200 after:bg-gradient-to-t after:from-secondary after:to-primary after:bottom-[-3px] after:translate-x-[-50%] after:left-1/2 after:z-[1] hover:dark:text-gray-25 text-gray-400 dark:text-gray-100 data-[state=active]:after:opacity-100 data-[state=active]:text-purple-200 data-[state=active]:dark:text-gray-25",
     },
     size: {
       default: "px-2 py-2.5 rounded text-sm",

diff --git a/src/renderer/components/atoms/icons/IconKeyboard.tsx b/src/renderer/components/atoms/icons/IconKeyboard.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 
 function IconKeyboard() {
   return (
-    <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M8 15h8M5 9h2m-2 3h2m1-3h2m-2 3h2m1 0h2m-2-3h2m1 0h2m-2 3h2m1-3h2m-2 3h2M4 6h16a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1z"
         stroke="currentColor"

diff --git a/src/renderer/components/atoms/icons/IconNoKey.tsx b/src/renderer/components/atoms/icons/IconNoKey.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 
 function IconNoKey() {
   return (
-    <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <mask
         id="prefix__IconNoKey"
         style={{

diff --git a/src/renderer/components/atoms/icons/IconPen.tsx b/src/renderer/components/atoms/icons/IconPen.tsx
@@ -1,18 +1,59 @@
 import * as React from "react";
 
-function IconPen() {
+interface IconProps {
+  size?: "xs" | "sm" | "md";
+}
+
+function IconPen({ size = "md" }: IconProps) {
   return (
-    <svg width={24} height={24} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M15.1,5l1.4-1.3c0.4-0.4,1-0.4,1.4,0L20.3,6c0.4,0.4,0.4,1,0,1.4l-1.4,1.3L15.1,5z"
-        fill="none"
-        stroke="currentColor"
-        strokeMiterlimit={10}
-      />
-      <path d="M17.3,10.4L6.7,21H3v-3.8L13.6,6.6" fill="none" stroke="currentColor" strokeMiterlimit={10} />
-      <path d="M23.2,15.4" fill="none" stroke="currentColor" strokeMiterlimit={10} />
-      <path d="M8.4,1" fill="none" stroke="currentColor" strokeMiterlimit={10} />
-    </svg>
+    <>
+      {size === "md" ? (
+        <svg width={24} height={24} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M15.1,5l1.4-1.3c0.4-0.4,1-0.4,1.4,0L20.3,6c0.4,0.4,0.4,1,0,1.4l-1.4,1.3L15.1,5z"
+            fill="none"
+            stroke="currentColor"
+            strokeMiterlimit={10}
+          />
+          <path d="M17.3,10.4L6.7,21H3v-3.8L13.6,6.6" fill="none" stroke="currentColor" strokeMiterlimit={10} />
+          <path d="M23.2,15.4" fill="none" stroke="currentColor" strokeMiterlimit={10} />
+          <path d="M8.4,1" fill="none" stroke="currentColor" strokeMiterlimit={10} />
+        </svg>
+      ) : (
+        ""
+      )}
+      {size === "sm" ? (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <mask id="mask0_690_11" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+            <path d="M0 20V0H5.83926L15.3476 9.50836L16.3459 8.51007L7.83579 0H20V20H0Z" fill="white" />
+          </mask>
+          <g mask="url(#mask0_690_11)">
+            <path
+              d="M3 14.5821L12.7083 4.87377L15.1262 7.29167L5.41789 17H3V14.5821ZM15.8333 6.58456L13.4154 4.16667L14.1393 3.44281C14.2695 3.31263 14.4805 3.31263 14.6107 3.44281L16.5572 5.3893C16.6874 5.51947 16.6874 5.73053 16.5572 5.8607L15.8333 6.58456Z"
+              stroke="currentColor"
+            />
+          </g>
+        </svg>
+      ) : (
+        ""
+      )}
+      {size === "xs" ? (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <mask id="mask0_690_11" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+            <path d="M0 16V0H4.6714L12.2781 7.60669L13.0767 6.80806L6.26864 0H16V16H0Z" fill="white" />
+          </mask>
+          <g mask="url(#mask0_690_11)">
+            <path
+              d="M2.4 11.6657L10.1667 3.89902L12.101 5.83333L4.33431 13.6H2.4V11.6657ZM12.6667 5.26765L10.7324 3.33333L11.3114 2.75425C11.4156 2.65011 11.5844 2.65011 11.6886 2.75425L13.2458 4.31144C13.3499 4.41558 13.3499 4.58442 13.2458 4.68856L12.6667 5.26765Z"
+              stroke="currentColor"
+              strokeWidth="0.8"
+            />
+          </g>
+        </svg>
+      ) : (
+        ""
+      )}
+    </>
   );
 }
 

diff --git a/src/renderer/components/atoms/icons/IconPlus.tsx b/src/renderer/components/atoms/icons/IconPlus.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 
 interface IconPlusProps {
-  size: "xs" | "md";
+  size?: "xs" | "md";
 }
 
 const IconPlus = ({ size = "md" }: IconPlusProps) => (

diff --git a/src/renderer/components/atoms/icons/IconSplitView.tsx b/src/renderer/components/atoms/icons/IconSplitView.tsx
@@ -0,0 +1,54 @@
+import * as React from "react";
+
+interface IconProps {
+  size?: "sm" | "md";
+}
+
+function IconSplitView({ size = "md" }: IconProps) {
+  return (
+    <>
+      {size === "md" ? (
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <mask id="mask0_234_4772" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="3" y="3" width="18" height="18">
+            <path d="M15 3H17V5H15V3Z" fill="currentColor" />
+            <path d="M19 3H21V5H19V3Z" fill="currentColor" />
+            <path d="M19 7H21V9H19V7Z" fill="currentColor" />
+            <path d="M19 11H21V13H19V11Z" fill="currentColor" />
+            <path d="M19 15H21V17H19V15Z" fill="currentColor" />
+            <path d="M19 19H21V21H19V19Z" fill="currentColor" />
+            <path d="M15 19H17V21H15V19Z" fill="currentColor" />
+            <path d="M3 3H9V21H3V3Z" fill="currentColor" />
+          </mask>
+          <g mask="url(#mask0_234_4772)">
+            <rect x="3.6" y="3.6" width="16.8" height="16.8" rx="1.4" stroke="currentColor" strokeWidth="1.2" />
+          </g>
+          <path d="M12 1V23" stroke="currentColor" strokeWidth="1.2" />
+        </svg>
+      ) : (
+        ""
+      )}
+      {size === "sm" ? (
+        <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <mask id="mask0_683_16" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="2" y="2" width="16" height="16">
+            <path d="M12.5 2.5H14.1667V4.16667H12.5V2.5Z" fill="currentColor" />
+            <path d="M15.8333 2.5H17.5V4.16667H15.8333V2.5Z" fill="currentColor" />
+            <path d="M15.8333 5.83333H17.5V7.5H15.8333V5.83333Z" fill="currentColor" />
+            <path d="M15.8333 9.16667H17.5V10.8333H15.8333V9.16667Z" fill="currentColor" />
+            <path d="M15.8333 12.5H17.5V14.1667H15.8333V12.5Z" fill="currentColor" />
+            <path d="M15.8333 15.8333H17.5V17.5H15.8333V15.8333Z" fill="currentColor" />
+            <path d="M12.5 15.8333H14.1667V17.5H12.5V15.8333Z" fill="currentColor" />
+            <path d="M2.5 2.5H7.5V17.5H2.5V2.5Z" fill="currentColor" />
+          </mask>
+          <g mask="url(#mask0_683_16)">
+            <rect x="3" y="3" width="14" height="14" rx="1.16667" stroke="currentColor" />
+          </g>
+          <path d="M10 0.833313V19.1666" stroke="currentColor" />
+        </svg>
+      ) : (
+        ""
+      )}
+    </>
+  );
+}
+
+export default IconSplitView;
diff --git a/src/renderer/components/atoms/icons/index.tsx b/src/renderer/components/atoms/icons/index.tsx
@@ -119,6 +119,7 @@ import IconSettings from "./IconSettings";
 import IconShutdown from "./IconShutdown";
 import IconSignal from "./IconSignal";
 import IconSleep from "./IconSleep";
+import IconSplitView from "./IconSplitView";
 import IconStopWatch from "./IconStopwatch";
 import IconStopwatchCrossed from "./IconStopwatchCrossed";
 import IconSun from "./IconSun";
@@ -243,6 +244,7 @@ export {
   IconShutdown,
   IconSignal,
   IconSleep,
+  IconSplitView,
   IconStopWatch,
   IconStopwatchCrossed,
   IconSun,

diff --git a/src/renderer/components/molecules/Form/CustomRadioCheckBox.tsx b/src/renderer/components/molecules/Form/CustomRadioCheckBox.tsx
@@ -29,7 +29,7 @@ function CustomRadioCheckBox(props: CustomRCBProps) {
   const { label, type, id, name, tooltip, className, onClick, disabled, checked } = props;
   return (
     <div className={`customCheckbox ${className}`}>
-      <div className="flex flex-nowrap items-center mt-3 hover:cursor-pointer" id={`input-${id}`}>
+      <div className="flex flex-nowrap items-center hover:cursor-pointer" id={`input-${id}`}>
         <Checkbox
           id={`input-${id}-${type}`}
           name={name}
@@ -43,7 +43,9 @@ function CustomRadioCheckBox(props: CustomRCBProps) {
             renderAs="paragraph-sm"
             className={`flex items-center ${tooltip ? "gap-2 [&_.tooltipIcon]:text-purple-200" : ""}`}
           >
-            {label}
+            <div className={`flex items-center ${disabled ? "hover:cursor-not-allowed opacity-50" : "hover:cursor-pointer"}`}>
+              {label}
+            </div>
             {tooltip && (
               <TooltipProvider delayDuration={200}>
                 <Tooltip>