Main UI (ContentView)
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
ContentView serves as the primary user interface for the Writer application, a distraction-free macOS text editor built with SwiftUI. It implements a multi-column layout designed to facilitate efficient file management and document editing. The interface is centered around a NavigationSplitView that provides a hierarchical sidebar for file navigation and a detailed editor pane with an optional live preview.
The UI is highly integrated with the EditorStore, ThemeStore, and LayoutStore via the SwiftUI Environment, ensuring that document state, visual styling, and layout preferences are synchronized across the application. It handles core user interactions such as file selection, directory navigation, drag-and-drop operations, and context-sensitive actions for file manipulation.
Sources: Writer/ContentView.swift:13-33, CLAUDE.md:25-28
Architecture and Layout
The Main UI is structured as a NavigationSplitView, which is the standard macOS pattern for master-detail interfaces. It consists of two primary columns: the Sidebar (File Tree) and the Detail View (Editor/Preview).
Layout Hierarchy
The Detail view utilizes an HSplitView to manage the relationship between the text editor and the markdown preview.
The layoutContainer uses a horizontal split view where the editorView is given a minimum width of 280pt, and the previewContainer visibility is controlled by layoutStore.showPreview.
Sources: Writer/ContentView.swift:23-35, Writer/ContentView.swift:133-140
Component Breakdown
1. Sidebar (File Tree)
The sidebar renders a hierarchical representation of the user's writing folder. It uses a List populated by a recursive sidebarNodeRow function to handle nested directories.
| Component | Logic/Implementation | Source |
|---|---|---|
| List Selection | Bound to selectedFileBinding which calls editorStore.selectFile(at:). | ContentView.swift:189-197 |
| Folder Nodes | Rendered using DisclosureGroup to allow expanding/collapsing. | ContentView.swift:203-214 |
| File Nodes | Identified by extensions like .md, .markdown, .txt. | ContentView.swift:268-274 |
| Drag & Drop | Supports NSItemProvider for moving files and dropDestination for receiving. | ContentView.swift:80-92 |
2. Editor View
The editor pane is a distraction-free writing area. It centers a MarkdownTextView within a GeometryReader to maintain a readable line length (max 800pt) even on wide displays.
private var editorView: some View {
GeometryReader { geometry in
HStack {
Spacer()
MarkdownTextView(text: Bindable(editorStore).documentText)
.frame(
width: min(800, geometry.size.width * 0.85),
height: geometry.size.height,
alignment: .center
)
Spacer()
}
}
}
Sources: Writer/ContentView.swift:120-131
3. Preview Container
The preview container wraps a WebView that renders the current documentText as styled HTML. Its visibility and interaction state are toggled via the LayoutStore.
Sources: Writer/ContentView.swift:142-148, Writer/WebView.swift:9-14
Data Flow and State Management
The Main UI relies on the Observation framework for reactive updates. When a user types in the editor, the following sequence occurs:
When documentText changes, ContentView triggers an autosave schedule, and because the WebView is also observing the EditorStore, the preview updates automatically.
Sources: Writer/ContentView.swift:39-41, Writer/EditorStore.swift:283-294, Writer/WriterApp.swift:13-16
Toolbar and Menu Actions
The UI provides several interactive controls through the toolbar and context menus.
| Control | Action | Keyboard Shortcut |
|---|---|---|
| Toggle Preview | Toggles layoutStore.showPreview | ⌘P |
| Save | Calls editorStore.persistCurrentDocument() | N/A (Manual) |
| Refresh | Calls editorStore.refreshFiles() | N/A |
| New File | Sets pendingCreation to .file | ⌘N |
| New Folder | Sets pendingCreation to .folder | ⌘⇧N |
| Export HTML | Triggers HTMLExporter | ⌘⇧E |
Sources: Writer/ContentView.swift:51-76, Writer/WriterApp.swift:97-133
Contextual Operations
ContentView defines extensive context menus for both files and folders in the sidebar, enabling standard file system operations:
- Renaming: Uses an inline
TextFieldwithin the sidebar row. - Duplication: Implements a "copy" logic that appends increments (e.g., "filename copy 2").
- Deletion: Triggers an
NSAlertconfirmation before moving the item to the Trash. - Clipboard: Supports Copy/Cut/Paste operations handled by
EditorStore.
Sources: Writer/ContentView.swift:293-356, Writer/ContentView.swift:377-402
Summary
Main UI (ContentView) is the central orchestration layer for the Writer application. It combines a SwiftUI-based file navigator with a specialized AppKit-bridge for high-performance text editing. By leveraging the NavigationSplitView architecture and the Observation framework, it provides a responsive environment where file management, editing, and previewing are seamlessly integrated into a single cohesive experience.