refactor(tb): make toolbar more modular (part 1)

capabilities/launcher.json

@@ -2,7 +2,7 @@
   "$schema": "../gen/schemas/windows-schema.json",
   "identifier": "launcher",
   "windows": [
-    "seelen-launcher"
+    "seelen/launcher"
   ],
   "permissions": [
     "log:default",

capabilities/migrated.json

@@ -5,10 +5,8 @@
   "local": true,
   "windows": [
     "settings",
-    "seelenweg/*",
-    "updater",
-    "window-manager/*",
-    "fancy-toolbar/*"
+    "seelen/weg*",
+    "seelen/window-manager*"
   ],
   "permissions": [
     "core:path:default",
@@ -63,8 +61,6 @@
 
     "log:allow-log",
 
-    "updater:default",
-
     "shell:allow-open"
   ]
 }

capabilities/toolbar.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../gen/schemas/windows-schema.json",
+  "identifier": "toolbar",
+  "windows": [
+    "seelen/fancy-toolbar*"
+  ],
+  "permissions": [
+    "log:default",
+    "core:path:default",
+    "core:webview:default",
+    "core:event:default",
+
+    "core:window:default",
+    "core:window:allow-show",
+    "core:window:allow-set-ignore-cursor-events",
+
+    "dialog:default"
+  ]
+}

capabilities/wall.json

@@ -4,7 +4,7 @@
   "description": "permissions for wall",
   "local": true,
   "windows": [
-    "seelen-wall"
+    "seelen/wall"
   ],
   "permissions": [
     "log:default",

documentation/schemas/placeholder.schema.json

@@ -8,7 +8,7 @@
       "default": [],
       "type": "array",
       "items": {
-        "$ref": "#/definitions/ToolbarItem"
+        "$ref": "#/definitions/ToolbarItem2"
       }
     },
     "info": {
@@ -30,15 +30,15 @@
       "default": [],
       "type": "array",
       "items": {
-        "$ref": "#/definitions/ToolbarItem"
+        "$ref": "#/definitions/ToolbarItem2"
       }
     },
     "right": {
       "description": "Items to be displayed in the toolbar",
       "default": [],
       "type": "array",
       "items": {
-        "$ref": "#/definitions/ToolbarItem"
+        "$ref": "#/definitions/ToolbarItem2"
       }
     }
   },
@@ -873,6 +873,16 @@
         }
       ]
     },
+    "ToolbarItem2": {
+      "anyOf": [
+        {
+          "type": "string"
+        },
+        {
+          "$ref": "#/definitions/ToolbarItem"
+        }
+      ]
+    },
     "WorkspaceToolbarItemMode": {
       "type": "string",
       "enum": [

lib/src/handlers/events.ts

@@ -47,4 +47,6 @@ export enum SeelenEvent {
   StateSettingsByAppChanged = 'settings-by-app',
   StateHistoryChanged = 'history',
   StateIconPacksChanged = 'icon-packs',
+  StatePluginsChanged = 'plugins-changed',
+  StateWidgetsChanged = 'widgets-changed',
 }

lib/src/handlers/invokers.ts

@@ -1,5 +1,7 @@
 import { invoke as tauriInvoke, InvokeArgs, InvokeOptions } from '@tauri-apps/api/core';
 
+import { Plugin } from '../state/plugin';
+
 export enum SeelenCommand {
   // General
   Run = 'run',
@@ -31,6 +33,8 @@ export enum SeelenCommand {
   StateGetWallpaper = 'state_get_wallpaper',
   StateSetWallpaper = 'state_set_wallpaper',
   StateGetHistory = 'state_get_history',
+  StateGetPlugins = 'state_get_plugins',
+  StateGetWidgets = 'state_get_widgets',
 
   // Media
   MediaPrev = 'media_prev',
@@ -83,6 +87,7 @@ export enum SeelenCommand {
 type ReturnTypeByCommand = Record<SeelenCommand, unknown> & {
   [SeelenCommand.CheckForUpdates]: boolean;
   [SeelenCommand.InstallLastAvailableUpdate]: never;
+  [SeelenCommand.StateGetPlugins]: Plugin[];
 };
 
 export type SeelenCommandReturn<T extends SeelenCommand> = ReturnTypeByCommand[T];

lib/src/handlers/mod.rs

@@ -86,4 +86,6 @@ slu_events_declaration! {
     StateSettingsByAppChanged = "settings-by-app",
     StateHistoryChanged = "history",
     StateIconPacksChanged = "icon-packs",
+    StatePluginsChanged = "plugins-changed",
+    StateWidgetsChanged = "widgets-changed",
 }

lib/src/state/index.ts

@@ -8,6 +8,7 @@ export * from './placeholder';
 export * from './settings_by_app';
 export * from './settings_by_monitor';
 export * from './icon_pack';
+export * from './plugin';
 
 export interface LauncherHistory {
   [x: string]: string[];

lib/src/state/mod.rs

@@ -6,6 +6,8 @@ mod settings_by_monitor;
 mod theme;
 mod weg_items;
 mod wm_layout;
+mod plugin;
+mod widget;
 
 pub use icon_pack::*;
 pub use placeholder::*;
@@ -15,6 +17,8 @@ pub use settings_by_monitor::*;
 pub use theme::*;
 pub use weg_items::*;
 pub use wm_layout::*;
+pub use plugin::*;
+pub use widget::*;
 
 use schemars::JsonSchema;
 use serde::{Deserialize, Serialize};

lib/src/state/placeholder.rs

@@ -315,6 +315,13 @@ impl ToolbarItem {
     }
 }
 
+#[derive(Debug, Clone, Serialize, Deserialize, JsonSchema)]
+#[serde(untagged)]
+pub enum ToolbarItem2 {
+    PluginId(String),
+    Inline(ToolbarItem)
+}
+
 #[derive(Debug, Clone, Default, Serialize, Deserialize, JsonSchema)]
 #[serde(default, rename_all = "camelCase")]
 pub struct PlaceholderInfo {
@@ -334,23 +341,33 @@ pub struct Placeholder {
     /// Metadata about the placeholder
     pub info: PlaceholderInfo,
     /// Items to be displayed in the toolbar
-    pub left: Vec<ToolbarItem>,
+    pub left: Vec<ToolbarItem2>,
     /// Items to be displayed in the toolbar
-    pub center: Vec<ToolbarItem>,
+    pub center: Vec<ToolbarItem2>,
     /// Items to be displayed in the toolbar
-    pub right: Vec<ToolbarItem>,
+    pub right: Vec<ToolbarItem2>,
 }
 
 impl Placeholder {
-    fn sanitize_items(dict: &mut HashSet<String>, items: Vec<ToolbarItem>) -> Vec<ToolbarItem> {
+    fn sanitize_items(dict: &mut HashSet<String>, items: Vec<ToolbarItem2>) -> Vec<ToolbarItem2> {
         let mut result = Vec::new();
-        for mut item in items {
-            if item.id().is_empty() {
-                item.set_id(uuid::Uuid::new_v4().to_string());
-            }
-            if !dict.contains(&item.id()) {
-                dict.insert(item.id());
-                result.push(item);
+        for item in items {
+            match item {
+                ToolbarItem2::PluginId(id) => {
+                    if !dict.contains(&id) {
+                        dict.insert(id.clone());
+                        result.push(ToolbarItem2::PluginId(id));
+                    }
+                }
+                ToolbarItem2::Inline(mut item) => {
+                    if item.id().is_empty() {
+                        item.set_id(uuid::Uuid::new_v4().to_string());
+                    }
+                    if !dict.contains(&item.id()) {
+                        dict.insert(item.id());
+                        result.push(ToolbarItem2::Inline(item));
+                    }
+                }
             }
         }
         result

lib/src/state/placeholder.ts

@@ -111,7 +111,7 @@ export interface CreatorInfo {
 
 export interface Placeholder {
   info: CreatorInfo;
-  left: ToolbarModule[];
-  center: ToolbarModule[];
-  right: ToolbarModule[];
+  left: (string | ToolbarModule)[];
+  center: (string | ToolbarModule)[];
+  right: (string | ToolbarModule)[];
 }

lib/src/state/plugin.rs

@@ -0,0 +1,8 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Plugin {
+    pub id: String,
+    pub target: String,
+    pub plugin: serde_yaml::Value,
+}

lib/src/state/plugin.ts

@@ -0,0 +1,33 @@
+import { listen, UnlistenFn } from '@tauri-apps/api/event';
+
+import { invoke, SeelenCommand, SeelenEvent } from '../handlers';
+import { getCurrentWidget } from '../utils';
+
+export class Plugin {
+  id: string = '';
+  target: string = '';
+  plugin: any = {};
+}
+
+export class PluginList {
+  private constructor(private inner: Plugin[]) {}
+
+  static async getAsync(): Promise<PluginList> {
+    return new PluginList(await invoke(SeelenCommand.StateGetPlugins));
+  }
+
+  static async onChange(cb: (value: PluginList) => void): Promise<UnlistenFn> {
+    return listen<Plugin[]>(SeelenEvent.StatePluginsChanged, (event) => {
+      cb(new PluginList(event.payload));
+    });
+  }
+
+  all(): Plugin[] {
+    return this.inner;
+  }
+
+  forCurrentWidget(): Plugin[] {
+    let target = getCurrentWidget().id;
+    return this.inner.filter((plugin) => plugin.target === target);
+  }
+}

lib/src/state/theme.ts

@@ -28,5 +28,5 @@ export interface Theme {
   /** Metadata about the theme */
   info: ThemeInfo;
   /** Css Styles of the theme */
-  styles: ThemeCssByApp;
+  styles: ThemeCssByApp & Record<string, string>;
 }

lib/src/state/widget.rs

@@ -0,0 +1,6 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Widget {
+    pub id: String,
+}

lib/src/utils/index.ts

@@ -1,3 +1,5 @@
+import { getCurrentWindow } from '@tauri-apps/api/window';
+
 export * from './hooks';
 export * from './layered_hitbox';
 
@@ -46,3 +48,15 @@ export function disableWebviewShortcutsAndContextMenu() {
   window.addEventListener('drop', (e) => e.preventDefault());
   window.addEventListener('dragover', (e) => e.preventDefault());
 }
+
+// label schema: user/resource__query__monitor:display5
+export function getCurrentWidget() {
+  const { label } = getCurrentWindow();
+  const parsedLabel = label.replace('__query__', '?').replace(':', '=');
+  const query = new URLSearchParams(parsedLabel);
+  return {
+    id: `@${parsedLabel.split('?')[0]}`,
+    label,
+    attachedMonitor: query.get('monitor'),
+  };
+}

src/apps/shared/styles.ts

@@ -1,7 +1,6 @@
 import { listen } from '@tauri-apps/api/event';
-import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
 import { useEffect, useState } from 'react';
-import { Settings, Theme, UIColors } from 'seelen-core';
+import { getCurrentWidget, Settings, Theme, UIColors } from 'seelen-core';
 
 import { UserSettingsLoader } from '../settings/modules/shared/store/storeApi';
 
@@ -45,11 +44,11 @@ export function useDarkMode() {
 }
 
 const KeyByLabel: Record<string, string> = {
-  'fancy-toolbar': 'toolbar',
-  seelenweg: 'weg',
-  'window-manager': 'wm',
-  'seelen-launcher': 'launcher',
-  'seelen-wall': 'wall',
+  '@seelen/fancy-toolbar': 'toolbar',
+  '@seelen/weg': 'weg',
+  '@seelen/window-manager': 'wm',
+  '@seelen/launcher': 'launcher',
+  '@seelen/wall': 'wall',
 };
 
 async function loadThemes(allThemes: Theme[], selected: string[]) {
@@ -59,20 +58,16 @@ async function loadThemes(allThemes: Theme[], selected: string[]) {
       return selected.indexOf(a.info.filename) - selected.indexOf(b.info.filename);
     });
 
-  const webviewId = getCurrentWebviewWindow().label;
-  const [label, _monitor] = webviewId.split('/');
-  if (!label) {
-    return;
-  }
+  const widget = getCurrentWidget();
 
-  const theme_key = KeyByLabel[label] as keyof Theme['styles'] | undefined;
+  const theme_key = KeyByLabel[widget.id] || widget.id;
   if (!theme_key) {
     return;
   }
 
-  document.getElementById(webviewId)?.remove();
+  document.getElementById(widget.label)?.remove();
   let element = document.createElement('style');
-  element.id = webviewId;
+  element.id = widget.label;
   element.textContent = '';
 
   for (const theme of themes) {