Skip to content

Commit 932376d

Browse files
sawkasawka
authored
widgets context menu (#1955)
1 parent 4880531 commit 932376d

3 files changed

Lines changed: 248 additions & 7 deletions

File tree

‎aiprompts/contextmenu.md‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
# Context Menu Quick Reference
2+
3+
This guide provides a quick overview of how to create and display a context menu using our system.
4+
5+
---
6+
7+
## ContextMenuItem Type
8+
9+
Define each menu item using the `ContextMenuItem` type:
10+
11+
```ts
12+
type ContextMenuItem = {
13+
label?: string;
14+
type?: "separator" | "normal" | "submenu" | "checkbox" | "radio";
15+
role?: string; // Electron role (optional)
16+
click?: () => void; // Callback for item selection (not needed if role is set)
17+
submenu?: ContextMenuItem[]; // For nested menus
18+
checked?: boolean; // For checkbox or radio items
19+
visible?: boolean;
20+
enabled?: boolean;
21+
sublabel?: string;
22+
};
23+
```
24+
25+
---
26+
27+
## Import and Show the Menu
28+
29+
Import the context menu module:
30+
31+
```ts
32+
import { ContextMenuModel } from "@/app/store/contextmenu";
33+
```
34+
35+
To display the context menu, call:
36+
37+
```ts
38+
ContextMenuModel.showContextMenu(menu, event);
39+
```
40+
41+
- **menu**: An array of `ContextMenuItem`.
42+
- **event**: The mouse event that triggered the context menu (typically from an onContextMenu handler).
43+
44+
---
45+
46+
## Basic Example
47+
48+
A simple context menu with a separator:
49+
50+
```ts
51+
const menu: ContextMenuItem[] = [
52+
{
53+
label: "New File",
54+
click: () => {
55+
/* create a new file */
56+
},
57+
},
58+
{
59+
label: "New Folder",
60+
click: () => {
61+
/* create a new folder */
62+
},
63+
},
64+
{ type: "separator" },
65+
{
66+
label: "Rename",
67+
click: () => {
68+
/* rename item */
69+
},
70+
},
71+
];
72+
73+
ContextMenuModel.showContextMenu(menu, e);
74+
```
75+
76+
---
77+
78+
## Example with Submenu and Checkboxes
79+
80+
Toggle settings using a submenu with checkbox items:
81+
82+
```ts
83+
const isClearOnStart = true; // Example setting
84+
85+
const menu: ContextMenuItem[] = [
86+
{
87+
label: "Clear Output On Restart",
88+
submenu: [
89+
{
90+
label: "On",
91+
type: "checkbox",
92+
checked: isClearOnStart,
93+
click: () => {
94+
// Set the config to enable clear on restart
95+
},
96+
},
97+
{
98+
label: "Off",
99+
type: "checkbox",
100+
checked: !isClearOnStart,
101+
click: () => {
102+
// Set the config to disable clear on restart
103+
},
104+
},
105+
],
106+
},
107+
];
108+
109+
ContextMenuModel.showContextMenu(menu, e);
110+
```
111+
112+
---
113+
114+
## Editing a Config File Example
115+
116+
Open a configuration file (e.g., `widgets.json`) in preview mode:
117+
118+
```ts
119+
{
120+
label: "Edit widgets.json",
121+
click: () => {
122+
fireAndForget(async () => {
123+
const path = `${getApi().getConfigDir()}/widgets.json`;
124+
const blockDef: BlockDef = {
125+
meta: { view: "preview", file: path },
126+
};
127+
await createBlock(blockDef, false, true);
128+
});
129+
},
130+
}
131+
```
132+
133+
---
134+
135+
## Summary
136+
137+
- **Menu Definition**: Use the `ContextMenuItem` type.
138+
- **Actions**: Use `click` for actions; use `submenu` for nested options.
139+
- **Separators**: Use `type: "separator"` to group items.
140+
- **Toggles**: Use `type: "checkbox"` or `"radio"` with the `checked` property.
141+
- **Displaying**: Use `ContextMenuModel.showContextMenu(menu, event)` to render the menu.

‎aiprompts/getsetconfigvar.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Setting and Reading Config Variables
2+
3+
This document provides a quick reference for updating and reading configuration values in our system.
4+
5+
---
6+
7+
## Setting a Config Variable
8+
9+
To update a configuration, use the `RpcApi.SetConfigCommand` function. The command takes an object with a key/value pair where the key is the config variable and the value is the new setting.
10+
11+
**Example:**
12+
13+
```ts
14+
await RpcApi.SetConfigCommand(TabRpcClient, { "web:defaulturl": url });
15+
```
16+
17+
In this example, `"web:defaulturl"` is the key and `url` is the new value. Use this approach for any config key.
18+
19+
---
20+
21+
## Reading a Config Value
22+
23+
To read a configuration value, retrieve the corresponding atom using `getSettingsKeyAtom` and then use `globalStore.get` to access its current value. getSettingsKeyAtom returns a jotai Atom.
24+
25+
**Example:**
26+
27+
```ts
28+
const configAtom = getSettingsKeyAtom("app:defaultnewblock");
29+
const configValue = globalStore.get(configAtom) ?? "default value";
30+
```
31+
32+
Here, `"app:defaultnewblock"` is the config key and `"default value"` serves as a fallback if the key isn't set.
33+
34+
Inside of a react componet we should not use globalStore, instead we use useSettingsKeyAtom (this is just a jotai useAtomValue call wrapped around the getSettingsKeyAtom call)
35+
36+
```tsx
37+
const configValue = useSettingsKeyAtom("app:defaultnewblock") ?? "default value";
38+
```
39+
40+
---
41+
42+
## Relevant Imports
43+
44+
```ts
45+
import { RpcApi } from "@/app/store/wshclientapi";
46+
import { TabRpcClient } from "@/app/store/wshrpcutil";
47+
import { getSettingsKeyAtom, useSettingsKeyAtom, globalStore } from "@/app/store/global";
48+
```
49+
50+
Keep this guide handy for a quick reference when working with configuration values.

‎frontend/app/workspace/workspace.tsx‎

Lines changed: 57 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,17 @@
44
import { ErrorBoundary } from "@/app/element/errorboundary";
55
import { CenteredDiv } from "@/app/element/quickelems";
66
import { ModalsRenderer } from "@/app/modals/modalsrenderer";
7+
import { NotificationPopover } from "@/app/notification/notificationpopover";
8+
import { ContextMenuModel } from "@/app/store/contextmenu";
9+
import { RpcApi } from "@/app/store/wshclientapi";
10+
import { TabRpcClient } from "@/app/store/wshrpcutil";
711
import { TabBar } from "@/app/tab/tabbar";
812
import { TabContent } from "@/app/tab/tabcontent";
9-
import { atoms, createBlock, isDev } from "@/store/global";
10-
import { isBlank, makeIconClass } from "@/util/util";
13+
import { atoms, createBlock, getApi, isDev } from "@/store/global";
14+
import { fireAndForget, isBlank, makeIconClass } from "@/util/util";
15+
import clsx from "clsx";
1116
import { useAtomValue } from "jotai";
1217
import { memo } from "react";
13-
import { NotificationPopover } from "../notification/notificationpopover";
14-
15-
import clsx from "clsx";
1618

1719
const iconRegex = /^[a-z0-9-]+$/;
1820

@@ -56,12 +58,60 @@ const Widgets = memo(() => {
5658
};
5759
const showHelp = fullConfig?.settings?.["widget:showhelp"] ?? true;
5860
const widgets = sortByDisplayOrder(fullConfig?.widgets);
61+
62+
const handleWidgetsBarContextMenu = (e: React.MouseEvent) => {
63+
e.preventDefault();
64+
const menu: ContextMenuItem[] = [
65+
{
66+
label: "Edit widgets.json",
67+
click: () => {
68+
fireAndForget(async () => {
69+
const path = `${getApi().getConfigDir()}/widgets.json`;
70+
const blockDef: BlockDef = {
71+
meta: { view: "preview", file: path },
72+
};
73+
await createBlock(blockDef, false, true);
74+
});
75+
},
76+
},
77+
{
78+
label: "Show Help Widgets",
79+
submenu: [
80+
{
81+
label: "On",
82+
type: "checkbox",
83+
checked: showHelp,
84+
click: () => {
85+
fireAndForget(async () => {
86+
await RpcApi.SetConfigCommand(TabRpcClient, { "widget:showhelp": true });
87+
});
88+
},
89+
},
90+
{
91+
label: "Off",
92+
type: "checkbox",
93+
checked: !showHelp,
94+
click: () => {
95+
fireAndForget(async () => {
96+
await RpcApi.SetConfigCommand(TabRpcClient, { "widget:showhelp": false });
97+
});
98+
},
99+
},
100+
],
101+
},
102+
];
103+
ContextMenuModel.showContextMenu(menu, e);
104+
};
105+
59106
return (
60-
<div className="flex flex-col w-12 overflow-hidden py-1 -ml-1 select-none">
107+
<div
108+
className="flex flex-col w-12 overflow-hidden py-1 -ml-1 select-none"
109+
onContextMenu={handleWidgetsBarContextMenu}
110+
>
61111
{widgets?.map((data, idx) => <Widget key={`widget-${idx}`} widget={data} />)}
112+
<div className="flex-grow" />
62113
{showHelp ? (
63114
<>
64-
<div className="flex-grow" />
65115
<Widget key="tips" widget={tipsWidget} />
66116
<Widget key="help" widget={helpWidget} />
67117
</>

0 commit comments

Comments
 (0)