style(tb): add focused app icon to default toolbar layouts

changelog.md

@@ -2,7 +2,10 @@
 
 ## [Unreleased]
 ### features
-- allow custom images on toolbar by imgFromUrl, imgFromPath and imgFromExe functions.
+- allow custom images on toolbar by `imgFromUrl`, `imgFromPath` and `imgFromExe` functions.
+- add notifications module to toolbar.
+- add exe path to window in generic module for toolbar.
+- add focused window icon to default toolbar layouts.
 
 ### enhancements
 - icons now are recreated from exe path if icon was deleted.

src/apps/settings/modules/shared/store/app/reducer.ts

@@ -66,6 +66,7 @@ export const RootSlice = createSlice({
         const newState = cloneDeep(state.lastLoaded);
         newState.lastLoaded = cloneDeep(state.lastLoaded);
         newState.route = state.route;
+        newState.colors = state.colors;
         i18n.changeLanguage(newState.language);
         return newState;
       }

src/apps/settings/modules/shared/store/infra.ts

@@ -73,6 +73,7 @@ export const LoadSettingsToStore = async (customPath?: string) => {
     appsTemplates: currentState.appsTemplates,
     route: currentState.route,
     autostart: currentState.autostart,
+    colors: currentState.colors,
   };
   state.lastLoaded = cloneDeep(state);
 

src/apps/toolbar/modules/item/infra.tsx

@@ -32,22 +32,31 @@ interface StringToElementState {
   exe_icon_path: string;
 }
 
-class StringToElement extends React.Component<StringToElementProps, StringToElementState> {
+class StringToElement extends React.PureComponent<StringToElementProps, StringToElementState> {
   static splitter = /:([^:]+):/;
 
   static imgPrefix = 'IMG:';
   static iconPrefix = 'ICON:';
   static exePrefix = 'EXE:';
 
   static imgFromUrl(url: string, size = 16) {
+    if (!url) {
+      return '';
+    }
     return `[IMG:${size}px:${url}]`;
   }
 
   static imgFromPath(path: string, size = 16) {
+    if (!path) {
+      return '';
+    }
     return StringToElement.imgFromUrl(convertFileSrc(path), size);
   }
 
   static imgFromExe(exe_path: string, size = 16) {
+    if (!exe_path) {
+      return '';
+    }
     return `[EXE:${size}px:${exe_path}]`;
   }
 
@@ -72,7 +81,7 @@ class StringToElement extends React.Component<StringToElementProps, StringToElem
     this.setState({ exe_icon_path: exe_path || LAZY_CONSTANTS.MISSING_ICON_PATH });
   }
 
-  componentDidMount() {
+  loadExeIconToState() {
     if (this.isExe()) {
       const [_, _size, path] = this.props.text.split(StringToElement.splitter);
       if (path) {
@@ -83,6 +92,16 @@ class StringToElement extends React.Component<StringToElementProps, StringToElem
     }
   }
 
+  componentDidMount() {
+    this.loadExeIconToState();
+  }
+
+  componentDidUpdate(prevProps: StringToElementProps) {
+    if (this.props.text !== prevProps.text) {
+      this.loadExeIconToState();
+    }
+  }
+
   render() {
     if (this.isExe()) {
       const [_, width] = this.props.text.split(StringToElement.splitter);
@@ -117,7 +136,7 @@ export function ElementsFromEvaluated(content: any) {
 
   const parts: string[] = text.split(/\[|\]/g).filter((part: string) => part);
   const result: React.ReactNode[] = parts.map((part: string, index: number) => {
-    return <StringToElement text={part} key={index} />;
+    return <StringToElement key={index} text={part} />;
   });
 
   return result;

src/apps/toolbar/modules/shared/store/domain.ts

@@ -7,6 +7,7 @@ import { WlanBssEntry } from '../../network/domain';
 export interface ActiveApp {
   name: string;
   title: string;
+  exe: string | null;
 }
 
 export interface PowerStatus {

src/background/seelen_bar/mod.rs

@@ -32,6 +32,7 @@ pub struct FancyToolbar {
 pub struct ActiveApp {
     title: String,
     name: String,
+    exe: Option<String>,
 }
 
 impl FancyToolbar {
@@ -75,6 +76,7 @@ impl FancyToolbar {
                 title,
                 name: WindowsApi::get_window_display_name(hwnd)
                     .unwrap_or(String::from("Error on App Name")),
+                exe: WindowsApi::exe_path(hwnd).ok(),
             },
         )?;
         Ok(())

static/placeholders/default.yml

@@ -3,26 +3,26 @@ info:
   author: eythaann,
   description: Default toolbar layout good for many devices.
 left:
-  - type: text
-    template: concat(imgFromExe("C:\\Windows\\explorer.exe"), " @", env.USERNAME)
+  - type: generic
+    template: concat("@", env.USERNAME)
     onClickV2: open(env.USERPROFILE)
     tooltip: t("placeholder.open_user_folder")
     style:
       flexShrink: 0
 
-  - type: text
+  - type: generic
     template: '"|"'
 
-  - type: text
-    template: window.name
+  - type: generic
+    template: concat(imgFromExe(window.exe), "  ", window.name)
     style:
       flexShrink: 0
 
-  - type: text
+  - type: generic
     template: >
       window.title ? "-" : ""
 
-  - type: text
+  - type: generic
     template: window.title
     style:
       flexShrink: 2

static/placeholders/default_alter.yml

@@ -4,26 +4,26 @@ info:
   description: Alternative to the default layout with workspaces.
 
 left:
-  - type: text
-    template: concat(imgFromExe("C:\\Windows\\explorer.exe"), " @", env.USERNAME)
+  - type: generic
+    template: concat("@", env.USERNAME)
     onClickV2: open(env.USERPROFILE)
     tooltip: t("placeholder.open_user_folder")
     style:
       flexShrink: 0
 
-  - type: text
+  - type: generic
     template: '"|"'
 
-  - type: text
-    template: window.name
+  - type: generic
+    template: concat(imgFromExe(window.exe), "  ", window.name)
     style:
       flexShrink: 0
 
-  - type: text
+  - type: generic
     template: >
       window.title ? "-" : ""
 
-  - type: text
+  - type: generic
     template: window.title
     style:
       flexShrink: 2