# agarwal222/todos architecture

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

- Interactive diagram: https://gitdiagram.com/agarwal222/todos
- Repository: https://github.com/agarwal222/todos

## Overview

Visido is an Electron desktop to-do app whose central workflow is managing tasks and visual settings, composing them into a wallpaper image, and applying it to the desktop. The graph also captures the documented quick-add, persistence, font, tray, and update capabilities. Some main-process handlers are not in the excerpts, so links for those documented features are limited to the supported IPC or module boundary.

Main entry points: [`renderer.js`](https://github.com/agarwal222/todos/blob/main/renderer.js) (Main UI), [`main.js`](https://github.com/agarwal222/todos/blob/main/main.js) (Electron Main), [`preload.js`](https://github.com/agarwal222/todos/blob/main/preload.js) (Preload Bridge), [`quick-add-renderer.js`](https://github.com/agarwal222/todos/blob/main/quick-add-renderer.js) (Quick Add UI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Task and Settings UI"]
  node_renderer["Main UI<br/>[renderer.js]"]
  node_quickui["Quick Add UI"]
end

subgraph group_runtime["Electron Runtime"]
  node_bridge["Preload Bridge<br/>[preload.js]"]
  node_main["Electron Main<br/>[main.js]"]
  node_tray["Tray and Shortcut<br/>[main.js]"]
end

subgraph group_wallpaper["Wallpaper and Fonts"]
  node_utils["Canvas Utilities<br/>[utils.js]"]
  node_fontcatalog["System Font Catalog<br/>[main.js]"]
  node_googlefonts["Google Font Loader<br/>[main.js]"]
  node_wallpaperapi["Wallpaper Setter<br/>[main.js]"]
end

subgraph group_persistence["Persistent Data"]
  node_state["Default State<br/>[state.js]"]
  node_taskstore[("Task and Settings Files<br/>[main.js]")]
  node_imagestore[("Background Image File<br/>[main.js]")]
end

node_user(("User"))
node_desktop["Desktop Wallpaper"]
node_google["Google Fonts"]
node_updater["Update Service"]

node_user -->|"manages tasks"| node_renderer
node_user -->|"adjusts visuals"| node_renderer
node_renderer -->|"requests state and actions"| node_bridge
node_bridge -->|"sends IPC"| node_main
node_main -->|"dispatches events"| node_bridge
node_bridge -->|"delivers events"| node_renderer
node_renderer -->|"loads and saves"| node_taskstore
node_main -->|"reads and writes"| node_taskstore
node_renderer -->|"uses defaults"| node_state
node_renderer -->|"composes preview image"| node_utils
node_renderer -->|"saves background image"| node_imagestore
node_renderer -->|"requests wallpaper update"| node_bridge
node_main -->|"sets wallpaper"| node_wallpaperapi
node_wallpaperapi -->|"updates"| node_desktop
node_user -->|"adds or manages tasks"| node_quickui
node_quickui -->|"sends task actions"| node_bridge
node_main -->|"registers shortcut"| node_tray
node_tray -->|"opens quick add"| node_main
node_main -->|"creates overlay"| node_quickui
node_main -->|"enumerates fonts"| node_fontcatalog
node_renderer -->|"requests system fonts"| node_bridge
node_renderer -->|"requests Google font"| node_bridge
node_main -->|"fetches font data"| node_googlefonts
node_googlefonts -.->|"downloads font resources"| node_google
node_renderer -->|"checks for updates"| node_bridge
node_main -.->|"checks update status"| node_updater

click node_renderer "https://github.com/agarwal222/todos/blob/main/renderer.js"
click node_quickui "https://github.com/agarwal222/todos/blob/main/quick-add-renderer.js"
click node_utils "https://github.com/agarwal222/todos/blob/main/utils.js"
click node_state "https://github.com/agarwal222/todos/blob/main/state.js"
click node_bridge "https://github.com/agarwal222/todos/blob/main/preload.js"
click node_main "https://github.com/agarwal222/todos/blob/main/main.js"
click node_taskstore "https://github.com/agarwal222/todos/blob/main/main.js"
click node_imagestore "https://github.com/agarwal222/todos/blob/main/main.js"
click node_tray "https://github.com/agarwal222/todos/blob/main/main.js"
click node_fontcatalog "https://github.com/agarwal222/todos/blob/main/main.js"
click node_googlefonts "https://github.com/agarwal222/todos/blob/main/main.js"
click node_wallpaperapi "https://github.com/agarwal222/todos/blob/main/main.js"

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_renderer,node_quickui,node_user toneBlue
class node_bridge,node_main,node_tray toneAmber
class node_utils,node_fontcatalog,node_googlefonts,node_wallpaperapi toneMint
class node_state,node_taskstore,node_imagestore toneRose
class node_desktop,node_google,node_updater toneIndigo
```

## Components

### Task and Settings UI

- [Main UI](https://github.com/agarwal222/todos/blob/main/renderer.js): `renderer.js`
- [Quick Add UI](https://github.com/agarwal222/todos/blob/main/quick-add-renderer.js): `quick-add-renderer.js`

### Electron Runtime

- [Preload Bridge](https://github.com/agarwal222/todos/blob/main/preload.js): `preload.js`
- [Electron Main](https://github.com/agarwal222/todos/blob/main/main.js): `main.js`
- [Tray and Shortcut](https://github.com/agarwal222/todos/blob/main/main.js): `main.js`

### Wallpaper and Fonts

- [Canvas Utilities](https://github.com/agarwal222/todos/blob/main/utils.js): `utils.js`
- [System Font Catalog](https://github.com/agarwal222/todos/blob/main/main.js): `main.js`
- [Google Font Loader](https://github.com/agarwal222/todos/blob/main/main.js): `main.js`
- [Wallpaper Setter](https://github.com/agarwal222/todos/blob/main/main.js): `main.js`

### Persistent Data

- [Default State](https://github.com/agarwal222/todos/blob/main/state.js): `state.js`
- [Task and Settings Files](https://github.com/agarwal222/todos/blob/main/main.js): `main.js`
- [Background Image File](https://github.com/agarwal222/todos/blob/main/main.js): `main.js`

### Other components

- **User**
- **Desktop Wallpaper**
- **Google Fonts**
- **Update Service**

## Connections

- User → Main UI: manages tasks
- User → Main UI: adjusts visuals
- Main UI → Preload Bridge: requests state and actions
- Preload Bridge → Electron Main: sends IPC
- Electron Main → Preload Bridge: dispatches events
- Preload Bridge → Main UI: delivers events
- Main UI → Task and Settings Files: loads and saves
- Electron Main → Task and Settings Files: reads and writes
- Main UI → Default State: uses defaults
- Main UI → Canvas Utilities: composes preview image
- Main UI → Background Image File: saves background image
- Main UI → Preload Bridge: requests wallpaper update
- Electron Main → Wallpaper Setter: sets wallpaper
- Wallpaper Setter → Desktop Wallpaper: updates
- User → Quick Add UI: adds or manages tasks
- Quick Add UI → Preload Bridge: sends task actions
- Electron Main → Tray and Shortcut: registers shortcut
- Tray and Shortcut → Electron Main: opens quick add
- Electron Main → Quick Add UI: creates overlay
- Electron Main → System Font Catalog: enumerates fonts
- Main UI → Preload Bridge: requests system fonts
- Main UI → Preload Bridge: requests Google font
- Electron Main → Google Font Loader: fetches font data
- Google Font Loader → Google Fonts: downloads font resources
- Main UI → Preload Bridge: checks for updates
- Electron Main → Update Service: checks update status