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. Missing editor extension directories
BackgroundColor
BlockHighlight
BlockHoverActions
BlockManipulation
Blocks
DragMedia
FormattingToolbar
FullBlockSelection
HyperlinkToolbar
ImageGallery
KeyboardShortcuts
Latex
LinkMenu
Markdown
Placeholder
RangeSelection
SideMenu
SlashMenu
Supernumbers
TextAlignment
TextColor
TrailingNode
UniqueID
Do you like what you are reading?. Subscribe to receive updates.
Unsubscribe anytime