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. 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

Do you like what you are reading? Subscribe to receive updates.

Unsubscribe anytime