I have the urge to write down our common understanding on the interface. I am very excited to build functionality, but I am also very concerned about creating a mess. I would be more comfortable if I learned the fundamentals and concepts of the interface. This way, I make sure the Agent Sticks to our conventions instead of generating random code that nobody will be able to maintain in the future. Let's see if I can extract those foundations from your brains. 🤗

In a React codebase, we don’t extend components in the OOP sense. The standard pattern is composition: reuse an existing component with props, wrap it in another component, or split responsibilities into parent and child components. A component becomes its own unit when it represents a clear UI element with its own responsibility or logic.

1. Shared UI primitives

frontend/packages/ui/src/components/

alert-dialog.tsx
badge.tsx
calendar.tsx
checkbox.tsx
date-picker.tsx
dialog.tsx
dropdown-menu.tsx
input.tsx
label.tsx
menubar.tsx
popover.tsx
progress.tsx
radio-group.tsx
scroll-area.tsx
sidebar.tsx
skeleton.tsx
switch.tsx
tabs.tsx
text.tsx
textarea.tsx

2. Shared UI components

frontend/packages/ui/src/

accessories.tsx
account-page.tsx
activity.tsx
api-inspector.tsx
avatar.tsx
blocks-content-utils.tsx
button.tsx
collaborators-page.tsx
comments.tsx
container.tsx
copy-url-field.tsx
data-viewer.tsx
directory-page.tsx
directory-panel.tsx
discussions-page.tsx
document-cover.tsx
document-date.tsx
document-header.tsx
document-list-item.tsx
document-tools.tsx
draft-badge.tsx
edit-profile-form.tsx
email-notifications.tsx
embed-views.tsx
embed-wrapper.tsx
entity-card.tsx
face-pile.tsx
feed-filters.tsx
feed-page-common.tsx
feed.tsx
floating-account-footer.tsx
follow-button.tsx
followers.tsx
following.tsx
footer.tsx
form-fields.tsx
form-input.tsx
forms.tsx
heading.tsx
highlight-context.tsx
hm-host-banner.tsx
hm-icon.tsx
hover-card.tsx
icon-form.tsx
icons.tsx
image-form.tsx
inline-descriptor.tsx
inline-draft-card.tsx
inline-draft-list-item.tsx
inline-feedback.tsx
inline-subscribe-box.tsx
inspect-ipfs-page.tsx
inspector-page.tsx
inspector-shell.tsx
join-button.tsx
layout.tsx
list-item.tsx
list.tsx
members-facepile.tsx
membership.tsx
merged-badge.tsx
mobile-panel-sheet.tsx
navigation.tsx
new-document-card.tsx
new-document-list-item.tsx
newspaper.tsx
notification-list-item.tsx
open-in-panel.tsx
options-dropdown.tsx
options-panel.tsx
page-layout.tsx
page-message-states.tsx
page-tabs.tsx
panel-layout.tsx
preview-banner.tsx
private-badge.tsx
push-toast.tsx
query-block-content.tsx
resize-handle.tsx
resource-page-common.tsx
resource-token.tsx
search.tsx
seed-logo.tsx
select-dropdown.tsx
separator.tsx
site-header.tsx
site-logo.tsx
spinner.tsx
table-list.tsx
text.tsx
titlebar.tsx
toast.tsx
tooltip.tsx
universal-dialog.tsx
unreferenced-documents.tsx

3. Web app components/routes

frontend/apps/web/app/

auth.tsx
client-lazy.tsx
commenting.tsx
config-dotenv.tsx
email-notifications.tsx
entry.client.tsx
entry.server.tsx
not-registered.tsx
notifications-page-content.tsx
page-footer.tsx
providers.tsx
root.tsx
ui/container.tsx
universal-client.tsx
web-feed-page.tsx
web-resource-page.tsx
web-site-header.tsx
web-utils.tsx

Web routes

frontend/apps/web/app/routes/

$.tsx
_index.tsx
api.$.tsx
hm.api.admin.tsx
hm.api.config.tsx
hm.api.content-image.tsx
hm.api.delegate-device.tsx
hm.api.discover.tsx
hm.api.document-update.tsx
hm.api.file.$.tsx
hm.api.image.$.tsx
hm.api.register.tsx
hm.api.resource.$.tsx
hm.api.site-image.tsx
hm.api.version.tsx
hm.auth.callback.tsx
hm.connect.tsx
hm.device-link.$.tsx
hm.download.tsx
hm.notifications.tsx
hm.register.tsx

4. Desktop app components

frontend/apps/desktop/src/components/

add-block-at-end-button.tsx
app-error.tsx
assistant-panel.tsx
auto-updater.tsx
bookmarking.tsx
branch-dialog.tsx
commenting.tsx
contacts-prompt.tsx
copy-reference-button.tsx
copy-reference-url.tsx
cover-image.tsx
create-doc-button.tsx
debug-dialogs.tsx
delete-dialog.tsx
delete-draft-dialog.tsx
desktop-query-block-draft-slot.tsx
discussions-panel.tsx
doc-navigation.tsx
document-actions-provider.tsx
edit-nav-header-pane.tsx
edit-navigation-popover.tsx
edit-profile-dialog.tsx
editing-toolbar.tsx
editor.tsx
error-bar-macos.tsx
error-bar-windows-linux.tsx
error-bar.tsx
footer.tsx
hypermedia-highlight.tsx
icon-form.tsx
import-doc-button.tsx
import-doc-dialog.tsx
indicator.tsx
inline-new-document-card.tsx
join-button.tsx
link-device-dialog.tsx
location-picker.tsx
main-wrapper.tsx
markdown.tsx
move-dialog.tsx
network-dialog.tsx
onboarding-icons.tsx
onboarding.tsx
options-panel.tsx
parent-update-toast.tsx
payment-settings.tsx
placeholder-box.tsx
publish-draft-button.tsx
publish-graphics.tsx
publish-site.tsx
remote-vault-reminder.tsx
search-input.tsx
sidebar-base.tsx
sidebar-footer.tsx
sidebar.tsx
titlebar-common.tsx
titlebar-macos.tsx
titlebar-windows-linux.tsx
titlebar.tsx
window-controls.tsx
windows-linux-titlebar.tsx
wxr-import-dialog.tsx

5. Desktop pages

frontend/apps/desktop/src/pages/

api-inspector.tsx
base.tsx
contact-page.tsx
contacts-page.tsx
deleted-content.tsx
desktop-feed.tsx
desktop-resource.tsx
document-placeholder.tsx
drafts.tsx
image-form.tsx
inspect-ipfs.tsx
inspect-resource.tsx
library.tsx
main.tsx
notifications.tsx
preview.tsx
profile.tsx
settings.tsx

6. Editor extensions

BackgroundColor
BlockHighlight
BlockHoverActions
BlockManipulation
Blocks
DragMedia
FormattingToolbar
frontend/packages/editor/src/hm-formatting-toolbar.tsx
FullBlockSelection
HyperlinkToolbar
ImageGallery
KeyboardShortcuts
Latex
LinkMenu
Markdown
Placeholder
RangeSelection
SideMenu
SlashMenu
Supernumbers
TextAlignment
TextColor
TrailingNode
UniqueID