# laynefox7/lfnote architecture

> Architecture diagram of the GitHub repository laynefox7/lfnote, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/laynefox7/lfnote
- Repository: https://github.com/laynefox7/lfnote

## Overview

Planner is a calendar-based task and notes application with folders, tags, completion tracking, task dependencies, and a Gantt view. A signed-in user enters through the React app, which loads planner data and coordinates edits through the client API; the server authenticates requests and persists account-scoped records. The graph preserves the calendar, Gantt/dependency, and administration branches. Source excerpts are partial, so several UI-to-handler and client-to-server links are shown only where the supplied evidence supports them; the client API excerpt also contains localStorage persistence.

Main entry points: [`src/App.tsx`](https://github.com/laynefox7/lfnote/blob/main/src/App.tsx) (App coordinator), [`src/components/DayColumn.tsx`](https://github.com/laynefox7/lfnote/blob/main/src/components/DayColumn.tsx) (Calendar columns), [`src/api.ts`](https://github.com/laynefox7/lfnote/blob/main/src/api.ts) (Client API), [`server/index.js`](https://github.com/laynefox7/lfnote/blob/main/server/index.js) (HTTP API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Application shell"]
  node_app["App coordinator<br/>[App.tsx]"]
  node_api["Client API<br/>[api.ts]"]
end

subgraph group_views["Planning views"]
  node_calendar["Calendar columns<br/>[DayColumn.tsx]"]
  node_gantt["Gantt planning<br/>[GanttView.tsx]"]
  node_listview["List view<br/>[ListView.tsx]"]
  node_rowsview["Rows view<br/>[RowsView.tsx]"]
  node_donearea["Completed tasks<br/>[DoneArea.tsx]"]
end

subgraph group_interaction["Editing and navigation"]
  node_taskrow["Task cards<br/>[TaskRow.tsx]"]
  node_taskeditor["Task editor<br/>[TaskEditor.tsx]"]
  node_noteeditor["Note editor<br/>[NewNoteEditor.tsx]"]
  node_folders["Folder controls<br/>[FolderBar.tsx]"]
  node_tags["Tag controls<br/>[TagBar.tsx]"]
  node_arrows["Dependency links<br/>[arrows.tsx]"]
  node_authui["Login screen<br/>[LoginScreen.tsx]"]
  node_adminui["Admin panel<br/>[AdminPanel.tsx]"]
end

subgraph group_backend["Service layer"]
  node_server["HTTP API<br/>[index.js]"]
  node_auth["Session auth<br/>[auth.js]"]
  node_pgquery["Database queries"]
end

subgraph group_storage["Persistence"]
  node_db[("Planner database<br/>[schema.sql]")]
  node_browserstore[("Browser storage<br/>[api.ts]")]
end

node_user(("Planner user"))

node_user -->|"uses"| node_app
node_app -->|"loads and saves"| node_api
node_app -->|"renders"| node_calendar
node_app -->|"renders"| node_gantt
node_app -->|"renders"| node_listview
node_app -->|"renders"| node_rowsview
node_app -->|"renders"| node_donearea
node_calendar -->|"displays tasks"| node_taskrow
node_calendar -->|"edits tasks"| node_taskeditor
node_calendar -->|"creates notes"| node_noteeditor
node_app -->|"provides folder state"| node_folders
node_app -->|"provides tag state"| node_tags
node_app -->|"provides links"| node_arrows
node_user -->|"signs in"| node_authui
node_app -->|"renders"| node_authui
node_app -->|"renders"| node_adminui
node_api -->|"requests"| node_server
node_server -->|"checks sessions"| node_auth
node_server -->|"queries"| node_pgquery
node_auth -->|"reads and writes"| node_pgquery
node_pgquery -->|"reads and writes"| node_db
node_api -->|"reads and writes"| node_browserstore

click node_app "https://github.com/laynefox7/lfnote/blob/main/src/App.tsx"
click node_api "https://github.com/laynefox7/lfnote/blob/main/src/api.ts"
click node_calendar "https://github.com/laynefox7/lfnote/blob/main/src/components/DayColumn.tsx"
click node_gantt "https://github.com/laynefox7/lfnote/blob/main/src/components/GanttView.tsx"
click node_listview "https://github.com/laynefox7/lfnote/blob/main/src/components/ListView.tsx"
click node_rowsview "https://github.com/laynefox7/lfnote/blob/main/src/components/RowsView.tsx"
click node_donearea "https://github.com/laynefox7/lfnote/blob/main/src/components/DoneArea.tsx"
click node_taskrow "https://github.com/laynefox7/lfnote/blob/main/src/components/TaskRow.tsx"
click node_taskeditor "https://github.com/laynefox7/lfnote/blob/main/src/components/TaskEditor.tsx"
click node_noteeditor "https://github.com/laynefox7/lfnote/blob/main/src/components/NewNoteEditor.tsx"
click node_folders "https://github.com/laynefox7/lfnote/blob/main/src/components/FolderBar.tsx"
click node_tags "https://github.com/laynefox7/lfnote/blob/main/src/components/TagBar.tsx"
click node_arrows "https://github.com/laynefox7/lfnote/blob/main/src/arrows.tsx"
click node_authui "https://github.com/laynefox7/lfnote/blob/main/src/components/LoginScreen.tsx"
click node_adminui "https://github.com/laynefox7/lfnote/blob/main/src/components/AdminPanel.tsx"
click node_server "https://github.com/laynefox7/lfnote/blob/main/server/index.js"
click node_auth "https://github.com/laynefox7/lfnote/blob/main/server/auth.js"
click node_db "https://github.com/laynefox7/lfnote/blob/main/server/db/schema.sql"
click node_browserstore "https://github.com/laynefox7/lfnote/blob/main/src/api.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_api,node_user toneBlue
class node_calendar,node_gantt,node_listview,node_rowsview,node_donearea toneAmber
class node_taskrow,node_taskeditor,node_noteeditor,node_folders,node_tags,node_arrows,node_authui,node_adminui toneMint
class node_server,node_auth,node_pgquery toneRose
class node_db,node_browserstore toneIndigo
```

## Components

### Application shell

- [App coordinator](https://github.com/laynefox7/lfnote/blob/main/src/App.tsx): `src/App.tsx`
- [Client API](https://github.com/laynefox7/lfnote/blob/main/src/api.ts): `src/api.ts`

### Planning views

- [Calendar columns](https://github.com/laynefox7/lfnote/blob/main/src/components/DayColumn.tsx): `src/components/DayColumn.tsx`
- [Gantt planning](https://github.com/laynefox7/lfnote/blob/main/src/components/GanttView.tsx): `src/components/GanttView.tsx`
- [List view](https://github.com/laynefox7/lfnote/blob/main/src/components/ListView.tsx): `src/components/ListView.tsx`
- [Rows view](https://github.com/laynefox7/lfnote/blob/main/src/components/RowsView.tsx): `src/components/RowsView.tsx`
- [Completed tasks](https://github.com/laynefox7/lfnote/blob/main/src/components/DoneArea.tsx): `src/components/DoneArea.tsx`

### Editing and navigation

- [Task cards](https://github.com/laynefox7/lfnote/blob/main/src/components/TaskRow.tsx): `src/components/TaskRow.tsx`
- [Task editor](https://github.com/laynefox7/lfnote/blob/main/src/components/TaskEditor.tsx): `src/components/TaskEditor.tsx`
- [Note editor](https://github.com/laynefox7/lfnote/blob/main/src/components/NewNoteEditor.tsx): `src/components/NewNoteEditor.tsx`
- [Folder controls](https://github.com/laynefox7/lfnote/blob/main/src/components/FolderBar.tsx): `src/components/FolderBar.tsx`
- [Tag controls](https://github.com/laynefox7/lfnote/blob/main/src/components/TagBar.tsx): `src/components/TagBar.tsx`
- [Dependency links](https://github.com/laynefox7/lfnote/blob/main/src/arrows.tsx): `src/arrows.tsx`
- [Login screen](https://github.com/laynefox7/lfnote/blob/main/src/components/LoginScreen.tsx): `src/components/LoginScreen.tsx`
- [Admin panel](https://github.com/laynefox7/lfnote/blob/main/src/components/AdminPanel.tsx): `src/components/AdminPanel.tsx`

### Service layer

- [HTTP API](https://github.com/laynefox7/lfnote/blob/main/server/index.js): `server/index.js`
- [Session auth](https://github.com/laynefox7/lfnote/blob/main/server/auth.js): `server/auth.js`
- **Database queries**

### Persistence

- [Planner database](https://github.com/laynefox7/lfnote/blob/main/server/db/schema.sql): `server/db/schema.sql`
- [Browser storage](https://github.com/laynefox7/lfnote/blob/main/src/api.ts): `src/api.ts`

### Other components

- **Planner user**

## Connections

- Planner user → App coordinator: uses
- App coordinator → Client API: loads and saves
- App coordinator → Calendar columns: renders
- App coordinator → Gantt planning: renders
- App coordinator → List view: renders
- App coordinator → Rows view: renders
- App coordinator → Completed tasks: renders
- Calendar columns → Task cards: displays tasks
- Calendar columns → Task editor: edits tasks
- Calendar columns → Note editor: creates notes
- App coordinator → Folder controls: provides folder state
- App coordinator → Tag controls: provides tag state
- App coordinator → Dependency links: provides links
- Planner user → Login screen: signs in
- App coordinator → Login screen: renders
- App coordinator → Admin panel: renders
- Client API → HTTP API: requests
- HTTP API → Session auth: checks sessions
- HTTP API → Database queries: queries
- Session auth → Database queries: reads and writes
- Database queries → Planner database: reads and writes
- Client API → Browser storage: reads and writes