# kazi-aidah/emoticon-picker architecture

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

- Interactive diagram: https://gitdiagram.com/kazi-aidah/emoticon-picker
- Repository: https://github.com/kazi-aidah/emoticon-picker

## Overview

Emoticon Picker is an Obsidian plugin for finding and inserting emoticons into notes. Users open its picker from a command, hotkey, or ribbon icon; browse or search built-in and custom emoticons, then choose one for insertion. Favourites, hidden items, recents, and custom entries support repeat use and personalization. The sampled source shows modal rendering, search/sort helpers, settings, and state operations; exact wiring for insertion and launch triggers is not visible, so those links reflect the documented workflow rather than inspected call sites.

Main entry points: [`src/main.js`](https://github.com/kazi-aidah/emoticon-picker/blob/main/src/main.js) (Picker modal), [`src/emoticons.json`](https://github.com/kazi-aidah/emoticon-picker/blob/main/src/emoticons.json) (Built-in emoticons)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Plugin entry"]
  node_plugin["Plugin runtime<br/>[main.js]"]
end

subgraph group_picker["Picker experience"]
  node_picker["Picker modal<br/>[main.js]"]
  node_search["Search and sort<br/>[main.js]"]
  node_emoticons["Built-in emoticons<br/>[emoticons.json]"]
end

subgraph group_personalization["Personalization"]
  node_settings["Settings tab<br/>[main.js]"]
  node_plugin_data[("Plugin settings data")]
  node_favourites["Favourites<br/>[main.js]"]
  node_hidden["Hidden items<br/>[main.js]"]
  node_recents["Recent items<br/>[main.js]"]
  node_custom["Custom emoticons<br/>[main.js]"]
end

node_user(("Obsidian user"))
node_obsidian["Obsidian host"]
node_note["Active note"]

node_user -->|"opens picker"| node_obsidian
node_obsidian -->|"dispatches trigger"| node_plugin
node_plugin -->|"opens modal"| node_picker
node_plugin -->|"loads dataset"| node_emoticons
node_picker -->|"filters and sorts"| node_search
node_picker -->|"reads and updates"| node_favourites
node_picker -->|"reads and updates"| node_hidden
node_picker -->|"records selections"| node_recents
node_picker -->|"shows and deletes"| node_custom
node_user -->|"configures"| node_settings
node_settings -->|"updates settings"| node_plugin
node_plugin -->|"loads and saves"| node_plugin_data
node_favourites -->|"persists state"| node_plugin_data
node_hidden -->|"persists state"| node_plugin_data
node_recents -->|"persists state"| node_plugin_data
node_custom -->|"persists state"| node_plugin_data
node_picker -->|"inserts selection"| node_note

click node_plugin "https://github.com/kazi-aidah/emoticon-picker/blob/main/src/main.js"
click node_picker "https://github.com/kazi-aidah/emoticon-picker/blob/main/src/main.js"
click node_search "https://github.com/kazi-aidah/emoticon-picker/blob/main/src/main.js"
click node_emoticons "https://github.com/kazi-aidah/emoticon-picker/blob/main/src/emoticons.json"
click node_settings "https://github.com/kazi-aidah/emoticon-picker/blob/main/src/main.js"
click node_favourites "https://github.com/kazi-aidah/emoticon-picker/blob/main/src/main.js"
click node_hidden "https://github.com/kazi-aidah/emoticon-picker/blob/main/src/main.js"
click node_recents "https://github.com/kazi-aidah/emoticon-picker/blob/main/src/main.js"
click node_custom "https://github.com/kazi-aidah/emoticon-picker/blob/main/src/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_plugin,node_user toneBlue
class node_picker,node_search,node_emoticons toneAmber
class node_settings,node_plugin_data,node_favourites,node_hidden,node_recents,node_custom toneMint
class node_obsidian,node_note toneIndigo
```

## Components

### Plugin entry

- [Plugin runtime](https://github.com/kazi-aidah/emoticon-picker/blob/main/src/main.js): `src/main.js`

### Picker experience

- [Picker modal](https://github.com/kazi-aidah/emoticon-picker/blob/main/src/main.js): `src/main.js`
- [Search and sort](https://github.com/kazi-aidah/emoticon-picker/blob/main/src/main.js): `src/main.js`
- [Built-in emoticons](https://github.com/kazi-aidah/emoticon-picker/blob/main/src/emoticons.json): `src/emoticons.json`

### Personalization

- [Settings tab](https://github.com/kazi-aidah/emoticon-picker/blob/main/src/main.js): `src/main.js`
- **Plugin settings data**
- [Favourites](https://github.com/kazi-aidah/emoticon-picker/blob/main/src/main.js): `src/main.js`
- [Hidden items](https://github.com/kazi-aidah/emoticon-picker/blob/main/src/main.js): `src/main.js`
- [Recent items](https://github.com/kazi-aidah/emoticon-picker/blob/main/src/main.js): `src/main.js`
- [Custom emoticons](https://github.com/kazi-aidah/emoticon-picker/blob/main/src/main.js): `src/main.js`

### Other components

- **Obsidian user**
- **Obsidian host**
- **Active note**

## Connections

- Obsidian user → Obsidian host: opens picker
- Obsidian host → Plugin runtime: dispatches trigger
- Plugin runtime → Picker modal: opens modal
- Plugin runtime → Built-in emoticons: loads dataset
- Picker modal → Search and sort: filters and sorts
- Picker modal → Favourites: reads and updates
- Picker modal → Hidden items: reads and updates
- Picker modal → Recent items: records selections
- Picker modal → Custom emoticons: shows and deletes
- Obsidian user → Settings tab: configures
- Settings tab → Plugin runtime: updates settings
- Plugin runtime → Plugin settings data: loads and saves
- Favourites → Plugin settings data: persists state
- Hidden items → Plugin settings data: persists state
- Recent items → Plugin settings data: persists state
- Custom emoticons → Plugin settings data: persists state
- Picker modal → Active note: inserts selection