File Structure

​

Overview

• Frontend (src/) - React app with TypeScript and Tailwind CSS
• Backend (src-tauri/) - Rust backend with Tauri v2
• Configuration - Build and release configuration files

​

Project Root

scratch/
├── .github/workflows/      # CI/CD workflows
├── src/                    # React frontend
├── src-tauri/              # Rust backend
├── public/                 # Static assets
├── package.json            # Node dependencies & scripts
├── tsconfig.json           # TypeScript configuration
├── vite.config.ts          # Vite bundler config
└── tailwind.config.js      # Tailwind CSS config

​

Frontend Structure (src/)

​

Components

src/
├── components/
│   ├── editor/                 # TipTap editor + extensions
│   │   ├── Editor.tsx          # Main editor component
│   │   ├── LinkEditor.tsx      # Inline link editing popup
│   │   ├── SlashCommand.tsx    # Slash command extension
│   │   └── SlashCommandList.tsx # Slash command UI
│   ├── layout/                 # App layout components
│   │   ├── Sidebar.tsx         # Note list sidebar
│   │   └── FolderPicker.tsx    # Initial folder selection
│   ├── notes/
│   │   └── NoteList.tsx        # Scrollable note list
│   ├── command-palette/
│   │   └── CommandPalette.tsx  # Cmd+P quick actions
│   ├── settings/               # Settings page
│   │   ├── SettingsPage.tsx
│   │   ├── GeneralSettingsSection.tsx
│   │   ├── AppearanceSettingsSection.tsx
│   │   ├── ShortcutsSettingsSection.tsx
│   │   └── AboutSettingsSection.tsx
│   ├── ai/                     # AI editing features
│   │   ├── AiEditModal.tsx
│   │   └── AiResponseToast.tsx
│   ├── git/
│   │   └── GitStatus.tsx       # Git status UI
│   ├── ui/                     # Shared UI components
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   ├── Tooltip.tsx
│   │   └── index.tsx           # Exports
│   └── icons/                  # SVG icon components
│       └── index.tsx

• Editor.tsx - TipTap editor with auto-save, format bar, slash commands, source mode, focus mode, AI integration
• LinkEditor.tsx - Inline popup for adding/editing/removing links (Cmd+K)
• Sidebar.tsx - Contains note list, search, and git status
• CommandPalette.tsx - Cmd+P interface for quick note navigation and commands
• SettingsPage.tsx - Tabbed settings interface (General, Appearance, Shortcuts, About)

​

Context Providers

src/context/
├── NotesContext.tsx        # Note CRUD, search, file watching
├── GitContext.tsx          # Git operations wrapper
└── ThemeContext.tsx        # Theme & typography settings

• NotesContext uses dual context pattern (data/actions separated for performance)
• All state management is centralized in contexts (no Redux/Zustand)
• Race condition protection during note switches

​

Services

src/services/
├── notes.ts                # Tauri command wrappers for notes
├── git.ts                  # Git command wrappers
└── ai.ts                   # AI CLI command wrappers

​

Types

src/types/
└── note.ts                 # TypeScript type definitions

• Note - Full note with content
• NoteMetadata - Note list item
• Settings - App settings
• GitStatus - Git repository state

​

Root Files

src/
├── App.tsx                 # Main app component
├── main.tsx                # React root & provider setup
├── lib/
│   └── utils.ts            # Utility functions (cn() for className merging)
└── index.css               # Global styles & CSS variables

​

Backend Structure (src-tauri/)

​

Source Files

src-tauri/
├── src/
│   ├── lib.rs              # Main library with Tauri commands
│   ├── git.rs              # Git operations (8 commands)
│   └── main.rs             # Application entry point
├── capabilities/
│   └── default.json        # Tauri permissions configuration
├── Cargo.toml              # Rust dependencies
└── tauri.conf.json         # Tauri app configuration

• All Tauri command handlers (40+ commands)
• AppState management (notes cache, file watcher, search index)
• Tantivy search engine integration
• File watcher setup (notify crate)
• Settings persistence
• Preview mode window creation
• CLI argument handling

• is_available() - Check if Git is installed
• get_status() - Get repository status
• git_init() - Initialize repository
• commit_all() - Stage and commit
• push() / pull() / fetch() - Remote operations
• add_remote() - Add origin remote
• push_with_upstream() - Push with -u flag

​

Configuration

• App metadata (name, version, identifier)
• Window configuration (size, decorations, transparency)
• Build configuration (targets, signing)
• Plugin configuration (updater, dialog, fs, clipboard)
• Security settings (CSP, capabilities)

• Tauri v2 permissions for plugins
• File system read/write scope
• Dialog permissions
• Clipboard access
• Shell execution (for git commands)
• Asset protocol scope

​

GitHub Workflows (.github/workflows/)

.github/workflows/
├── ci.yml                  # Continuous integration
└── release.yml             # Multi-platform release builds

​

ci.yml

1. Checkout code
2. Setup Node.js and Rust toolchains
3. Install dependencies (npm install)
4. Run TypeScript compiler (tsc)
5. Build frontend (npm run build)
6. Check Rust code (cargo check)
7. Lint Rust code (cargo clippy)

​

release.yml

• macOS (universal binary: arm64 + x86_64)
• Windows (NSIS installer: x64)
• Linux (AppImage + .deb)

1. Build and sign apps for all platforms (parallel)
2. Upload artifacts to GitHub release (draft)
3. Generate latest.json for auto-updater

• Apple certificates and notarization credentials
• Tauri updater signing key

​

Configuration Files

​

package.json

• Node.js scripts (dev, build, tauri dev, tauri build)
• Frontend dependencies (React, TipTap, Tailwind, Tauri API)
• Dev dependencies (TypeScript, Vite, ESLint)

​

vite.config.ts

• React plugin
• Tauri plugin (for development server integration)
• Build optimizations
• Asset handling

​

tsconfig.json

• Strict type checking enabled
• React JSX transform
• Path aliases
• Module resolution

​

tailwind.config.js

• Custom color palette
• Dark mode support
• Typography plugin settings
• Custom utilities

​

Notes Folder Structure

<notes-folder>/
├── assets/                 # Image files
├── .scratch/               # App-specific data
│   └── settings.json       # Per-folder settings
├── .git/                   # Git repository (optional)
└── *.md                    # Markdown note files

• .git/ - Git repository
• .scratch/ - App configuration
• .obsidian/ - Obsidian vault data
• .trash/ - Deleted notes
• assets/ - Image files

​

App Data Directory

• macOS: ~/Library/Application Support/com.erictli.scratch/
• Windows: %APPDATA%\com.erictli.scratch\
• Linux: ~/.local/share/com.erictli.scratch/

<app-data>/
├── config.json             # Notes folder path
└── search_index/           # Tantivy search index

​

Build Artifacts

​

Development

dist/                       # Vite build output (frontend)
src-tauri/target/           # Rust build artifacts

​

Production

• macOS: .app bundle (code-signed and notarized), .dmg installer
• Windows: .exe installer (NSIS)
• Linux: .AppImage, .deb

​

Key Patterns

​

File Naming

• Components: PascalCase (e.g., Editor.tsx, NoteList.tsx)
• Utilities: camelCase (e.g., utils.ts)
• Contexts: PascalCase with Context suffix (e.g., NotesContext.tsx)
• Services: lowercase (e.g., notes.ts, git.ts)

​

Import Organization

1. External dependencies (React, Tauri)
2. Internal components/contexts
3. Services and utilities
4. Types
5. Styles

​

Code Organization

• Each component in its own file
• Related components grouped in directories
• Shared UI components in components/ui/
• Icon components exported from components/icons/index.tsx
• Contexts separated from components
• Tauri command wrappers in services layer

​

See Also

• Tauri Commands Reference - Complete API reference
• Settings Reference - Settings schema documentation
• CLAUDE.md - Development guide