# deepender25/edge-drop architecture

> Architecture diagram of the GitHub repository deepender25/edge-drop, 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/deepender25/edge-drop
- Repository: https://github.com/deepender25/edge-drop

## Overview

Edge-Drop is a Windows Electron clipboard shelf: copied content is captured into persistent history, exposed through an edge-activated panel or hotkey, then pasted, previewed, searched, or dragged into other applications. The graph preserves the main capture, state, UI, and drag path alongside documented settings, onboarding, tray/update, and link-preview capabilities. Evidence is limited to the README and indexed source references plus the excerpts; several subsystem links are therefore documented or left unasserted.

Main entry points: [`electron/main/index.ts`](https://github.com/deepender25/edge-drop/blob/main/electron/main/index.ts) (Electron main), [`src/App.tsx`](https://github.com/deepender25/edge-drop/blob/main/src/App.tsx) (Renderer root), [`src/components/Panel.tsx`](https://github.com/deepender25/edge-drop/blob/main/src/components/Panel.tsx) (Shelf panel), [`electron/main/state.ts`](https://github.com/deepender25/edge-drop/blob/main/electron/main/state.ts) (Main state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_capture["Capture and history"]
  node_clipboard["Clipboard watcher"]
  node_formats["Clipboard formats<br/>[formats.ts]"]
  node_state["Main state<br/>[state.ts]"]
  node_items[("Item history<br/>[ItemStore.ts]")]
  node_settings[("Settings<br/>[settings.ts]")]
  node_paths["Data paths<br/>[paths.ts]"]
end

subgraph group_shell["Desktop shell"]
  node_main["Electron main<br/>[index.ts]"]
  node_window["Shelf window<br/>[window.ts]"]
  node_ipc["IPC handlers<br/>[ipc.ts]"]
  node_preload["Preload bridge<br/>[index.ts]"]
  node_drag["Native drag<br/>[drag.ts]"]
  node_staging["Drag staging<br/>[stagedTemp.ts]"]
end

subgraph group_renderer["Shelf experience"]
  node_app["Renderer root<br/>[App.tsx]"]
  node_store["UI state<br/>[appStore.ts]"]
  node_panel["Shelf panel<br/>[Panel.tsx]"]
  node_cards["Cards and menus<br/>[ClipboardItem.tsx]"]
  node_search["Shelf search<br/>[ShelfSearch.tsx]"]
  node_hover["Edge activation<br/>[useEdgeHover.ts]"]
  node_preview["Item preview<br/>[PreviewFlyout.tsx]"]
  node_filter["Item filtering"]
  node_dragout["Drag initiation<br/>[useDragOut.ts]"]
end

subgraph group_support["Product features"]
  node_onboarding["Welcome tour<br/>[tour.ts]"]
  node_settingsui["Settings UI<br/>[Settings.tsx]"]
  node_tray["Tray controls<br/>[tray.ts]"]
  node_updater["App updater<br/>[updater.ts]"]
  node_urlpreview["Offline link details<br/>[urlPreview.ts]"]
  node_linkcard["Link preview card"]
end

node_user(("User"))
node_actor(("Desktop apps"))

node_user -.->|"copies content"| node_clipboard
node_clipboard -.->|"decodes formats"| node_formats
node_state -->|"watches clipboard"| node_clipboard
node_state -->|"updates history"| node_items
node_state -->|"loads settings"| node_settings
node_items -->|"persists files"| node_paths
node_main -->|"loads state"| node_state
node_main -->|"starts window"| node_window
node_main -->|"registers handlers"| node_ipc
node_window -.->|"hosts renderer"| node_app
node_ipc -.->|"serves bridge calls"| node_preload
node_preload -->|"exposes actions"| node_store
node_app -->|"hydrates and subscribes"| node_store
node_app -->|"renders"| node_panel
node_app -->|"activates edge behavior"| node_hover
node_panel -.->|"shows items"| node_cards
node_panel -.->|"offers search"| node_search
node_panel -.->|"filters history"| node_filter
node_cards -.->|"opens preview"| node_preview
node_cards -.->|"starts drag"| node_dragout
node_dragout -->|"records drag request"| node_store
node_dragout -->|"sends drag request"| node_preload
node_drag -->|"stages payloads"| node_staging
node_drag -.->|"drags into apps"| node_actor
node_settingsui -.->|"updates preferences"| node_store
node_tray -.->|"controls app"| node_main
node_main -.->|"launches tour"| node_onboarding
node_main -.->|"manages updates"| node_updater
node_linkcard -->|"parses link locally"| node_urlpreview

click node_clipboard "https://github.com/deepender25/edge-drop/blob/main/electron/clipboard/ClipboardWatcher.ts"
click node_formats "https://github.com/deepender25/edge-drop/blob/main/electron/clipboard/formats.ts"
click node_state "https://github.com/deepender25/edge-drop/blob/main/electron/main/state.ts"
click node_items "https://github.com/deepender25/edge-drop/blob/main/electron/store/ItemStore.ts"
click node_settings "https://github.com/deepender25/edge-drop/blob/main/electron/store/settings.ts"
click node_paths "https://github.com/deepender25/edge-drop/blob/main/electron/store/paths.ts"
click node_main "https://github.com/deepender25/edge-drop/blob/main/electron/main/index.ts"
click node_window "https://github.com/deepender25/edge-drop/blob/main/electron/main/window.ts"
click node_ipc "https://github.com/deepender25/edge-drop/blob/main/electron/main/ipc.ts"
click node_preload "https://github.com/deepender25/edge-drop/blob/main/electron/preload/index.ts"
click node_app "https://github.com/deepender25/edge-drop/blob/main/src/App.tsx"
click node_store "https://github.com/deepender25/edge-drop/blob/main/src/store/appStore.ts"
click node_panel "https://github.com/deepender25/edge-drop/blob/main/src/components/Panel.tsx"
click node_cards "https://github.com/deepender25/edge-drop/blob/main/src/components/ClipboardItem.tsx"
click node_search "https://github.com/deepender25/edge-drop/blob/main/src/components/ShelfSearch.tsx"
click node_hover "https://github.com/deepender25/edge-drop/blob/main/src/hooks/useEdgeHover.ts"
click node_preview "https://github.com/deepender25/edge-drop/blob/main/src/components/PreviewFlyout.tsx"
click node_filter "https://github.com/deepender25/edge-drop/blob/main/src/hooks/useFilteredItems.ts"
click node_dragout "https://github.com/deepender25/edge-drop/blob/main/src/hooks/useDragOut.ts"
click node_drag "https://github.com/deepender25/edge-drop/blob/main/electron/main/drag.ts"
click node_staging "https://github.com/deepender25/edge-drop/blob/main/electron/main/stagedTemp.ts"
click node_onboarding "https://github.com/deepender25/edge-drop/blob/main/src/onboarding/tour.ts"
click node_settingsui "https://github.com/deepender25/edge-drop/blob/main/src/components/Settings.tsx"
click node_tray "https://github.com/deepender25/edge-drop/blob/main/electron/main/tray.ts"
click node_updater "https://github.com/deepender25/edge-drop/blob/main/electron/main/updater.ts"
click node_urlpreview "https://github.com/deepender25/edge-drop/blob/main/src/lib/urlPreview.ts"
click node_linkcard "https://github.com/deepender25/edge-drop/blob/main/src/components/LinkPreviewCard.tsx"

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_clipboard,node_formats,node_state,node_items,node_settings,node_paths,node_user toneBlue
class node_main,node_window,node_ipc,node_preload,node_drag,node_staging toneAmber
class node_app,node_store,node_panel,node_cards,node_search,node_hover,node_preview,node_filter,node_dragout toneMint
class node_onboarding,node_settingsui,node_tray,node_updater,node_urlpreview,node_linkcard toneRose
class node_actor toneIndigo
```

## Components

### Capture and history

- [Clipboard watcher](https://github.com/deepender25/edge-drop/blob/main/electron/clipboard/ClipboardWatcher.ts): `electron/clipboard/ClipboardWatcher.ts`
- [Clipboard formats](https://github.com/deepender25/edge-drop/blob/main/electron/clipboard/formats.ts): `electron/clipboard/formats.ts`
- [Main state](https://github.com/deepender25/edge-drop/blob/main/electron/main/state.ts): `electron/main/state.ts`
- [Item history](https://github.com/deepender25/edge-drop/blob/main/electron/store/ItemStore.ts): `electron/store/ItemStore.ts`
- [Settings](https://github.com/deepender25/edge-drop/blob/main/electron/store/settings.ts): `electron/store/settings.ts`
- [Data paths](https://github.com/deepender25/edge-drop/blob/main/electron/store/paths.ts): `electron/store/paths.ts`

### Desktop shell

- [Electron main](https://github.com/deepender25/edge-drop/blob/main/electron/main/index.ts): `electron/main/index.ts`
- [Shelf window](https://github.com/deepender25/edge-drop/blob/main/electron/main/window.ts): `electron/main/window.ts`
- [IPC handlers](https://github.com/deepender25/edge-drop/blob/main/electron/main/ipc.ts): `electron/main/ipc.ts`
- [Preload bridge](https://github.com/deepender25/edge-drop/blob/main/electron/preload/index.ts): `electron/preload/index.ts`
- [Native drag](https://github.com/deepender25/edge-drop/blob/main/electron/main/drag.ts): `electron/main/drag.ts`
- [Drag staging](https://github.com/deepender25/edge-drop/blob/main/electron/main/stagedTemp.ts): `electron/main/stagedTemp.ts`

### Shelf experience

- [Renderer root](https://github.com/deepender25/edge-drop/blob/main/src/App.tsx): `src/App.tsx`
- [UI state](https://github.com/deepender25/edge-drop/blob/main/src/store/appStore.ts): `src/store/appStore.ts`
- [Shelf panel](https://github.com/deepender25/edge-drop/blob/main/src/components/Panel.tsx): `src/components/Panel.tsx`
- [Cards and menus](https://github.com/deepender25/edge-drop/blob/main/src/components/ClipboardItem.tsx): `src/components/ClipboardItem.tsx`
- [Shelf search](https://github.com/deepender25/edge-drop/blob/main/src/components/ShelfSearch.tsx): `src/components/ShelfSearch.tsx`
- [Edge activation](https://github.com/deepender25/edge-drop/blob/main/src/hooks/useEdgeHover.ts): `src/hooks/useEdgeHover.ts`
- [Item preview](https://github.com/deepender25/edge-drop/blob/main/src/components/PreviewFlyout.tsx): `src/components/PreviewFlyout.tsx`
- [Item filtering](https://github.com/deepender25/edge-drop/blob/main/src/hooks/useFilteredItems.ts): `src/hooks/useFilteredItems.ts`
- [Drag initiation](https://github.com/deepender25/edge-drop/blob/main/src/hooks/useDragOut.ts): `src/hooks/useDragOut.ts`

### Product features

- [Welcome tour](https://github.com/deepender25/edge-drop/blob/main/src/onboarding/tour.ts): `src/onboarding/tour.ts`
- [Settings UI](https://github.com/deepender25/edge-drop/blob/main/src/components/Settings.tsx): `src/components/Settings.tsx`
- [Tray controls](https://github.com/deepender25/edge-drop/blob/main/electron/main/tray.ts): `electron/main/tray.ts`
- [App updater](https://github.com/deepender25/edge-drop/blob/main/electron/main/updater.ts): `electron/main/updater.ts`
- [Offline link details](https://github.com/deepender25/edge-drop/blob/main/src/lib/urlPreview.ts): `src/lib/urlPreview.ts`
- [Link preview card](https://github.com/deepender25/edge-drop/blob/main/src/components/LinkPreviewCard.tsx): `src/components/LinkPreviewCard.tsx`

### Other components

- **User**
- **Desktop apps**

## Connections

- User → Clipboard watcher: copies content (evidence: `README.md`)
- Clipboard watcher → Clipboard formats: decodes formats
- Main state → Clipboard watcher: watches clipboard (evidence: `electron/main/state.ts`)
- Main state → Item history: updates history (evidence: `electron/main/state.ts`)
- Main state → Settings: loads settings (evidence: `electron/main/state.ts`)
- Item history → Data paths: persists files (evidence: `electron/store/ItemStore.ts`)
- Electron main → Main state: loads state (evidence: `electron/main/index.ts`)
- Electron main → Shelf window: starts window (evidence: `electron/main/index.ts`)
- Electron main → IPC handlers: registers handlers (evidence: `electron/main/index.ts`)
- Shelf window → Renderer root: hosts renderer
- IPC handlers → Preload bridge: serves bridge calls
- Preload bridge → UI state: exposes actions (evidence: `electron/preload/index.ts`)
- Renderer root → UI state: hydrates and subscribes (evidence: `src/App.tsx`)
- Renderer root → Shelf panel: renders (evidence: `src/App.tsx`)
- Renderer root → Edge activation: activates edge behavior (evidence: `src/App.tsx`)
- Shelf panel → Cards and menus: shows items
- Shelf panel → Shelf search: offers search
- Shelf panel → Item filtering: filters history
- Cards and menus → Item preview: opens preview
- Cards and menus → Drag initiation: starts drag
- Drag initiation → UI state: records drag request (evidence: `src/hooks/useDragOut.ts`)
- Drag initiation → Preload bridge: sends drag request (evidence: `src/hooks/useDragOut.ts`)
- Native drag → Drag staging: stages payloads (evidence: `electron/main/drag.ts`)
- Native drag → Desktop apps: drags into apps
- Settings UI → UI state: updates preferences
- Tray controls → Electron main: controls app (evidence: `electron/main/index.ts`)
- Electron main → Welcome tour: launches tour
- Electron main → App updater: manages updates (evidence: `electron/main/index.ts`)
- Link preview card → Offline link details: parses link locally (evidence: `src/components/LinkPreviewCard.tsx`)