• Johnny's avatar
    feat(web): add Focus Mode for distraction-free writing · c8162ff3
    Johnny authored
    Add keyboard-activated Focus Mode to provide an immersive writing experience:
    
    Features:
    - Toggle with Cmd/Ctrl+Shift+F (matches GitHub, Google Docs)
    - Exit with Escape, toggle shortcut, button click, or backdrop click
    - Expands editor to ~80-90% of viewport with centered layout
    - Semi-transparent backdrop with blur effect
    - Maintains all editor functionality (attachments, shortcuts, etc.)
    - Smooth 300ms transitions
    
    Responsive Design:
    - Mobile (< 640px): 8px margins, 50vh min-height
    - Tablet (640-768px): 16px margins
    - Desktop (> 768px): 32px margins, 60vh min-height, 1024px max-width
    
    Implementation:
    - Centralized constants for easy maintenance (FOCUS_MODE_STYLES)
    - Extracted keyboard shortcuts and heights to named constants
    - JSDoc documentation for all new functions and interfaces
    - TypeScript type safety with 'as const'
    - Explicit positioning (top/left/right/bottom) to avoid width overflow
    
    Files Modified:
    - web/src/components/MemoEditor/index.tsx - Main Focus Mode logic
    - web/src/components/MemoEditor/Editor/index.tsx - Height adjustments
    - web/src/locales/en.json - Translation keys
    
    Design follows industry standards (GitHub Focus Mode, Notion, Obsidian)
    and maintains code quality with single source of truth pattern.
    c8162ff3
Name
Last commit
Last update
..
ActivityCalendar Loading commit data...
ConfirmDialog Loading commit data...
Inbox Loading commit data...
MasonryView Loading commit data...
MemoContent Loading commit data...
MemoDetailSidebar Loading commit data...
MemoEditor Loading commit data...
MemoExplorer Loading commit data...
MemoRelationForceGraph Loading commit data...
PagedMemoList Loading commit data...
Settings Loading commit data...
StatisticsView Loading commit data...
kit Loading commit data...
memo-metadata Loading commit data...
ui Loading commit data...
AttachmentIcon.tsx Loading commit data...
AuthFooter.tsx Loading commit data...
ChangeMemberPasswordDialog.tsx Loading commit data...
CreateAccessTokenDialog.tsx Loading commit data...
CreateIdentityProviderDialog.tsx Loading commit data...
CreateShortcutDialog.tsx Loading commit data...
CreateUserDialog.tsx Loading commit data...
CreateWebhookDialog.tsx Loading commit data...
DateTimeInput.tsx Loading commit data...
Empty.tsx Loading commit data...
LeafletMap.tsx Loading commit data...
LearnMore.tsx Loading commit data...
LocaleSelect.tsx Loading commit data...
MemoActionMenu.tsx Loading commit data...
MemoAttachment.tsx Loading commit data...
MemoDisplaySettingMenu.tsx Loading commit data...
MemoFilters.tsx Loading commit data...
MemoReactionListView.tsx Loading commit data...
MemoResource.tsx Loading commit data...
MemoSkeleton.tsx Loading commit data...
MemoView.tsx Loading commit data...
MemosLogo.tsx Loading commit data...
MobileHeader.tsx Loading commit data...
Navigation.tsx Loading commit data...
NavigationDrawer.tsx Loading commit data...
PasswordSignInForm.tsx Loading commit data...
PreviewImageDialog.tsx Loading commit data...
ReactionSelector.tsx Loading commit data...
ReactionView.tsx Loading commit data...
RequiredBadge.tsx Loading commit data...
SearchBar.tsx Loading commit data...
TagTree.tsx Loading commit data...
ThemeSelect.tsx Loading commit data...
UpdateAccountDialog.tsx Loading commit data...
UpdateCustomizedProfileDialog.tsx Loading commit data...
UserAvatar.tsx Loading commit data...
UserMenu.tsx Loading commit data...
VisibilityIcon.tsx Loading commit data...