UI Component Gallery

[Mirabrar-21]

@todo

---

• Design UI Components Gallery Wireframes
  • @input 📦 UI components - Discord thread
  • @input 📦 UI Components (like behance)
  • Made UI-components gallery wireframes
  • @output 📦 UI - Components Gallery V0.0.0 from comment

---

• Design UI Components Gallery Wireframes
  • @input 📦 worklog-90
  • Made UI-components gallery wireframes
  • @output 📦 UI - Components Gallery V0.0.1 from comment

---

• Design UI Components Gallery Wireframes
  • @input 📦 worklog-91
  • Made UI-components gallery wireframes
  • @output 📦 UI - Components Gallery V0.0.2 from comment

[Mirabrar-21]

tasks - 2025.09.24

• Made UI components gallery
  • Made UI components gallery Wireframes -4h03min
  • discussion -18min
  • gathering UX ideas -38min
  • Reasearch -1h
  • recorded, updated task and worklog -21min
  • @output 📦 UI - Components Gallery V0.0.0

---

worklog

worklog-90

---

feedback

---

proposal

[serapath]

feedback 2025.09.24

thanks. feedback is on discord

[Mirabrar-21]

tasks - 2025.10.5

• Made UI components gallery
  • Made UI components gallery Wireframes -4h21min
  • discussion -22min
  • gathering UX ideas -1h
  • checked Quick editor/worklog videos - 35min
  • checked demo maker - 10min
  • recorded, updated task and worklog and hackmd -33min
  • @output 📦 UI - Components Gallery V0.0.1

---

worklog

worklog-91

---

feedback

---

proposal

[serapath]

feedback 2025.10.10

Feedback on discord. lets discuss

[Mirabrar-21]

tasks - 2025.10.16

• Made UI components gallery
  • Made UI components gallery Wireframes -2h36min
  • discussion -18min
  • gathering UX ideas -15min
  • recorded, updated task and worklog and hackmd -18min
  • @output 📦 UI - Components Gallery V0.0.2

---

worklog

worklog-92

---

feedback

---

proposal

[serapath]

feedback 2025.10.19
Checked your worklog.
The menu bar on the bottom of the gallery is nice, but i think i would try to make a pretty exact clone of pinterest and behance when possible. The menubar on the bottom is full width, the filter bar is solid, so gallery items disappear under it but in your case its transparent.

Of course, our tool isnt behance or pinterest, so we literally cant make everything the same, but what we can make the same we should make the same, they researched their UI/UX and it also makes it feel more familiar. That said, of course, we can still play with the theme, e.g. dark theme, different fonts, colors, etc... that's fine.

Regarding the editor. It interesting to see the before/after code diff, but i think that is not priority. We want a basic first version, which covers essential features.

1. graph/file explorer
2. editor with tabs
3. preview screen
4. a console

Basically, the individual component view should be more or less inspired by the "theme widget", but where the theme widget only shows a single tab at once, here we show more than one, e.g. preview + editor next to each other.

Basically, showing the "demo maker" and showing the "theme widget wireframes" we already have and please also take a look at the worklog videos of muhammed azim which is around the "tiling window manager" designed by toshi.

The gallery tool we are designing is supposed to be a "merge" of those, so ideally, every time we make a feature, it should come from one of those:

• tiling window manager
• theme widget
• demo editor
• quick editor

How do we best cover all their features in the gallery?

Also, the graph explorer itself cant be done at the end, because there are many buttons, like "add datasets" or "fork" or "save to bookmark" or "fullscreen" or "filters" and the question is always, what if we added those features to e.g. the "theme widget" or one of the others - where would we add them so that it makes sense?

Or the other way around, if we would throw away:

1. the theme widget
2. the demo maker
3. the quick editor
4. the tiling window manager

And have only a "single ui component/app" to replace them all, to have all the features the above have, how would we design that? Or how would we extend/improve each of the above, so that they become equivalent in the end?

---

Some thoughts about this:

1. what if we kept the "theme widget" the way it is, but we added "tiling windows" like in the tiling window manager and we compared the "tabs/menus" in both, tiling window manager and theme widget and merged them to have the best of both worlds?
2. what if we checked the features of demo maker and quick editor and our task was to make all of them possible in the "theme widget", how would we extend/modify theme widget to make that happen?

The playproject website was meant to be the website with a small button in the corner to open/expand the theme widget.
What if we had a website that looked like the "gallery", but clicking any of the items on that gallery, would also open/expand the "theme widget", but it would already show (be preconfigured) to show that clicked entry instead of the "root entry" in the graph explorer?

Does that make sense?

We dont need to invent new features though, so while the code diff (before/after) is great, its also advanced and i think that should rather be a special "app" installed. Remmber? The theme widget allows to install new kinds of apps and open them just like the editor we show in the wireframes. So one of those new apps could show a diff, but its not a core feature for now.

One feature that is core though is the "tiling", thus it would be possible for a user to open 2 previews of the same component or different components in different "tiles" next to each other. It also means that resizing bar between your split editor view is generally a good thing and a tiling window manager has that everywhere, just like vscode has it.