desertthunder.dev / lazurite-desktop
BlueSky & more on desktop lazurite.stormlightlabs.org/
tauri rust typescript bluesky appview atproto solid
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

lazurite-desktop / docs / code-quality.md
at main 4.1 kB view raw view code
Owais Jamil fix: image rendering/overlay positioning
d9730151

title: Code Quality Audits updated: 2026-04-15#

There is a ton of repeated code in this project. This document tracks repeated patterns for future refactoring.

Dialogs#

Inventory (2026-04-15)#

Component File (relative to src/components/) Overlay style Dialog semantics Notes
Image gallery overlay /feeds/ImageGallery.tsx Fullscreen glass overlay, centered media stage role="dialog" + aria-modal="true" Handles image navigation/download + keyboard controls.
Report dialog /moderation/ReportDialog.tsx Centered card on fullscreen scrim Missing role="dialog"/aria-modal Uses shared backdrop/surface naming but local implementation.
Settings confirmation modal /settings/SettingsPanel.tsx Centered confirmation card Missing role="dialog"/aria-modal Inline modal implementation nested inside settings panel.
Add column panel /deck/AddColumnPanel.tsx Right drawer with backdrop role="dialog" + aria-modal="true" Drawer-style overlay, good semantic baseline.
Profile actor list overlay /profile/ProfileActorList.tsx Bottom sheet style overlay role="dialog" + aria-modal="true" Focus target is set on open; closes on scrim click and Escape.
Follow hygiene panel /profile/FollowHygienePanel.tsx Right sheet/panel role="dialog" + aria-modal="true" Large panel overlay with keyboard and progress handling.
Follow hygiene confirmation /profile/FollowHygeineConfirmationDialog.tsx Centered danger confirmation card Missing role="dialog"/aria-modal Standalone confirmation overlay implementation.
Feed composer /feeds/FeedComposer.tsx Fullscreen composer dialog overlay Missing role="dialog"/aria-modal Uses custom panel and scrim; keyboard handling managed outside.
Drafts list overlay /feeds/DraftsList.tsx Bottom-aligned panel over fullscreen scrim Missing role="dialog"/aria-modal Similar layering/animation style to composer.
Thread drawer /posts/ThreadDrawer.tsx Right drawer over fullscreen scrim Missing role="dialog"/aria-modal Uses close button + escape handler, but no dialog semantics yet.
Context menu (non-dialog) /shared/ContextMenu.tsx Fullscreen hit target + positioned menu role="menu" Not a modal dialog; still part of overlay infrastructure.

Repeated Patterns#

  • Scrim/backdrop classes are duplicated across multiple files with slight class/token variations.
  • Dialog/card enter-exit animation values are redefined in each component.
  • Escape-key listener setup/teardown appears in several overlays and drawers.
  • Many overlays still rely on click-to-close behavior without consistent semantic attributes.

Refactor Candidates#

  • Extract a shared OverlayBackdrop primitive for fullscreen scrim + portal + optional click-to-close.
  • Extract a shared DialogSurface primitive for animated card/sheet containers.
  • Standardize dialog semantics (role, aria-modal, labeling) across all modal-like overlays.
  • Centralize escape-key wiring in an overlay utility hook to reduce per-component lifecycle code.