side-icon: Svg optimization + add activation setting

index.jsx

@@ -28,9 +28,9 @@ import * as Specter from "./lib/components/data/specter.jsx";
 import * as Graph from "./lib/components/data/graph.jsx";
 import * as DataWidgetLoader from "./lib/components/data/data-widget-loader.jsx";
 import * as DataWidget from "./lib/components/data/data-widget.jsx";
+import * as SideIcon from "./lib/components/side-icon.jsx";
 import * as Utils from "./lib/utils";
 import * as Settings from "./lib/settings";
-import * as SideIcon from "./lib/components/side-icon.jsx";
 
 const refreshFrequency = false;
 
@@ -125,12 +125,12 @@ function render({ output, error }) {
       SIPDisabled={SIPDisabled}
     >
       <div className={classes}>
+        <SideIcon.Component />
         <YabaiContextProvider
           spaces={spaces}
           windows={windows}
           skhdMode={skhdMode}
         >
-          <SideIcon.Component />
           <Spaces.Component />
           <Process.Component />
         </YabaiContextProvider>

lib/components/side-icon.jsx

@@ -1,18 +1,26 @@
 import * as Uebersicht from "uebersicht";
+import { useSimpleBarContext } from "./simple-bar-context.jsx";
 
 const { React } = Uebersicht;
 
 export { sideIconStyles as styles } from "../../lib/styles/components/side-icon";
-export const Component = () => (
-  <div className="icon-container">
-  <svg
-  fill="currentColor"
-  className="side-icon"
-  xmlns="http://www.w3.org/2000/svg"
-  width="14px"
-  height="14px"
-  viewBox="0 0 256 315">
-    <path d="M213.803 167.03c.442 47.58 41.74 63.413 42.197 63.615c-.35 1.116-6.599 22.563-21.757 44.716c-13.104 19.153-26.705 38.235-48.13 38.63c-21.05.388-27.82-12.483-51.888-12.483c-24.061 0-31.582 12.088-51.51 12.871c-20.68.783-36.428-20.71-49.64-39.793c-27-39.033-47.633-110.3-19.928-158.406c13.763-23.89 38.36-39.017 65.056-39.405c20.307-.387 39.475 13.662 51.889 13.662c12.406 0 35.699-16.895 60.186-14.414c10.25.427 39.026 4.14 57.503 31.186c-1.49.923-34.335 20.044-33.978 59.822M174.24 50.199c10.98-13.29 18.369-31.79 16.353-50.199c-15.826.636-34.962 10.546-46.314 23.828c-10.173 11.763-19.082 30.589-16.678 48.633c17.64 1.365 35.66-8.964 46.64-22.262"/>
-  </svg>
-  </div>
-);
+
+export function Component() {
+  const { settings } = useSimpleBarContext();
+  const { sideDecoration } = settings.global;
+
+  if (!sideDecoration) return null;
+
+  return (
+    <div className="side-icon">
+      <svg
+        className="side-icon__svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+      >
+        <path d="M18.5373 12.7261c.0337 3.6251 3.1802 4.8315 3.215 4.8469-.0266.085-.5027 1.719-1.6576 3.4069-.9984 1.4593-2.0347 2.9131-3.6671 2.9432-1.6038.0296-2.1196-.9511-3.9534-.9511-1.8332 0-2.4062.921-3.9245.9807-1.5756.0596-2.7755-1.5779-3.7821-3.0319-2.0572-2.9739-3.6292-8.4038-1.5183-12.069 1.0486-1.8202 2.9226-2.9727 4.9566-3.0023 1.5472-.0295 3.0076 1.041 3.9534 1.041.9453 0 2.72-1.2873 4.5857-1.0983.7809.0326 2.9734.3155 4.3811 2.3761-.1135.0703-2.616 1.5272-2.5888 4.5579M15.523 3.8247C16.3596 2.812 16.9226 1.4026 16.769 0c-1.2058.0485-2.6638.8035-3.5287 1.8155-.7751.8962-1.4539 2.3306-1.2707 3.7053 1.344.104 2.7168-.683 3.5534-1.6961Z" />
+      </svg>
+    </div>
+  );
+}

lib/settings.js

@@ -37,6 +37,7 @@ export const data = {
   noBarBg: { label: "No bar background", type: "checkbox" },
   noColorInData: { label: "No colors in data", type: "checkbox" },
   bottomBar: { label: "Bottom bar", type: "checkbox" },
+  sideDecoration: { label: "Side decoration (Apple logo)", type: "checkbox" },
   inlineSpacesOptions: { label: "Inline spaces options", type: "checkbox" },
   disableNotifications: { label: "Disable notifications", type: "checkbox" },
   compactMode: { label: "Compact mode", type: "checkbox" },
@@ -518,6 +519,7 @@ export const defaultSettings = {
     noBarBg: false,
     noColorInData: false,
     bottomBar: false,
+    sideDecoration: false,
     inlineSpacesOptions: false,
     disableNotifications: false,
     compactMode: false,

lib/styles/components/side-icon.js

@@ -1,13 +1,14 @@
 export const sideIconStyles = /* css */ `
 .side-icon {
-  margin: auto;
-}
-
-.icon-container {
   display: flex;
   align-items: center;
-  justify-content: center;
-  margin: 0 10px 0 5px;
+  margin: 0 5px;
   color: #fff;
 }
-`;
+
+.side-icon__svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+`;