Interface Notions

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