Add architecture documentation and project structure details

Author: thomasgauvin

ARCHITECTURE.md

@@ -0,0 +1,69 @@
+# Architecture
+
+## Project Structure
+
+```
+src/
+├── pages/
+│   └── Editor.tsx                 # Main layout (sidebar + editor)
+├── components/
+│   ├── FileSystemAdapters/FileSystem/
+│   │   ├── LocalFileSystem.tsx    # File operations orchestrator
+│   │   ├── FileSystemItem.tsx     # Recursive folder tree renderer
+│   │   ├── RightClickMenu.tsx     # Context menu UI
+│   │   ├── WorkspaceSelector.tsx  # Initial folder picker
+│   │   └── GettingStartedHelper.tsx
+│   ├── MarkdownEditor/
+│   │   ├── RemirrorComponent.tsx  # Editor instance
+│   │   ├── FileEditor.tsx         # File content manager
+│   │   ├── RemirrorMarkdownToolbar.tsx
+│   │   └── RemirrorMarkdownEditor.tsx
+│   └── ui/                        # Button, ResizableSidebar, etc.
+└── models/
+    └── DirectoryNode.ts           # Core file tree model
+```
+
+## Data Flow
+
+### File Tree Management
+- `DirectoryNode` — Wraps `FileSystemFileHandle` and `FileSystemDirectoryHandle` from the browser API
+- Maintains parent-child relationships and tracks unsaved changes
+- Methods: `createFile()`, `createFolder()`, `delete()`, `renameFile()`, `moveNodeToNewParent()`
+
+### Editor State
+1. `Editor.tsx` holds `selectedFile` and `selectedDirectory` state
+2. `LocalFileSystem` orchestrates file operations (CRUD, rename, move)
+3. `FileEditor` loads/saves markdown content via `DirectoryNode.loadFileContent()` and `saveFileContent()`
+4. `FileSystemItem` recursively renders the file tree with drag-and-drop
+
+### Rendering Flow
+```
+Editor.tsx (state)
+├── WorkspaceSelector (initial folder pick)
+├── ResizableSidebar
+│   └── LocalFileSystem
+│       └── FileSystemItem (recursive tree)
+└── FileEditor
+    └── RemirrorComponent (markdown editor)
+```
+
+## Key Patterns
+
+### Force Rerender Counter
+File operations mutate `DirectoryNode` objects directly (to avoid expensive re-creates). A `forceRerenderCounter` is incremented after mutations and passed as the React key to force tree re-renders.
+
+### Conflict Handling
+When creating files/folders with duplicate names, the app appends `(1)`, `(2)`, etc.: `Untitled.md` → `Untitled (1).md`
+
+### Image Blob URLs
+Images are loaded as blob URLs for display, then converted back to relative paths on save. Mapping stored in `DirectoryNode.replacedImages`.
+
+### Drag & Drop
+Implemented via React DOM events on `FileSystemItem`. Drops trigger `moveNodeToNewParent()` which uses the browser API to move files.
+
+## Limitations
+
+- **Browser-only**: No Node.js filesystem access (security restriction)
+- **Single directory scope**: Can only access one folder at a time (File System Access API constraint)
+- **Image handling**: Images must be in the same folder hierarchy as the notes
+- **No sync**: No built-in backup or sync to cloud

README.md

@@ -1 +1,42 @@
 # Noted
+
+A local-first markdown note-taking app built with React and Remirror. Write, organize, and edit markdown notes directly in your file system with zero server dependencies.
+
+**[Try it now →](https://noted.appsinprogress.com)**
+
+## Features
+
+- **Local-first**: All notes stored in your filesystem—no cloud account required
+- **Live markdown editor**: Real-time editing with Remirror WYSIWYG support
+- **File browser**: Organize notes in folders with drag-and-drop support
+- **Image support**: Embed local images with relative path resolution
+- **Frontmatter support**: YAML frontmatter extraction and preservation
+- **Unsaved changes tracking**: Visual indicator for modified files
+- **Responsive design**: Works on desktop and mobile (sidebar toggles on mobile)
+- **Zero dependencies** for file access (uses native File System Access API)
+
+## Quick Start
+
+```bash
+npm install
+npm run dev
+```
+
+Select a local folder to save your notes, then start writing.
+
+## Browser Support
+
+Requires Chrome, Edge, or Opera (desktop versions). Uses the [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API).
+
+## Tech Stack
+
+- **React 18** — UI framework
+- **Remirror** — Markdown editor
+- **Tailwind CSS** — Styling
+- **TypeScript** — Type safety
+- **Vite** — Build tool
+- **Radix UI** — Accessible components
+
+## Project Status
+
+Early development. Core features (create, read, update, delete, rename, move files) are functional.