Ahmad - Ui Components by ddroid · Pull Request #2 · playproject-ui/ui-components

ddroid · 2025-01-07T18:12:43Z

`@todo`

Collect evety bit of information about UI of themeWidget
Create a set of well organized notes
@output 📦 from Notes - ThemeWidget #4

Signed-off-by: Ahmad Munir <142005659+ddroid@users.noreply.github.com>

Copilot

Pull request overview

This pull request introduces a comprehensive UI components system for debugging and testing website themes. The PR adds approximately 15 major UI components including theme_widget, taskbar, tabs, actions, and various editors, along with a protocol-based messaging system for component communication.

Key Changes

Implemented a state-driven component architecture with protocol-based messaging
Added 15+ reusable UI components (theme_widget, taskbar, tabs, actions, etc.)
Created comprehensive documentation for the standard protocol and component structure
Established a consistent component pattern across all modules

Reviewed changes

Copilot reviewed 11 out of 71 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
web/page.js	Main application entry point with component orchestration
src/node_modules/theme_widget/	Core theme widget component with space and taskbar subcomponents
src/node_modules/taskbar/	Taskbar component managing tabs and manager
src/node_modules/tabs/	Tab management component with drag-scroll functionality
src/node_modules/actions/	Actions menu component with filtering capability
src/node_modules/quick_actions/	Quick action bar with search and step tracking
src/node_modules/console_history/	Command history display component
src/node_modules/action_bar/	Action bar orchestrating quick actions, actions menu, and steps wizard
src/node_modules/steps_wizard/	Multi-step wizard component with progress tracking
src/node_modules/manager/	Manager component coordinating program and action bar
src/node_modules/program/	Program component handling form inputs and actions
src/node_modules/space.js	Space component managing editor and action views
src/node_modules/quick_editor.js	Quick editor for data manipulation
src/node_modules/tabbed_editor/	Tabbed code editor with syntax highlighting
src/node_modules/graph_explorer_wrapper/	Wrapper for graph explorer with database integration
guide/	Documentation for protocols and component architecture
package.json	Project metadata and dependencies

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-20T11:23:16Z

bundle.js

+  }
+
+  function update_scroll_position () {
+    // TODO
+  }
+
+  func


Variable dataset is used like a local variable, but is missing a declaration.

Suggested change

}

function update_scroll_position () {

// TODO

}

func

for (const dataset of datasets) {

// eslint-disable-next-line no-undef

result[node][dataset] = {}

// eslint-disable-next-line no-undef

const files = drive.list(dataset, node)

// eslint-disable-next-line no-undef

for (const file of files) {

Copilot · 2025-12-20T11:23:17Z

bundle.js

+  }
+
+  function update_scroll_position () {
+    // TODO
+  }
+
+  func


Variable file is used like a local variable, but is missing a declaration.

Suggested change

}

function update_scroll_position () {

// TODO

}

func

for (const dataset of datasets) {

// eslint-disable-next-line no-undef

result[node][dataset] = {}

// eslint-disable-next-line no-undef

const files = drive.list(dataset, node)

// eslint-disable-next-line no-undef

for (const file of files) {

Copilot · 2025-12-20T11:23:17Z

temp.js

@@ -0,0 +1,88 @@
+// @TODO: replace `callback` and `actions_callback` with this
+async function component (opts, protocol) {


Unused function component.

Copilot · 2025-12-20T11:23:17Z

temp.js

@@ -0,0 +1,88 @@
+// @TODO: replace `callback` and `actions_callback` with this
+async function component (opts, protocol) {
+  const { id, sdb } = await get(opts.sid)


Unused variable sdb.

Copilot · 2025-12-20T11:23:18Z

temp.js

+  // ...
+  return el
+  // ...
+  function create_action_item (action_data, index) {


Unused function create_action_item.

Copilot · 2025-12-20T11:23:18Z

guide/tabs_commented.js

+  // eslint-disable-next-line no-unused-vars
+  const { drive } = sdb


Unused variable drive.

Suggested change

// eslint-disable-next-line no-unused-vars

const { drive } = sdb

// NOTE: When drive-based functionality is implemented, destructure it from sdb here.

// const { drive } = sdb

Copilot · 2025-12-20T11:23:19Z

guide/tabs_commented.js

+  // eslint-disable-next-line no-unused-vars
+  const subs = await sdb.watch(onbatch)


Unused variable subs.

Suggested change

// eslint-disable-next-line no-unused-vars

const subs = await sdb.watch(onbatch)

await sdb.watch(onbatch)

Copilot · 2025-12-20T11:23:19Z

bundle.js

+    commands_container.className = 'commands-list'
+
+    commands.forEach((command, index) => {
+      const command_item = create_command_item(command, index)


Superfluous argument passed to function create_command_item.

Suggested change

const command_item = create_command_item(command, index)

const command_item = create_command_item(command)

Copilot · 2025-12-20T11:23:19Z

bundle.js

+
+      const btn = make_btn(key, `tab-button${first}`, labels[nesting], nesting)
+      const tab = make_tab(key, `tab-content${sub + first}`, ['btns', 'tabs'], local_nesting)
+      btn.onclick = () => tab_btn_click(btn, btns, tabs, '.root-tabs > .tab-content', 'node', key)


Superfluous arguments passed to function tab_btn_click.

Suggested change

btn.onclick = () => tab_btn_click(btn, btns, tabs, '.root-tabs > .tab-content', 'node', key)

btn.onclick = () => tab_btn_click(btn, btns, tabs)

Copilot · 2025-12-20T11:23:20Z

bundle.js

+    const { type, data } = msg
+    if (type === 'console_history_toggle') console_history_toggle_view()
+    else if (type === 'graph_explorer_toggle') graph_explorer_toggle_view()
+    else if (type === 'display_actions') actions_toggle_view(data)


Superfluous argument passed to function actions_toggle_view.

Suggested change

else if (type === 'display_actions') actions_toggle_view(data)

else if (type === 'display_actions') actions_toggle_view()

…zard support

ddroid and others added 2 commits January 7, 2025 22:39

Boiler Plate

b8c0dd2

Update README.md

a3bfac4

Signed-off-by: Ahmad Munir <142005659+ddroid@users.noreply.github.com>

ddroid mentioned this pull request Jan 7, 2025

Create - BoilerPlate #3

Open

6 tasks

ddroid changed the title ~~BoilerPlate~~ Create - Notes Jan 7, 2025

ddroid and others added 7 commits January 9, 2025 09:52

Updated the Code to v0.0.2

0bb5606

Update README.md

841a11b

Signed-off-by: Ahmad Munir <142005659+ddroid@users.noreply.github.com>

Updated the Code to v0.0.2

84edf68

Forget to build v0.0.2

4a2a95a

Action Wizard v0.0.1

78a619f

some small tweaks and improved css

a050291

bundled

8f7b26f

ddroid mentioned this pull request Jan 15, 2025

Roadmap - ThemeWidget #1

Open

10 tasks

ddroid and others added 13 commits January 18, 2025 01:12

standardJS and SnakeCase

ba284ee

Created menu for viewing and updated existing code

3280c0a

updated the web/index.js for better preview

f46b482

Fixed a bug

4d420e7

Changed the src/index.js

a310a86

fine tuned according to feedback

0cc50c5

state

9bec91f

temp testing

f468ba0

temp testing & bundled

d33e563

updated boot.js

b98c6a3

Update README.md

37d7382

Signed-off-by: Ahmad Munir <142005659+ddroid@users.noreply.github.com>

updated the web folder

70d87a5

added Readme

b8881a0

ddroid changed the title ~~Create - Notes~~ Ahmad - Ui Components Mar 10, 2025

ddroid added 4 commits March 11, 2025 02:46

changed the path

ffa35d1

commented state modules

7504afa

rem index.js for ez understanding

5565fba

moved the fallback at end

a0d3456

Copilot started reviewing on behalf of ddroid December 20, 2025 11:21 View session

Copilot AI reviewed Dec 20, 2025

View reviewed changes

ddroid added 28 commits December 20, 2025 18:30

Updated Quick Actions

fa9cb17

trying to add resize to wrappers

c79fedf

resize tweak

873a960

bundled

3800dc0

Update quick_actions on focus change

9cb708c

Update actions on input

88b3e93

Fixed some Mapping Issues

4cbf7ea

Added tooltip prefs in quick_actions

7e0e0b4

Added Help button commands

6159990

bundled

95980e3

Made the input field ready for major change

3974cdc

Connect steps_wizard and actions + quick_actions

56a6eef

bundled

ad6a7fd

Added Docs Functionality

cdfb2a4

bundled

c9ae483

Updated standardx linter configuration

5923b4a

Code Linting

7ad618f

Implemented DOCS system module

86420d3

bundled

a738cf2

Updated Docs According to the feedback

9b7669a

Removed ui_focus_docs message handling

e14e2d3

bundled

4075781

Refactored DOCS admin API

8de9a67

Refactored action system to use component-based actions with steps wi…

1b32e96

…zard support

bundled

ef0cb37

Absolute positioning for actions, form input, and steps wizard

ff8205c

Centralize action registry in DOCS and removed control_unit

093b123

bundled

87da9fa

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ahmad - Ui Components#2

Ahmad - Ui Components#2
ddroid wants to merge 250 commits intoplayproject-ui:mainfrom
ddroid:main

ddroid commented Jan 7, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 20, 2025

Uh oh!

Copilot AI Dec 20, 2025

Uh oh!

Copilot AI Dec 20, 2025

Uh oh!

Copilot AI Dec 20, 2025

Uh oh!

Copilot AI Dec 20, 2025

Uh oh!

Copilot AI Dec 20, 2025

Uh oh!

Copilot AI Dec 20, 2025

Uh oh!

Copilot AI Dec 20, 2025

Uh oh!

Copilot AI Dec 20, 2025

Uh oh!

Copilot AI Dec 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

-  }
-  function update_scroll_position () {
-    // TODO
-  }
-  func
+        for (const dataset of datasets) {
+          // eslint-disable-next-line no-undef
+          result[node][dataset] = {}
+          // eslint-disable-next-line no-undef
+          const files = drive.list(dataset, node)
+          // eslint-disable-next-line no-undef
+          for (const file of files) {

		@@ -0,0 +1,88 @@
		// @TODO: replace `callback` and `actions_callback` with this
		async function component (opts, protocol) {

		// eslint-disable-next-line no-unused-vars
		const { drive } = sdb

		// eslint-disable-next-line no-unused-vars
		const subs = await sdb.watch(onbatch)

	// eslint-disable-next-line no-unused-vars
	const subs = await sdb.watch(onbatch)
	await sdb.watch(onbatch)

	const command_item = create_command_item(command, index)
	const command_item = create_command_item(command)

	btn.onclick = () => tab_btn_click(btn, btns, tabs, '.root-tabs > .tab-content', 'node', key)
	btn.onclick = () => tab_btn_click(btn, btns, tabs)

	else if (type === 'display_actions') actions_toggle_view(data)
	else if (type === 'display_actions') actions_toggle_view()

Conversation

ddroid commented Jan 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

@todo

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Dec 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 20, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ddroid commented Jan 7, 2025 •

edited

Loading

`@todo`