Somewhat of icon packs

src/assets/Icons.tsx

@@ -0,0 +1,30 @@
+import { TreeItemState } from "@hare-ide/hare";
+import { SVGProps } from "react"
+
+export default function substituteDefault (value:string, state: TreeItemState) {
+
+  //TODO: search by value ony for default icons, if nor by ctx and if regex with name
+  let substitute = value.slice(2, -1)
+
+  switch (substitute) {
+    case "file":
+      return File;
+    default:
+      break;
+  }
+
+  return Default
+}
+
+
+const File = (props: SVGProps<SVGSVGElement>) => (
+  <svg id='icon' className="inside-button icon" aria-hidden="true" fill="none" viewBox="0 0 24 24">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M10 3v4a1 1 0 0 1-1 1H5m5 4-2 2 2 2m4-4 2 2-2 2m5-12v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7.914a1 1 0 0 1 .293-.707l3.914-3.914A1 1 0 0 1 9.914 3H18a1 1 0 0 1 1 1Z"/>
+  </svg>
+);
+
+const Default = (props: SVGProps<SVGSVGElement>) => (
+  <svg id='icon' className="inside-button icon" aria-hidden="true" fill="none" viewBox="0 0 24 24">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M10 3v4a1 1 0 0 1-1 1H5m5 4-2 2 2 2m4-4 2 2-2 2m5-12v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7.914a1 1 0 0 1 .293-.707l3.914-3.914A1 1 0 0 1 9.914 3H18a1 1 0 0 1 1 1Z"/>
+  </svg>
+);

src/components/main/activityBar/ActivityBarEntry.tsx

@@ -3,7 +3,7 @@ import React, {useEffect} from "react";
 import { readFile } from "../../../API2";
 
 const ActivityBarEntry = ({currentMenuId, setCurrentMenuId, data} : {currentMenuId:string, setCurrentMenuId:Function, data:IHareViewContainers}) => {
-  const {id, icon, title, views} = data;
+  const {id, icon, title} = data;
   const ref = React.useRef(null);
 
   useEffect(() => {

src/components/main/activityBar/settings/SettingItem.tsx

@@ -4,7 +4,7 @@ const SettingItem = (props:any) => {
     if (myId == "accounts") {
         return (
             <li id={myId} className="settings-item has-tooltip">
-                <svg id="icon" className="inside-button icon"  aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                <svg id="icon" className="inside-button act-icon"  aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                     <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 0a8.949 8.949 0 0 0 4.951-1.488A3.987 3.987 0 0 0 13 16h-2a3.987 3.987 0 0 0-3.951 3.512A8.948 8.948 0 0 0 12 21Zm3-11a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                 </svg>
                 <div className="tooltip">Accounts</div>
@@ -15,7 +15,7 @@ const SettingItem = (props:any) => {
     if (myId == "settings") {
         return (
             <li id={myId} className="settings-item has-tooltip">
-                    <svg id="icon" className="inside-button icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                    <svg id="icon" className="inside-button act-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                         <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="m8 8-4 4 4 4m8 0 4-4-4-4m-2-3-4 14"/>
                     </svg>
                     <div className="tooltip">Manage Hare</div>

src/components/main/contextMenu/ContextMenu.tsx

@@ -1,8 +1,9 @@
 import { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { Procurator, IHareMenuEntry, Context } from '../../../helpers/Procurator.ts';
+import { Procurator, IHareMenuEntry} from '../../../helpers/Procurator.ts';
 import Command from '../commands/Command.tsx';
 import { ContextMenuContext } from './contextMenuContext.tsx';
 import { IHareCommand } from '@hare-ide/hare';
+import when, {Context} from '../../../helpers/functions/when.ts';
 
 const procurator = Procurator.getInstance();
 
@@ -32,7 +33,7 @@ const ContextMenu = () => {
     }
 
     var validMenus = menus.filter(function getWhen(menu) {
-      return procurator.context.when(menu.when, ctx);
+      return when(menu.when, ctx);
     });
 
     var hidden = validMenus.filter(function getVisibles(menu) {

src/components/main/contextMenu/contextMenuContext.tsx

@@ -1,5 +1,5 @@
 import { createContext, useCallback, useEffect, useState } from 'react';
-import { Context } from '../../../helpers/Procurator';
+import { Context } from '../../../helpers/functions/when';
 
 interface ContextMenu {
   isOpen: boolean,

src/components/main/sideBar/sections/CollapsableSection.tsx

@@ -33,11 +33,11 @@ const CollapsableSection = memo(({data, parent} : {data:IHareView, parent:string
       <div className="title-container" onClick={() => isOpen(!open)}>
         {open ? (
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" className="collapse-indicator" viewBox="0 0 24 24">
-            <path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/>
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/>
           </svg>
         ) : (
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" className="collapse-indicator" viewBox="0 0 24 24">
-            <path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/>
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/>
           </svg>
         )}
         {title.current &&

src/components/main/sideBar/sections/MenuBar.tsx

@@ -1,7 +1,8 @@
 import { useContext } from 'react';
-import { Procurator, IHareMenuEntry, Context } from '../../../../helpers/Procurator.ts';
+import { Procurator, IHareMenuEntry} from '../../../../helpers/Procurator.ts';
 import Command from '../../commands/Command.tsx';
 import { ContextMenuContext } from '../../contextMenu/contextMenuContext.tsx';
+import when, {Context} from '../../../../helpers/functions/when.ts';
 
 const procurator = Procurator.getInstance();
 
@@ -15,7 +16,7 @@ const MenuBar = ({menuId, context} : {menuId:string, context:Context}) => {
   }
 
   var validMenus = menus.filter(function getWhen(menu) {
-    return procurator.context.when(menu.when, context);
+    return when(menu.when, context);
   });
 
   var visibles = validMenus.filter(function getVisibles(menu) {

src/components/main/sideBar/sections/MenuBarTree.tsx

@@ -1,4 +1,5 @@
-import { Procurator, IHareMenuEntry, Context } from '../../../../helpers/Procurator.ts';
+import when, {Context} from '../../../../helpers/functions/when.ts';
+import { Procurator, IHareMenuEntry } from '../../../../helpers/Procurator.ts';
 import Command from '../../commands/Command.tsx';
 
 const procurator = Procurator.getInstance();
@@ -11,7 +12,7 @@ const MenuBarTree = ({menuId, context} : {menuId:string, context:Context}) => {
   }
 
   var validMenus = menus.filter(function getWhen(menu) {
-    return procurator.context.when(menu.when, context);
+    return when(menu.when, context);
   });
 
   var visibles = validMenus.filter(function getVisibles(menu) {

src/components/main/sideBar/sections/TreeItemComponent.tsx

@@ -1,9 +1,10 @@
 import { useState, useEffect, useRef, memo, useContext } from 'react';
 import { readFile } from '../../../../API2.tsx';
 import { TreeItemState, TreeViewProvider, TreeItem, ProviderResult, TreeItemSelectedState } from '@hare-ide/hare';
-import { Context, Procurator } from '../../../../helpers/Procurator.ts';
+import { Procurator } from '../../../../helpers/Procurator.ts';
 import { ContextMenuContext } from '../../contextMenu/contextMenuContext.tsx';
 import MenuBarTree from './MenuBarTree.tsx';
+import { Context } from '../../../../helpers/functions/when.ts';
 
 const procurator = Procurator.getInstance();
 
@@ -54,21 +55,45 @@ const TreeItemComponent = memo(({id, viewProvider, item, depth, context} : {id:s
 
     if (raw_state) {
       state = JSON.parse(raw_state);
+      node.collapsibleState = state;
     }
     setOpen(state === TreeItemState.Expanded);
 
+    loadIcon();
+  }, [node]);
+
+  const loadIcon = () => {
+    if (!node) {
+      return
+    }
+
     if (ref.current) {
       //TODO: icon packs
-      // console.log(typeof node.iconPath === "string")
-      if (typeof node.iconPath === 'string') {
-        // console.log(node.iconPath)
-        readFile(node.iconPath).then((content:string) => {
+      //TODO: if no icon pack and default do not load from file
+      let iconSVG;
+
+      if (!node.iconPath) {
+        iconSVG = procurator.window.substituteIcon("", (node.contextValue) ? node.contextValue : "", node.label, node.collapsibleState)
+      } else {
+        if (typeof node.iconPath === 'string') {
+          iconSVG = procurator.window.substituteIcon(node.iconPath, (node.contextValue) ? node.contextValue : "", node.label, node.collapsibleState);
+        } else {
+          iconSVG = node.iconPath.dark //TODO: do this properly using when
+        }
+      }
+
+      // Maybe return with when to not load every 10 secondss
+
+      console.log(iconSVG)
+
+      if (typeof iconSVG === 'string') {
+        readFile(iconSVG).then((content:string) => {
           // @ts-ignore
           ref.current.innerHTML = content;
         })
       }
     }
-  }, [node]);
+  }
 
   const handleClick = (e:MouseEvent) => {
     if (e.button == 2) {
@@ -89,6 +114,7 @@ const TreeItemComponent = memo(({id, viewProvider, item, depth, context} : {id:s
       } else {
         node.collapsibleState = TreeItemState.Collapsed
       }
+      loadIcon();
       window.localStorage.setItem(id + "/" + node.id, String(node.collapsibleState));
       setOpen(node.collapsibleState === TreeItemState.Expanded);
     }
@@ -206,13 +232,13 @@ const ArrowIndicator = ({hasChild, open}: {hasChild:boolean, open:boolean}) => {
   if (open) {
     return (
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" className="collapse-indicator" viewBox="0 0 24 24">
-        <path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/>
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/>
       </svg>
     )
   } else {
     return (
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" className="collapse-indicator" viewBox="0 0 24 24">
-        <path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/>
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/>
       </svg>
     )
   }

src/css/sideBar.css

@@ -142,6 +142,7 @@
 			padding-right: 6px;
 			display: flex;
 			justify-content: center;
+			color: var(--activityBar-selected);
 		}
 	}
 
@@ -162,6 +163,7 @@
 	min-width: 16px;
 	padding: 0 6px 0 0;
 	opacity: 60%;
+	color: var(--activityBar-selected);
 }
 
 .action-menu,