write up some ai prompt documentation for contextmenu and get/set config vars

Author: sawka

aiprompts/contextmenu.md

@@ -0,0 +1,141 @@
+# Context Menu Quick Reference
+
+This guide provides a quick overview of how to create and display a context menu using our system.
+
+---
+
+## ContextMenuItem Type
+
+Define each menu item using the `ContextMenuItem` type:
+
+```ts
+type ContextMenuItem = {
+  label?: string;
+  type?: "separator" | "normal" | "submenu" | "checkbox" | "radio";
+  role?: string; // Electron role (optional)
+  click?: () => void; // Callback for item selection (not needed if role is set)
+  submenu?: ContextMenuItem[]; // For nested menus
+  checked?: boolean; // For checkbox or radio items
+  visible?: boolean;
+  enabled?: boolean;
+  sublabel?: string;
+};
+```
+
+---
+
+## Import and Show the Menu
+
+Import the context menu module:
+
+```ts
+import { ContextMenuModel } from "@/app/store/contextmenu";
+```
+
+To display the context menu, call:
+
+```ts
+ContextMenuModel.showContextMenu(menu, event);
+```
+
+- **menu**: An array of `ContextMenuItem`.
+- **event**: The mouse event that triggered the context menu (typically from an onContextMenu handler).
+
+---
+
+## Basic Example
+
+A simple context menu with a separator:
+
+```ts
+const menu: ContextMenuItem[] = [
+  {
+    label: "New File",
+    click: () => {
+      /* create a new file */
+    },
+  },
+  {
+    label: "New Folder",
+    click: () => {
+      /* create a new folder */
+    },
+  },
+  { type: "separator" },
+  {
+    label: "Rename",
+    click: () => {
+      /* rename item */
+    },
+  },
+];
+
+ContextMenuModel.showContextMenu(menu, e);
+```
+
+---
+
+## Example with Submenu and Checkboxes
+
+Toggle settings using a submenu with checkbox items:
+
+```ts
+const isClearOnStart = true; // Example setting
+
+const menu: ContextMenuItem[] = [
+  {
+    label: "Clear Output On Restart",
+    submenu: [
+      {
+        label: "On",
+        type: "checkbox",
+        checked: isClearOnStart,
+        click: () => {
+          // Set the config to enable clear on restart
+        },
+      },
+      {
+        label: "Off",
+        type: "checkbox",
+        checked: !isClearOnStart,
+        click: () => {
+          // Set the config to disable clear on restart
+        },
+      },
+    ],
+  },
+];
+
+ContextMenuModel.showContextMenu(menu, e);
+```
+
+---
+
+## Editing a Config File Example
+
+Open a configuration file (e.g., `widgets.json`) in preview mode:
+
+```ts
+{
+    label: "Edit widgets.json",
+    click: () => {
+        fireAndForget(async () => {
+            const path = `${getApi().getConfigDir()}/widgets.json`;
+            const blockDef: BlockDef = {
+                meta: { view: "preview", file: path },
+            };
+            await createBlock(blockDef, false, true);
+        });
+    },
+}
+```
+
+---
+
+## Summary
+
+- **Menu Definition**: Use the `ContextMenuItem` type.
+- **Actions**: Use `click` for actions; use `submenu` for nested options.
+- **Separators**: Use `type: "separator"` to group items.
+- **Toggles**: Use `type: "checkbox"` or `"radio"` with the `checked` property.
+- **Displaying**: Use `ContextMenuModel.showContextMenu(menu, event)` to render the menu.

aiprompts/getsetconfigvar.md

@@ -0,0 +1,50 @@
+# Setting and Reading Config Variables
+
+This document provides a quick reference for updating and reading configuration values in our system.
+
+---
+
+## Setting a Config Variable
+
+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.
+
+**Example:**
+
+```ts
+await RpcApi.SetConfigCommand(TabRpcClient, { "web:defaulturl": url });
+```
+
+In this example, `"web:defaulturl"` is the key and `url` is the new value. Use this approach for any config key.
+
+---
+
+## Reading a Config Value
+
+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.
+
+**Example:**
+
+```ts
+const configAtom = getSettingsKeyAtom("app:defaultnewblock");
+const configValue = globalStore.get(configAtom) ?? "default value";
+```
+
+Here, `"app:defaultnewblock"` is the config key and `"default value"` serves as a fallback if the key isn't set.
+
+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)
+
+```tsx
+const configValue = useSettingsKeyAtom("app:defaultnewblock") ?? "default value";
+```
+
+---
+
+## Relevant Imports
+
+```ts
+import { RpcApi } from "@/app/store/wshclientapi";
+import { TabRpcClient } from "@/app/store/wshrpcutil";
+import { getSettingsKeyAtom, useSettingsKeyAtom, globalStore } from "@/app/store/global";
+```
+
+Keep this guide handy for a quick reference when working with configuration values.