update doc; update side panel

Author: ogios

bun.lockb

@@ -6,10 +6,8 @@ Way-Edges is an application written in Rust for Wayland users, widgets can seaml
 
 - 💻 Do not take up any screen space, better for small screens
 - ⚙️ Provide presets for audio, screen brightness, system information...
-- 🦅 Relative size, edge, anchor, margin customization, you can arrange your widgets more freely
-- 🚫 Take in account of `exlusize zone` to calculate relative size (Experimental & need support for each compositor specific)
+- 🦅 Relative size, edge, anchor, margin customization, arrange your widgets.
 - 📦 Grouping widgets
-- 💬 Some Error and Info gets send into desktop notification daemon, no need to go through tons of logs.
 - ⚡ Written in Rust (?)
 
 ## 🥢 Requirements

data/doc/0.description.md

@@ -63,7 +63,7 @@ way-edges togglepin <group_name>:<widget_name>
 
 Most of the widgets support `pin`, use `group name` + `:` + `widget name` to toggle a widget's pin state.
 
-## Shell completions
+## 🚀 Shell completions
 
 ### Bash
 
@@ -76,12 +76,12 @@ Else then you'll have to copy the `https://github.com/way-edges/way-edges/blob/m
 For other shell, you'll have to generate it on your own:
 
 ```shell
-$ COMPLETE=zsh way-edges
+COMPLETE=zsh way-edges
 ```
 
 But there might be some issues generating completions after colon, you can either find a way and modify the script on your own, or submit an issue on GitHub.
 
-### _AS A REMINDER_:
+### _AS A REMINDER_
 
 current clap version: 4.5.20
 current clap-complete version: 4.5.36

data/doc/2.cmd.md

@@ -81,7 +81,7 @@ _Example:_
           "type": "string",
           "enum": ["top", "bottom", "background", "overlay"]
         },
-        "margin": {
+        "margins": {
           "type": "object",
           "properties": {
             "top": {
@@ -98,12 +98,9 @@ _Example:_
             }
           }
         },
-        "monitor_id": {
-          "type": "integer",
-          "minimum": 0
-        },
-        "monitor_name": {
-          "type": "string"
+        "monitor": {
+          "type": ["integer", "string"],
+          "default": 0
         },
         "widget": {
           "$ref": "#/definitions/AllWidgets"
@@ -116,25 +113,25 @@ _Example:_
 
 Array of widget items. If multiple widgets pile up, the last one in array gets to be on the top.
 
-| Name                    | Description                                                          |
-| ----------------------- | -------------------------------------------------------------------- |
-| name                    | Name of the widget, needed with `togglepin`                          |
-| edge                    | Edge of the screen, `top/bottom/left/right`                          |
-| position                | Ancher of the edge, `top/bottom \|\| left/right`                     |
-| layer                   | Layer of the shell (window), `top/bottom/background/overlay`         |
-| margin                  | Support relative number ("24%"), `top/bottom/left/right`             |
-| monitor_id/monitor_name | Monitor index, or the description of the monitor, index start from 0 |
-| widget                  | the actual widget, goto `widgets`                                    |
+| Name     | Description                                                             |
+| -------- | ----------------------------------------------------------------------- |
+| name     | Name of the widget, needed with `togglepin`                             |
+| edge     | Edge of the screen, `top/bottom/left/right`                             |
+| position | Ancher of the edge, `top/bottom \|\| left/right`                        |
+| layer    | Layer of the shell (window), `top/bottom/background/overlay`            |
+| margins  | Support relative number ("24%"), `top/bottom/left/right`                |
+| monitor  | Monitor index, or the connector name of the monitor, index start from 0 |
+| widget   | the actual widget, goto `widgets`                                       |
 
 _Example:_
 
 ```json
 {
   "edge": "top",
   "position": "left",
-  // "monitor_id": 1,
+  // "monitor": "eDP-1",
   "layer": "overlay",
-  "margin": {
+  "margins": {
     "left": "25%"
   },
   "widget": {

data/doc/3.basic_config.md

@@ -12,9 +12,6 @@ _Example:_
   "edge": "top",
   "position": "left",
   "layer": "overlay",
-  "margin": {
-    "left": "25%"
-  },
   "widget": {
     "type": "btn",
     "width": 15,

data/doc/4.widgets/0.button.md

@@ -11,9 +11,6 @@ _Example:_
   "edge": "top",
   "position": "left",
   "layer": "overlay",
-  "margin": {
-    "left": "12.5%"
-  },
   "widget": {
     "type": "microphone",
     "width": 20,
@@ -46,7 +43,7 @@ Empty to use default source.
 _TO FIND SOURCE NAMES:_
 
 ```shell
-$ pactl list sources | grep Name:
+pactl list sources | grep Name:
 ```
 
 _Type: `null | string`_  

data/doc/4.widgets/3.microphone.md

@@ -9,9 +9,6 @@ _Example:_
   "edge": "top",
   "position": "right",
   "layer": "overlay",
-  "margin": {
-    "right": "12.5%"
-  },
   "widget": {
     "type": "backlight",
     "width": 20,

data/doc/4.widgets/4.backlight.md

@@ -28,29 +28,14 @@
 
 - `btn` - Button
 - `slide` - Slide
-  - `speaker` - Speaker
-  - `microphone` - Microphone
-  - `backlight` - Backlight
+- `speaker` - Speaker
+- `microphone` - Microphone
+- `backlight` - Backlight
 - `box` - Box
   - `ring` - Ring (_Provide presets_)
   - `text` - Text (_Provide presets_)
+- `hyprland-workspace` - Hyprland workspace
 
 ## In Plan
 
-- Hyprland workspace
 - Tray
-
-## Example
-
-```json
-{
-  "widget": {
-    // `type` is the most important
-    "type": "backlight"
-    // "width": 20,
-    // "height": "12.5%",
-    // "frame_rate": 60,
-    // "fg_color": "#82AAFF"
-  }
-}
-```

data/doc/4.widgets/6.ring.md data/doc/4.widgets/5.box/0.ring.md

@@ -1 +1 @@
-[{"title":"🤷 What is this","name":"description","children":[],"path":"/doc/0.description.md","name_path":"description"},{"title":"📥 Installation","name":"installation","children":[],"path":"/doc/1.installation.md","name_path":"installation"},{"title":"⌨️ Command line usage","name":"cmd","children":[],"path":"/doc/2.cmd.md","name_path":"cmd"},{"title":"⚙️ Configuration","name":"basic_config","children":[],"path":"/doc/3.basic_config.md","name_path":"basic_config"},{"title":"🧱 Widgets","name":"widgets","children":[{"title":"Button","name":"button","children":[],"path":"/doc/4.widgets/0.button.md","name_path":"widgets/button"},{"title":"Slide","name":"slide","children":[],"path":"/doc/4.widgets/1.slide.md","name_path":"widgets/slide"},{"title":"Speaker","name":"speaker","children":[],"path":"/doc/4.widgets/2.speaker.md","name_path":"widgets/speaker"},{"title":"Microphone","name":"microphone","children":[],"path":"/doc/4.widgets/3.microphone.md","name_path":"widgets/microphone"},{"title":"Backlight","name":"backlight","children":[],"path":"/doc/4.widgets/4.backlight.md","name_path":"widgets/backlight"},{"title":"Box","name":"box","children":[],"path":"/doc/4.widgets/5.box.md","name_path":"widgets/box"},{"title":"Ring","name":"ring","children":[],"path":"/doc/4.widgets/6.ring.md","name_path":"widgets/ring"},{"title":"Text","name":"text","children":[],"path":"/doc/4.widgets/7.text.md","name_path":"widgets/text"},{"title":"Hyprland Workspace","name":"hyprland-workspace","children":[],"path":"/doc/4.widgets/8.hyprland-workspace.md","name_path":"widgets/hyprland-workspace"}],"path":"/doc/4.widgets/index.md","name_path":"widgets"}]
+[{"title":"🤷 What is this","name":"description","children":[],"path":"/doc/0.description.md","name_path":"description"},{"title":"📥 Installation","name":"installation","children":[],"path":"/doc/1.installation.md","name_path":"installation"},{"title":"⌨️ Command line usage","name":"cmd","children":[],"path":"/doc/2.cmd.md","name_path":"cmd"},{"title":"⚙️ Configuration","name":"basic_config","children":[],"path":"/doc/3.basic_config.md","name_path":"basic_config"},{"title":"🧱 Widgets","name":"widgets","children":[{"title":"Button","name":"button","children":[],"path":"/doc/4.widgets/0.button.md","name_path":"widgets/button"},{"title":"Slide","name":"slide","children":[],"path":"/doc/4.widgets/1.slide.md","name_path":"widgets/slide"},{"title":"Speaker","name":"speaker","children":[],"path":"/doc/4.widgets/2.speaker.md","name_path":"widgets/speaker"},{"title":"Microphone","name":"microphone","children":[],"path":"/doc/4.widgets/3.microphone.md","name_path":"widgets/microphone"},{"title":"Backlight","name":"backlight","children":[],"path":"/doc/4.widgets/4.backlight.md","name_path":"widgets/backlight"},{"title":"Box","name":"box","children":[{"title":"Ring","name":"ring","children":[],"path":"/doc/4.widgets/5.box/0.ring.md","name_path":"box/ring"},{"title":"Text","name":"text","children":[],"path":"/doc/4.widgets/5.box/1.text.md","name_path":"box/text"}],"path":"/doc/4.widgets/5.box/index.md","name_path":"widgets/box"},{"title":"Hyprland Workspace","name":"hyprland-workspace","children":[],"path":"/doc/4.widgets/6.hyprland-workspace.md","name_path":"widgets/hyprland-workspace"}],"path":"/doc/4.widgets/index.md","name_path":"widgets"}]

data/doc/4.widgets/7.text.md data/doc/4.widgets/5.box/1.text.md

@@ -5,7 +5,7 @@ import { readFileSync } from 'fs'
 import '@/app/md.css'
 
 export default async function Page() {
-  const path = get_file_under_data('/doc/4.widgets/6.ring.md')
+  const path = get_file_under_data('/doc/4.widgets/5.box/0.ring.md')
   const content = readFileSync(path).toString()
   return (
       <MarkdownContent content={content} />

data/doc/4.widgets/5.box.md data/doc/4.widgets/5.box/index.md

@@ -5,7 +5,7 @@ import { readFileSync } from 'fs'
 import '@/app/md.css'
 
 export default async function Page() {
-  const path = get_file_under_data('/doc/4.widgets/7.text.md')
+  const path = get_file_under_data('/doc/4.widgets/5.box/1.text.md')
   const content = readFileSync(path).toString()
   return (
       <MarkdownContent content={content} />

data/doc/4.widgets/8.hyprland-workspace.md data/doc/4.widgets/6.hyprland-workspace.md

@@ -1,3 +1,6 @@
+:root {
+  interpolate-size: allow-keywords;
+}
 * {
   box-sizing: border-box;
   transition: all 1s ease;

data/doc/4.widgets/index.md

@@ -5,7 +5,7 @@ import { readFileSync } from 'fs'
 import '@/app/md.css'
 
 export default async function Page() {
-  const path = get_file_under_data('/doc/4.widgets/5.box.md')
+  const path = get_file_under_data('/doc/4.widgets/5.box/index.md')
   const content = readFileSync(path).toString()
   return (
       <MarkdownContent content={content} />

data/meta.json

@@ -5,7 +5,7 @@ import { readFileSync } from 'fs'
 import '@/app/md.css'
 
 export default async function Page() {
-  const path = get_file_under_data('/doc/4.widgets/8.hyprland-workspace.md')
+  const path = get_file_under_data('/doc/4.widgets/6.hyprland-workspace.md')
   const content = readFileSync(path).toString()
   return (
       <MarkdownContent content={content} />

src/app/widgets/ring/page.tsx src/app/box/ring/page.tsx

@@ -37,11 +37,17 @@ export const Collapse = ({ content, index }: CollapseProps) => {
         list: {
           ...list_style.list,
           height: `${list_ref.current!.scrollHeight}px`,
+          // height: null,
         },
         switch: {
           rotate: '90deg',
         },
       })
+      let on_transition_end = () => {
+        list_ref.current!.style.height = 'auto'
+        list_ref.current!.removeEventListener('transitionend', on_transition_end)
+      }
+      list_ref.current!.addEventListener('transitionend', on_transition_end)
     } else {
       set_list_style({
         list: {