# legojeon/leethub-neo architecture

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

- Interactive diagram: https://gitdiagram.com/legojeon/leethub-neo
- Repository: https://github.com/legojeon/leethub-neo

## Overview

LeetHub-Neo is a Chrome extension that turns accepted LeetCode submissions into GitHub repository content, with a side panel for problem study and progress. The main workflow is solving on LeetCode, syncing accepted solutions and related metadata, then using the side panel for translations, scratchpad notes, topic notes, and reusable templates. README documents the product-level flows; sampled source confirms several side-panel and template responsibilities, but the sync internals and some wiring were not sampled, so those relationships are cited to the README.

Main entry points: [`src/js/sidepanel.js`](https://github.com/legojeon/leethub-neo/blob/main/src/js/sidepanel.js) (Topic Panel), [`src/js/leetcode.js`](https://github.com/legojeon/leethub-neo/blob/main/src/js/leetcode.js) (Submission Sync), [`src/features/sidepanel/scratchpad/scratchpad-controller.js`](https://github.com/legojeon/leethub-neo/blob/main/src/features/sidepanel/scratchpad/scratchpad-controller.js) (Scratchpad), [`src/js/popup.js`](https://github.com/legojeon/leethub-neo/blob/main/src/js/popup.js) (Extension UI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_sync["Submission Sync"]
  node_submission["Submission Sync<br/>[leetcode.js]"]
  node_history["Previous Sync<br/>[leetcode.js]"]
end

subgraph group_study["Study Panel"]
  node_sidepanel["Side Panel<br/>[sidepanel.js]"]
  node_description["Problem Description"]
  node_translation["Translation"]
  node_scratchpad["Scratchpad"]
  node_progress["Progress Dashboard"]
end

subgraph group_topics["Topics and Templates"]
  node_topic_panel["Topic Panel<br/>[sidepanel.js]"]
  node_topic_index["Topic Index"]
  node_topic_utils["Template Utilities"]
  node_topic_mappings["Topic Matching"]
  node_template_catalog["Bundled Templates"]
  node_code_highlight["Code Highlighting"]
end

subgraph group_identity["Accounts and Settings"]
  node_extension["Extension UI<br/>[popup.js]"]
  node_oauth["GitHub OAuth<br/>[authorize.js]"]
end

subgraph group_shared["Shared Data"]
  node_repo_layout["Repository Layout"]
  node_translation_settings["Translation Settings"]
  node_memo["Scratchpad Data<br/>[scratchpad-memo.js]"]
  node_topic_settings["Template Settings"]
  node_readme_templates["README Templates"]
end

node_user(("Solver"))
node_leetcode["LeetCode"]
node_github["GitHub"]

node_user -->|"solves on"| node_leetcode
node_leetcode -->|"accepted submission"| node_submission
node_submission -->|"syncs files"| node_github
node_user -->|"opens"| node_extension
node_extension -->|"authenticates"| node_oauth
node_oauth -->|"requests access"| node_github
node_user -->|"requests import"| node_history
node_history -->|"imports accepted"| node_github
node_submission -->|"uses file layout"| node_repo_layout
node_user -->|"opens panel"| node_sidepanel
node_sidepanel -->|"renders description"| node_description
node_sidepanel -->|"translates statement"| node_translation
node_sidepanel -->|"reads language"| node_translation_settings
node_user -->|"writes notes"| node_scratchpad
node_scratchpad -->|"normalizes and serializes"| node_memo
node_scratchpad -->|"syncs notes and sketches"| node_github
node_user -->|"reviews progress"| node_progress
node_user -->|"browses topics"| node_topic_panel
node_topic_panel -.->|"reads topic data"| node_topic_index
node_topic_panel -.->|"uses template utilities"| node_topic_utils
node_topic_panel -.->|"matches templates"| node_topic_mappings
node_topic_panel -->|"offers templates"| node_template_catalog
node_topic_panel -.->|"reads settings"| node_topic_settings
node_topic_panel -->|"highlights code"| node_code_highlight
node_topic_panel -->|"writes topic files"| node_github
node_submission -->|"updates root summary"| node_readme_templates

click node_extension "https://github.com/legojeon/leethub-neo/blob/main/src/js/popup.js"
click node_oauth "https://github.com/legojeon/leethub-neo/blob/main/src/js/authorize.js"
click node_submission "https://github.com/legojeon/leethub-neo/blob/main/src/js/leetcode.js"
click node_history "https://github.com/legojeon/leethub-neo/blob/main/src/js/leetcode.js"
click node_repo_layout "https://github.com/legojeon/leethub-neo/blob/main/src/core/config/repository-files.js"
click node_sidepanel "https://github.com/legojeon/leethub-neo/blob/main/src/js/sidepanel.js"
click node_description "https://github.com/legojeon/leethub-neo/blob/main/src/features/sidepanel/description/description-section-utils.js"
click node_translation "https://github.com/legojeon/leethub-neo/blob/main/src/features/sidepanel/description/description-translation.js"
click node_translation_settings "https://github.com/legojeon/leethub-neo/blob/main/src/features/shared/settings/translation-language-settings.js"
click node_scratchpad "https://github.com/legojeon/leethub-neo/blob/main/src/features/sidepanel/scratchpad/scratchpad-controller.js"
click node_memo "https://github.com/legojeon/leethub-neo/blob/main/src/core/scratchpad/scratchpad-memo.js"
click node_progress "https://github.com/legojeon/leethub-neo/blob/main/src/features/sidepanel/leethub/leethub-view-state.js"
click node_topic_panel "https://github.com/legojeon/leethub-neo/blob/main/src/js/sidepanel.js"
click node_topic_index "https://github.com/legojeon/leethub-neo/blob/main/src/js/topic-index-utils.js"
click node_topic_utils "https://github.com/legojeon/leethub-neo/blob/main/src/core/templates/topic-template-utils.js"
click node_topic_mappings "https://github.com/legojeon/leethub-neo/blob/main/src/data/topic-template-mappings.js"
click node_template_catalog "https://github.com/legojeon/leethub-neo/tree/main/src/templates/leetcode-cheatsheet"
click node_topic_settings "https://github.com/legojeon/leethub-neo/blob/main/src/features/shared/settings/topic-template-settings.js"
click node_code_highlight "https://github.com/legojeon/leethub-neo/blob/main/src/features/sidepanel/topics/topic-code-highlight.js"
click node_readme_templates "https://github.com/legojeon/leethub-neo/blob/main/src/core/templates/root-readme-template.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_submission,node_history toneBlue
class node_sidepanel,node_description,node_translation,node_scratchpad,node_progress toneAmber
class node_topic_panel,node_topic_index,node_topic_utils,node_topic_mappings,node_template_catalog,node_code_highlight toneMint
class node_extension,node_oauth toneRose
class node_repo_layout,node_translation_settings,node_memo,node_topic_settings,node_readme_templates,node_user,node_leetcode,node_github toneIndigo
```

## Components

### Submission Sync

- [Submission Sync](https://github.com/legojeon/leethub-neo/blob/main/src/js/leetcode.js): `src/js/leetcode.js`
- [Previous Sync](https://github.com/legojeon/leethub-neo/blob/main/src/js/leetcode.js): `src/js/leetcode.js`

### Study Panel

- [Side Panel](https://github.com/legojeon/leethub-neo/blob/main/src/js/sidepanel.js): `src/js/sidepanel.js`
- [Problem Description](https://github.com/legojeon/leethub-neo/blob/main/src/features/sidepanel/description/description-section-utils.js): `src/features/sidepanel/description/description-section-utils.js`
- [Translation](https://github.com/legojeon/leethub-neo/blob/main/src/features/sidepanel/description/description-translation.js): `src/features/sidepanel/description/description-translation.js`
- [Scratchpad](https://github.com/legojeon/leethub-neo/blob/main/src/features/sidepanel/scratchpad/scratchpad-controller.js): `src/features/sidepanel/scratchpad/scratchpad-controller.js`
- [Progress Dashboard](https://github.com/legojeon/leethub-neo/blob/main/src/features/sidepanel/leethub/leethub-view-state.js): `src/features/sidepanel/leethub/leethub-view-state.js`

### Topics and Templates

- [Topic Panel](https://github.com/legojeon/leethub-neo/blob/main/src/js/sidepanel.js): `src/js/sidepanel.js`
- [Topic Index](https://github.com/legojeon/leethub-neo/blob/main/src/js/topic-index-utils.js): `src/js/topic-index-utils.js`
- [Template Utilities](https://github.com/legojeon/leethub-neo/blob/main/src/core/templates/topic-template-utils.js): `src/core/templates/topic-template-utils.js`
- [Topic Matching](https://github.com/legojeon/leethub-neo/blob/main/src/data/topic-template-mappings.js): `src/data/topic-template-mappings.js`
- [Bundled Templates](https://github.com/legojeon/leethub-neo/tree/main/src/templates/leetcode-cheatsheet): `src/templates/leetcode-cheatsheet`
- [Code Highlighting](https://github.com/legojeon/leethub-neo/blob/main/src/features/sidepanel/topics/topic-code-highlight.js): `src/features/sidepanel/topics/topic-code-highlight.js`

### Accounts and Settings

- [Extension UI](https://github.com/legojeon/leethub-neo/blob/main/src/js/popup.js): `src/js/popup.js`
- [GitHub OAuth](https://github.com/legojeon/leethub-neo/blob/main/src/js/authorize.js): `src/js/authorize.js`

### Shared Data

- [Repository Layout](https://github.com/legojeon/leethub-neo/blob/main/src/core/config/repository-files.js): `src/core/config/repository-files.js`
- [Translation Settings](https://github.com/legojeon/leethub-neo/blob/main/src/features/shared/settings/translation-language-settings.js): `src/features/shared/settings/translation-language-settings.js`
- [Scratchpad Data](https://github.com/legojeon/leethub-neo/blob/main/src/core/scratchpad/scratchpad-memo.js): `src/core/scratchpad/scratchpad-memo.js`
- [Template Settings](https://github.com/legojeon/leethub-neo/blob/main/src/features/shared/settings/topic-template-settings.js): `src/features/shared/settings/topic-template-settings.js`
- [README Templates](https://github.com/legojeon/leethub-neo/blob/main/src/core/templates/root-readme-template.js): `src/core/templates/root-readme-template.js`

### Other components

- **Solver**
- **LeetCode**
- **GitHub**

## Connections

- Solver → LeetCode: solves on (evidence: `README.md`)
- LeetCode → Submission Sync: accepted submission (evidence: `README.md`)
- Submission Sync → GitHub: syncs files (evidence: `README.md`)
- Solver → Extension UI: opens (evidence: `README.md`)
- Extension UI → GitHub OAuth: authenticates (evidence: `README.md`)
- GitHub OAuth → GitHub: requests access (evidence: `src/js/authorize.js`)
- Solver → Previous Sync: requests import (evidence: `README.md`)
- Previous Sync → GitHub: imports accepted (evidence: `README.md`)
- Submission Sync → Repository Layout: uses file layout (evidence: `README.md`)
- Solver → Side Panel: opens panel (evidence: `README.md`)
- Side Panel → Problem Description: renders description (evidence: `src/js/sidepanel.js`)
- Side Panel → Translation: translates statement (evidence: `README.md`)
- Side Panel → Translation Settings: reads language (evidence: `README.md`)
- Solver → Scratchpad: writes notes (evidence: `README.md`)
- Scratchpad → Scratchpad Data: normalizes and serializes (evidence: `README.md`)
- Scratchpad → GitHub: syncs notes and sketches (evidence: `README.md`)
- Solver → Progress Dashboard: reviews progress (evidence: `README.md`)
- Solver → Topic Panel: browses topics (evidence: `README.md`)
- Topic Panel → Topic Index: reads topic data
- Topic Panel → Template Utilities: uses template utilities
- Topic Panel → Topic Matching: matches templates
- Topic Panel → Bundled Templates: offers templates (evidence: `README.md`)
- Topic Panel → Template Settings: reads settings
- Topic Panel → Code Highlighting: highlights code (evidence: `src/js/sidepanel.js`)
- Topic Panel → GitHub: writes topic files (evidence: `README.md`)
- Submission Sync → README Templates: updates root summary (evidence: `README.md`)