Add side icon

index.jsx

@@ -30,6 +30,7 @@ import * as DataWidgetLoader from "./lib/components/data/data-widget-loader.jsx"
 import * as DataWidget from "./lib/components/data/data-widget.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;
 
@@ -77,6 +78,7 @@ Utils.injectStyles("simple-bar-index-styles", [
   Graph.styles,
   DataWidgetLoader.styles,
   settings.customStyles.styles,
+  SideIcon.styles,
 ]);
 
 function render({ output, error }) {
@@ -128,6 +130,7 @@ function render({ output, error }) {
           windows={windows}
           skhdMode={skhdMode}
         >
+          <SideIcon.Component />
           <Spaces.Component />
           <Process.Component />
         </YabaiContextProvider>

lib/components/side-icon.jsx

@@ -0,0 +1,18 @@
+import * as Uebersicht from "uebersicht";
+
+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>
+);

lib/styles/components/side-icon.js

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