ICQ

KO | EN

gitlite — search

#react-native #open-source #github #animation #css #monitoring #swift #postgresql #chatgpt #rust

(★ 9)

Retrogram - ICQ Remastered based on whatsapp/telegram

파일 탐색기

ZIP 다운로드

- launch.json
- - ci.yml
  - release.yml
- FUNDING.yml
- premium-konzept.md
- stand-marketing.md
- smoke.spec.js
- - ack.js
  - ack.test.js
  - chat-entry.js
  - chat-entry.test.js
  - contact-names.js
  - contact-names.test.js
  - data-dir.js
  - data-dir.test.js
  - fake-baileys.js
  - message-entry.js
  - message-entry.test.js
  - wa-store.js
  - wa-store.test.js
- main.js
- preload.js
- telegram-bridge.js
- whatsapp-bridge.js
- whatsapp-bridge.test.js
- - landscape-1600x900.png
  - landscape-1600x900.svg
  - og-1200x630.png
  - og-1200x630.svg
  - portrait-1080x1920.png
  - portrait-1080x1920.svg
  - README.md
  - square-1080x1080.png
  - square-1080x1080.svg
- hero-en.svg
- hero.html
- reddit-kit.md
- pitch-mail.md
- - icq-message.mp3
  - Startup.wav
- - Square150x150Logo.png
  - Square310x310Logo.png
  - Square44x44Logo.png
  - StoreLogo.png
  - Wide310x150Logo.png
- Chatwindow.png
- Contacts.png
- icon.icns
- icon.ico
- icon.png
- icon.svg
- icq-logo.png
- index.html
- telegram-logo.svg
- whatsapp-logo.svg
- check-electron.js
- make-icon.js
- rasterize-social.js
- set-site-url.js
- - contacts.png
- icq-logo.png
- icq-message.mp3
- index.html
- og.png
- privacy.html
- reel.css
- reel.html
- reel.js
- robots.txt
- sitemap.xml
- - ChatWindow.css
  - ChatWindow.js
  - Icon.js
  - LoginPanel.css
  - LoginPanel.js
  - Sidebar.css
  - Sidebar.js
  - TitleBar.css
  - TitleBar.js
- App.css
- App.js
- ChatApp.js
- chatOrder.js
- chatOrder.test.js
- index.css
- index.js
- skins.js
- skins.test.js
- themes.css
.eslintrc.json
.gitattributes
.gitignore
AGENTS.md
CLAUDE.md
Featurefile.md
Howtotest.md
jest.electron.config.js
netlify.toml
package-lock.json
package.json
playwright.config.js
README.md
RELEASE_NOTES_v1.0.25.md
TESTING.md

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
  <img src="public/icq-logo.png" width="88" alt="ICQ Logo" />
  <h1>Retrogram - Multi Messenger</h1> 
  <p>
    Retro <strong>ICQ 5</strong>-style multi-messenger — built with <strong>Electron + React</strong>.<br/>
    Manage <strong>WhatsApp</strong> and <strong>Telegram</strong> from one classic dark-teal desktop app.
  </p>

[![Watch Live](https://img.shields.io/badge/▶_Watch_Live-YouTube-red?style=flat-square&logo=youtube)](https://www.youtube.com/@TheEfficientDev)
  [![Portfolio](https://img.shields.io/badge/Portfolio-felix--helleckes.github.io-0a66c2?style=flat-square&logo=github)](https://felix-helleckes.github.io/)

> *QR Code Login screens — no personal data shown. Once connected, the sidebar fills with your contacts sorted by recency.*

---

## Features

| | Feature | Details |
|--|---------|---------|
| 🎨 | **ICQ 5 dark teal skin** | CSS variables, `rem`-based sizing, A−/A+ font controls |
| 💬 | **WhatsApp** | QR login · persistent session · images · videos · GIFs · stickers · read receipts |
| ✈️ | **Telegram** | QR or phone number login · 2FA · photos · videos · GIFs · animated stickers |
| 🪟 | **Separate chat windows** | Each contact gets its own floating window — true ICQ 5 style |
| 🗂️ | **Collapsible groups** | Groups folded away at top · per-service group sound toggle |
| 🖼️ | **Profile pictures** | Background-loaded for contacts + your own profile in the header |
| 🔔 | **Classic ICQ sound** | Global 🔔/🔕 toggle + separate group sound control per service |
| ✓✓ | **Read receipts** | WhatsApp ack states: pending · sent · delivered · read (blue ✓✓) |
| ⌨️ | **Typing indicator** | Animated *tippt…* shown live in the chat header |
| 🔍 | **Media lightbox** | Click any image or video to view fullscreen |
| 🔄 | **Live contact list** | Unread badges · last message preview · auto-sort by recency |
| 📦 | **Portable build** | Single `.exe` — no installation required |
| 🛫 | **File Transfer** | Drag and Drop and File Dialog Window included|
| 🎮 | **Games** | Slide a Lama and Pool included for free|

**Windows — SmartScreen:** Click **"More info"** → **"Run anyway"**

**macOS — Gatekeeper:** Right-click the `.app` → **"Open"** → **"Open"**

Or in Terminal:  `xattr -cr /Applications/ICQ\ Messenger.app`
---

# Quick Start

### Requirements

- **Node.js** 18+ (LTS)
- **npm** 9+
- Windows, macOS, or Linux

> No browser is bundled any more - WhatsApp speaks its protocol directly, so it needs no extra Linux runtime deps.

### Install & run

```bash
git clone https://github.com/felix-helleckes/ICQ.git
cd ICQ
npm install
npm start
```

`npm start` launches the React dev server and Electron simultaneously.

---

## Login

### WhatsApp
1. Switch to the **WhatsApp** tab
2. Wait a moment — the WhatsApp connection is established
3. Scan the QR code with your phone → **WhatsApp → Linked Devices → Link a Device**
4. Done — session is saved and survives restarts

### Telegram
1. Switch to the **Telegram** tab
2. Choose **QR code** (scan with Telegram mobile) **or** enter your **phone number**
3. Enter the code sent to your phone (+ 2FA password if enabled)
4. Done — session stored in `data/telegram.session`

> No API keys or developer accounts needed for either service.

---

## Build

npm run build

```bash
# Windows — NSIS installer + Portable
npx electron-builder --win nsis portable

# macOS — DMG (unsigned)
npx electron-builder --mac dmg

# Linux — AppImage + .deb
npx electron-builder --linux AppImage deb
```

Output goes to the `dist/` folder.

---

## Project Structure

```
├── electron/
│   ├── main.js              # Main process · IPC handlers · multi-window management
│   ├── preload.js           # contextBridge — exposes window.api to React
│   ├── whatsapp-bridge.js   # WhatsApp via Baileys (protocol, no browser)
│   └── telegram-bridge.js   # Telegram MTProto via GramJS
├── src/
│   ├── App.js               # Sidebar / contact list window
│   ├── ChatApp.js           # Per-contact chat window
│   ├── index.css            # Global ICQ 5 styles + CSS variables
│   └── components/
│       ├── TitleBar.js      # Frameless title bar (minimize / maximize / close)
│       ├── Sidebar.js       # Service tabs · contact list · groups · sound controls
│       ├── ChatWindow.js    # Messages · emoji picker · media · lightbox · read receipts
│       └── LoginPanel.js    # QR + phone login for both services
├── public/
│   ├── icq-logo.png         # ICQ logo (app icon source)
│   ├── whatsapp-logo.svg    # WhatsApp logo (service tab)
│   ├── telegram-logo.svg    # Telegram logo (service tab)
│   ├── icon.ico             # Generated Windows app icon
│   └── sounds/
│       └── icq-message.mp3  # Classic ICQ notification sound
└── package.json
```

---

## Architecture Notes

- **Multi-window** — each chat is a separate `BrowserWindow`, tracked in a `Map` and reused on re-open
- **Broadcast pattern** — `BrowserWindow.getAllWindows().forEach(w => w.webContents.send(...))` keeps sidebar + chat windows in sync instantly
- **Avatar cache** — avatars cached in main process (`Map`), pushed via `wa:avatar` / `tg:avatar` events, no re-fetching
- **Non-blocking contact list** — `getChats()` / `getDialogs()` return immediately; avatars load in background loops
- **IPC cleanup** — every listener returns a removal function used in `useEffect` — no memory leaks
- **Font scaling** — `html { font-size }` set at runtime, all UI sizes in `rem`
- **BigInt peer IDs** — Telegram IDs converted to `BigInt` before every GramJS API call to prevent silent lookup failures

---

## Support

ICQ Retrogram is free and stays free. If you want to chip in, there is a concrete
thing the money goes to first:

**A code-signing certificate — roughly `[BETRAG EINTRAGEN]` per year.**

Right now every Windows download triggers a SmartScreen warning, and every macOS
launch needs a right-click, because the builds are unsigned. That warning is the
single biggest reason people close the page instead of trying the app. A
certificate removes it.

[![Sponsor](https://img.shields.io/badge/Sponsor-PayPal-ff7a98?style=flat-square)](https://paypal.me/sparky512)

Nothing is gated behind it. There is no paid version, no pro tier, and no plan to
add one — see [`docs/premium-konzept.md`](docs/premium-konzept.md) for why.

ICQ

파일 탐색기

# CDN으로 사용하기

Was this content helpful?

Recent Feedback

Download README