Initial release
This commit is contained in:
ThePeGaSuS
@@ -0,0 +1,167 @@
|
||||
# Cathode
|
||||
|
||||
A terminal-style web client for [WeeChat](https://weechat.org/), using the
|
||||
modern **API relay protocol** (WeeChat ≥ 4.0). No build step. No framework.
|
||||
Drop three files on a web server and go.
|
||||
|
||||
> Inspired by [Glowing Bear](https://github.com/glowing-bear/glowing-bear).
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
- Real-time IRC via WeeChat's JSON/WebSocket relay API
|
||||
- Terminal aesthetic — white on black (default) and black on white, togglable
|
||||
- Buffer list, nicklist, message history, input with command history (↑/↓)
|
||||
- ANSI colour rendering, URL linkification
|
||||
- Warns on browser-blocked ports before you try to connect
|
||||
- Self-signed cert helper (opens relay URL in a new tab to accept the warning)
|
||||
- Zero dependencies, zero build step — plain HTML/CSS/ES-module JS
|
||||
|
||||
---
|
||||
|
||||
## Requirements
|
||||
|
||||
- **WeeChat ≥ 4.0** with the relay plugin enabled and the **api** protocol configured
|
||||
- A web server to serve the three static files (nginx, Caddy, Apache, or even
|
||||
`python3 -m http.server`)
|
||||
- A domain + TLS cert for production use (certbot/Let's Encrypt recommended)
|
||||
|
||||
---
|
||||
|
||||
## WeeChat relay setup
|
||||
|
||||
```
|
||||
# Inside WeeChat:
|
||||
|
||||
# Load the relay plugin if not already loaded
|
||||
/plugin load relay
|
||||
|
||||
# Set a relay password (required)
|
||||
/set relay.network.password "your_strong_password_here"
|
||||
|
||||
# Create the API relay listener on port 9000
|
||||
# Do NOT use port 6667/6697 — those are blocked by browsers
|
||||
/relay add api 9000
|
||||
|
||||
# For TLS (recommended for non-localhost):
|
||||
/relay add tls.api 9000
|
||||
|
||||
# Verify it's listening:
|
||||
/relay listport
|
||||
```
|
||||
|
||||
> **Port note:** Ports 6665–6669 and 6697 (the traditional IRC port range)
|
||||
> are blocked by all major browsers. Use any other port — 9000 is a safe
|
||||
> default.
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
### 1. Copy the files
|
||||
|
||||
```bash
|
||||
# Clone or download, then copy to your web root:
|
||||
cp index.html app.js style.css /var/www/cathode/
|
||||
|
||||
# Or serve from the repo directly for development:
|
||||
python3 -m http.server 8080
|
||||
```
|
||||
|
||||
### 2. Set up a reverse proxy (recommended)
|
||||
|
||||
For production you'll want a reverse proxy to handle TLS and serve both the
|
||||
static files and the WeeChat relay API under the same origin — this avoids
|
||||
mixed-content issues and makes self-signed certs unnecessary.
|
||||
|
||||
See the `proxy/` directory for ready-to-use configs:
|
||||
|
||||
| Server | File |
|
||||
|--------|------|
|
||||
| Caddy | `proxy/Caddyfile` |
|
||||
| nginx | `proxy/nginx.conf` |
|
||||
| Apache | `proxy/apache.conf` |
|
||||
|
||||
All three configs follow the same pattern:
|
||||
- Serve static files at `/`
|
||||
- Proxy `/api*` to `localhost:9000` (your WeeChat relay port)
|
||||
- Handle WebSocket upgrade headers
|
||||
|
||||
### 3. Open in browser
|
||||
|
||||
Navigate to your domain. Enter the WeeChat relay host/port and password.
|
||||
If you're using the reverse proxy setup, the host is your domain and the
|
||||
port is 443 — the proxy forwards `/api` internally.
|
||||
|
||||
---
|
||||
|
||||
## Self-signed certificates
|
||||
|
||||
If you can't use Let's Encrypt (no domain, air-gapped, LAN-only), you can
|
||||
still use TLS with a self-signed cert on the WeeChat relay. The browser will
|
||||
refuse the WebSocket connection until you accept the cert exception:
|
||||
|
||||
1. Enter your host and port in Cathode's connect screen
|
||||
2. Click the **⚠ CERT** button — this opens `https://host:port/api/version`
|
||||
in a new tab
|
||||
3. Accept the browser's security warning in that tab
|
||||
4. Return to Cathode and click **CONNECT**
|
||||
|
||||
The exception is remembered by the browser for subsequent sessions.
|
||||
|
||||
---
|
||||
|
||||
## LAN / local use (no TLS)
|
||||
|
||||
If you're connecting from the same machine or a trusted LAN, you can skip TLS:
|
||||
|
||||
- In WeeChat: `/relay add api 9000` (without `tls.`)
|
||||
- In Cathode: uncheck **USE TLS** before connecting
|
||||
- Serve Cathode itself over plain HTTP too (or `file://` directly)
|
||||
|
||||
Note: `ws://` from an `https://` page is blocked by browsers (mixed content).
|
||||
Either serve Cathode over plain HTTP as well, or use the reverse proxy approach.
|
||||
|
||||
---
|
||||
|
||||
## Directory structure
|
||||
|
||||
```
|
||||
cathode/
|
||||
├── index.html — app shell
|
||||
├── app.js — all client logic (ES module, no build step)
|
||||
├── style.css — terminal theme, dark + light
|
||||
├── proxy/
|
||||
│ ├── Caddyfile — Caddy reverse proxy config
|
||||
│ ├── nginx.conf — nginx reverse proxy config
|
||||
│ └── apache.conf — Apache reverse proxy config
|
||||
└── README.md
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## How it works
|
||||
|
||||
Cathode uses WeeChat's **API relay protocol** — a clean JSON-over-WebSocket
|
||||
protocol introduced in WeeChat 4.0, replacing the old binary `weechat` relay
|
||||
protocol that Glowing Bear was built on.
|
||||
|
||||
On connect, Cathode:
|
||||
1. Opens a WebSocket to `wss://host:port/api` with the password encoded in
|
||||
the `Sec-WebSocket-Protocol` header (the only header the browser WebSocket
|
||||
API allows you to set)
|
||||
2. Sends a batched request: fetch all buffers with last 200 lines and nicks,
|
||||
then subscribe to real-time events
|
||||
3. Listens for push events (`buffer_line_added`, `buffer_opened`,
|
||||
`nicklist_nick_added`, etc.) and updates the UI accordingly
|
||||
|
||||
---
|
||||
|
||||
## License
|
||||
|
||||
GPL-3.0 — same as WeeChat and Glowing Bear.
|
||||
|
||||
---
|
||||
|
||||
*Cathode — Inspired by [Glowing Bear](https://github.com/glowing-bear/glowing-bear)*
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Cathode — operator configuration
|
||||
*
|
||||
* This file is loaded before app.js. Set properties on window.CATHODE_CONFIG
|
||||
* to configure your deployment. All properties are optional — omit anything
|
||||
* you don't need.
|
||||
*
|
||||
* For a self-hosted personal instance, fill this in once and forget it.
|
||||
* For a shared/public instance, set the upload backend here so users don't
|
||||
* need to configure it themselves (and can't change it).
|
||||
*/
|
||||
|
||||
window.CATHODE_CONFIG = {
|
||||
|
||||
// ── Notifications ─────────────────────────────────────────────────────────
|
||||
// The relay API doesn't expose WeeChat's per-buffer notify setting, so
|
||||
// Cathode can't read it directly. Use these flags as a workaround.
|
||||
//
|
||||
// notifyServerBuffers: false — suppress notifications from IRC server buffers
|
||||
// (type=server). Set to false if your server buffers are set to
|
||||
// "notify none" in WeeChat. Default: true (don't suppress).
|
||||
notifyServerBuffers: false,
|
||||
|
||||
// ── Upload backend ────────────────────────────────────────────────────────
|
||||
// 'none' — disable file upload entirely (default)
|
||||
// 'filehost' — single_php_filehost (https://github.com/Rouji/single_php_filehost)
|
||||
// 'imgur' — Imgur API (requires a Client ID from https://api.imgur.com/oauth2/addclient)
|
||||
uploadBackend: 'none',
|
||||
filehostUrl: '', // e.g. 'https://files.example.com/' (filehost only)
|
||||
imgurClientId: '', // e.g. 'abc123def456' (imgur only)
|
||||
|
||||
// ── Prefix align max ──────────────────────────────────────────────────────
|
||||
// Mirrors weechat.look.prefix_align_max — truncates long nicks in the
|
||||
// message column. Set to match your WeeChat config. Default: 16.
|
||||
prefixAlignMax: 16,
|
||||
|
||||
};
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
+195
@@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Cathode — a terminal-style web client for WeeChat">
|
||||
<link rel="icon" href="favicon.ico" sizes="32x32 16x16" type="image/x-icon">
|
||||
<link rel="apple-touch-icon" href="apple-touch-icon.png">
|
||||
<title>Cathode</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<!-- Emoji picker Web Component — loaded from CDN, no build step needed -->
|
||||
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@1/index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app">
|
||||
|
||||
<!-- ── Top bar ─────────────────────────────────────────────────────────── -->
|
||||
<div id="topbar">
|
||||
<span class="logo">CATHODE<span>/irc</span></span>
|
||||
<div class="status-pill">
|
||||
<div id="status-dot" class="status-dot disconnected"></div>
|
||||
<span id="status-text">DISCONNECTED</span>
|
||||
</div>
|
||||
<div class="topbar-spacer"></div>
|
||||
<button id="settings-btn" class="topbar-btn">⚙ SETTINGS</button>
|
||||
<button id="theme-toggle" class="topbar-btn">◐ LIGHT</button>
|
||||
<button id="disconnect-btn" class="topbar-btn" style="display:none">⏻ QUIT</button>
|
||||
</div>
|
||||
|
||||
<!-- ── Connect screen ──────────────────────────────────────────────────── -->
|
||||
<div id="connect-screen">
|
||||
|
||||
<!-- Shown only when served over HTTPS — ws:// is blocked in that context -->
|
||||
<div id="http-notice" style="display:none">
|
||||
<span class="http-notice-text">
|
||||
⚠ This page is served over <strong>HTTPS</strong> — only <strong>wss://</strong> relays are reachable.
|
||||
Make sure your WeeChat relay is accessible over TLS.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="connect-box">
|
||||
<div class="connect-box-header">WEECHAT RELAY — API PROTOCOL</div>
|
||||
<div class="connect-box-body">
|
||||
|
||||
<div class="field-row">
|
||||
<div class="field">
|
||||
<label for="host">HOST</label>
|
||||
<input id="host" type="text" placeholder="irc.example.com" autocomplete="off" spellcheck="false">
|
||||
</div>
|
||||
<div class="field short">
|
||||
<label for="port">PORT</label>
|
||||
<input id="port" type="number" value="9000" min="1" max="65535">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="port-warning"></div>
|
||||
|
||||
<div class="field">
|
||||
<label for="password">RELAY PASSWORD</label>
|
||||
<input id="password" type="password" placeholder="••••••••" autocomplete="current-password">
|
||||
</div>
|
||||
|
||||
<label class="checkbox-row">
|
||||
<input id="tls" type="checkbox" checked>
|
||||
USE TLS (wss://)
|
||||
<span id="tls-locked-note" style="display:none"> — required on HTTPS pages</span>
|
||||
</label>
|
||||
|
||||
<div id="conn-error"></div>
|
||||
|
||||
<div class="connect-actions">
|
||||
<button id="connect-btn" class="btn-primary">CONNECT</button>
|
||||
<button id="cert-btn" class="btn-secondary">⚠ CERT</button>
|
||||
</div>
|
||||
|
||||
<p class="cert-hint">
|
||||
Using a self-signed cert? Click ⚠ CERT to open the relay URL in a new
|
||||
tab, accept the browser warning, then return here and connect.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Chat screen ─────────────────────────────────────────────────────── -->
|
||||
<div id="chat-screen" style="display:none">
|
||||
|
||||
<!-- Buffer sidebar -->
|
||||
<div id="sidebar">
|
||||
<div id="sidebar-header">BUFFERS</div>
|
||||
<div id="buffer-list"></div>
|
||||
<div id="sidebar-footer">
|
||||
<button id="sidebar-join-btn" class="sidebar-footer-btn">＋ JOIN</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main area -->
|
||||
<div id="main">
|
||||
<div id="chat-header">
|
||||
<span id="chat-title"></span>
|
||||
<span id="chat-topic"></span>
|
||||
<button id="smartfilter-btn" class="header-btn" style="display:none">FILTER: ON</button>
|
||||
</div>
|
||||
<div id="messages"></div>
|
||||
<div id="inputbar">
|
||||
<span id="input-prompt">›</span>
|
||||
<input id="chat-input" type="text" placeholder="type a message or /command" autocomplete="off" spellcheck="false">
|
||||
<button id="emoji-btn" class="inputbar-btn" title="Emoji picker">😊</button>
|
||||
<button id="upload-btn" class="inputbar-btn" title="Upload file">📎</button>
|
||||
<input id="upload-file" type="file" style="display:none" multiple>
|
||||
<button id="send-btn">SEND</button>
|
||||
</div>
|
||||
<!-- Emoji picker popup — hidden until emoji-btn clicked -->
|
||||
<div id="emoji-popup" style="display:none">
|
||||
<emoji-picker id="emoji-picker"></emoji-picker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nicklist panel -->
|
||||
<div id="nicklist-panel">
|
||||
<div id="nicklist-header">NICKS</div>
|
||||
<div id="nicklist"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ── Footer ──────────────────────────────────────────────────────────── -->
|
||||
<div id="footer">
|
||||
Cathode — Inspired by <a href="https://github.com/glowing-bear/glowing-bear" target="_blank" rel="noopener">Glowing Bear</a>
|
||||
· <a href="https://github.com/weechat/weechat" target="_blank" rel="noopener">WeeChat</a>
|
||||
</div>
|
||||
|
||||
</div><!-- /#app -->
|
||||
|
||||
<!-- ── Drag overlay ──────────────────────────────────────────────────────── -->
|
||||
<div id="drag-overlay" style="display:none">
|
||||
<div class="drag-overlay-inner">DROP TO UPLOAD</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Settings panel ───────────────────────────────────────────────────── -->
|
||||
<div id="settings-overlay" style="display:none">
|
||||
<div id="settings-panel">
|
||||
<div class="settings-header">
|
||||
<span>SETTINGS</span>
|
||||
<button id="settings-close">✕</button>
|
||||
</div>
|
||||
<div class="settings-body">
|
||||
|
||||
<div class="settings-section" id="settings-upload-section">UPLOAD</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="s-upload-backend">BACKEND</label>
|
||||
<select id="s-upload-backend">
|
||||
<option value="none">Disabled</option>
|
||||
<option value="filehost">Single PHP Filehost</option>
|
||||
<option value="imgur">Imgur</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="s-filehost-opts">
|
||||
<div class="field">
|
||||
<label for="s-filehost-url">FILEHOST URL</label>
|
||||
<input id="s-filehost-url" type="text" placeholder="https://files.example.com/" spellcheck="false">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="s-imgur-opts" style="display:none">
|
||||
<div class="field">
|
||||
<label for="s-imgur-key">IMGUR CLIENT ID</label>
|
||||
<input id="s-imgur-key" type="text" placeholder="your_client_id" spellcheck="false">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section" style="margin-top:16px">DISPLAY</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="s-prefix-max">PREFIX ALIGN MAX (weechat.look.prefix_align_max)</label>
|
||||
<input id="s-prefix-max" type="number" min="4" max="64" value="16">
|
||||
</div>
|
||||
|
||||
<div class="settings-actions">
|
||||
<button id="settings-save" class="btn-primary">SAVE</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="config.js"></script>
|
||||
<script src="vendor/emoji-mart.js"></script>
|
||||
<script src="js/main.js" type="module"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+123
@@ -0,0 +1,123 @@
|
||||
// ─── ANSI colour palette ──────────────────────────────────────────────────────
|
||||
export const ANSI16 = [
|
||||
'#1a1a1a','#cc3333','#33cc33','#cccc33',
|
||||
'#3333cc','#cc33cc','#33cccc','#cccccc',
|
||||
'#555555','#ff5555','#55ff55','#ffff55',
|
||||
'#5555ff','#ff55ff','#55ffff','#ffffff',
|
||||
];
|
||||
|
||||
export function ansi256(n) {
|
||||
if (n < 16) return ANSI16[n];
|
||||
if (n >= 232) { const v = 8 + (n - 232) * 10; return `rgb(${v},${v},${v})`; }
|
||||
const i = n - 16;
|
||||
return `rgb(${Math.floor(i/36)*51},${Math.floor((i%36)/6)*51},${(i%6)*51})`;
|
||||
}
|
||||
|
||||
export function luminance(css) {
|
||||
let r, g, b;
|
||||
const m = css.match(/^rgb\((\d+),(\d+),(\d+)\)$/);
|
||||
if (m) { r = +m[1]; g = +m[2]; b = +m[3]; }
|
||||
else if (css.startsWith('#')) {
|
||||
const h = css.slice(1);
|
||||
if (h.length === 3) {
|
||||
r = parseInt(h[0]+h[0],16); g = parseInt(h[1]+h[1],16); b = parseInt(h[2]+h[2],16);
|
||||
} else {
|
||||
r = parseInt(h.slice(0,2),16); g = parseInt(h.slice(2,4),16); b = parseInt(h.slice(4,6),16);
|
||||
}
|
||||
} else return 0.5;
|
||||
const lin = c => { c /= 255; return c <= 0.04045 ? c/12.92 : Math.pow((c+0.055)/1.055, 2.4); };
|
||||
return 0.2126*lin(r) + 0.7152*lin(g) + 0.0722*lin(b);
|
||||
}
|
||||
|
||||
// In light theme, force near-white foreground colours to black.
|
||||
export function safeFg(css) {
|
||||
const theme = document.documentElement.getAttribute('data-theme') || 'dark';
|
||||
if (theme === 'light' && luminance(css) > 0.70) return '#111111';
|
||||
return css;
|
||||
}
|
||||
|
||||
// Partial-reset SGR codes — treat like a full reset (close all open spans).
|
||||
const PARTIAL_RESET = new Set([21,22,23,24,25,27,28,29,39,49,51,52,53,54,55]);
|
||||
|
||||
// Convert ANSI-escaped text to HTML. Linkifies URLs and adds media-toggle buttons.
|
||||
export function ansiToHtml(text) {
|
||||
if (!text) return '';
|
||||
let s = text.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||||
let out = '', spans = 0;
|
||||
// NOTE: the regex literal below must contain a literal ESC character (0x1b)
|
||||
// followed by \[ — do not modify with automated text tools.
|
||||
const re = /\x1b\[([0-9;]*)m/g;
|
||||
let last = 0, m;
|
||||
while ((m = re.exec(s)) !== null) {
|
||||
out += s.slice(last, m.index);
|
||||
last = m.index + m[0].length;
|
||||
const codes = m[1].split(';').map(Number);
|
||||
let i = 0;
|
||||
while (i < codes.length) {
|
||||
if (codes[i] === 0) {
|
||||
if (spans > 0) { out += '</span>'.repeat(spans); spans = 0; }
|
||||
i++; continue;
|
||||
}
|
||||
if (PARTIAL_RESET.has(codes[i])) {
|
||||
if (spans > 0) { out += '</span>'.repeat(spans); spans = 0; }
|
||||
i++; continue;
|
||||
}
|
||||
const st = [];
|
||||
while (i < codes.length && codes[i] !== 0 && !PARTIAL_RESET.has(codes[i])) {
|
||||
const c = codes[i];
|
||||
if (c === 1) { st.push('font-weight:bold'); }
|
||||
else if (c === 3) { st.push('font-style:italic'); }
|
||||
else if (c === 4) { st.push('text-decoration:underline'); }
|
||||
else if (c >= 30 && c <= 37) { st.push(`color:${safeFg(ANSI16[c-30])}`); }
|
||||
else if (c === 38 && codes[i+1] === 5) { st.push(`color:${safeFg(ansi256(codes[i+2]))}`); i+=2; }
|
||||
else if (c === 38 && codes[i+1] === 2) { st.push(`color:${safeFg(`rgb(${codes[i+2]},${codes[i+3]},${codes[i+4]})`)}`); i+=4; }
|
||||
else if (c >= 40 && c <= 47) { st.push(`background:${ANSI16[c-40]}`); }
|
||||
else if (c === 48 && codes[i+1] === 5) { st.push(`background:${ansi256(codes[i+2])}`); i+=2; }
|
||||
else if (c === 48 && codes[i+1] === 2) { st.push(`background:rgb(${codes[i+2]},${codes[i+3]},${codes[i+4]})`); i+=4; }
|
||||
else if (c >= 90 && c <= 97) { st.push(`color:${safeFg(ANSI16[c-90+8])}`); }
|
||||
else if (c >= 100 && c <= 107) { st.push(`background:${ANSI16[c-100+8]}`); }
|
||||
i++;
|
||||
}
|
||||
if (st.length) { out += `<span style="${st.join(';')}">`; spans++; }
|
||||
}
|
||||
}
|
||||
out += s.slice(last);
|
||||
if (spans > 0) out += '</span>'.repeat(spans);
|
||||
|
||||
// Linkify URLs; match through & so query strings aren't cut short
|
||||
return out.replace(/https?:\/\/(?:[^\s<>"']|&)+/g, (url) => {
|
||||
const href = url.replace(/&/g, '&');
|
||||
const isImg = /\.(png|jpe?g|gif|webp|svg|bmp)(\?.*)?$/i.test(href);
|
||||
const isVid = /\.(mp4|webm|ogv|mov)(\?.*)?$/i.test(href);
|
||||
const btn = (isImg || isVid)
|
||||
? ` <button class="media-toggle" data-url="${href}" data-type="${isImg?'img':'vid'}">${isImg?'Show Image':'Show Video'}</button>`
|
||||
: '';
|
||||
return `<a href="${href}" target="_blank" rel="noopener noreferrer">${url}</a>${btn}`;
|
||||
});
|
||||
}
|
||||
|
||||
// ─── WeeChat colour name → CSS ────────────────────────────────────────────────
|
||||
const WEECHAT_COLOR_NAMES = {
|
||||
'default':'inherit','bar_fg':'inherit','black':'#1a1a1a','darkgray':'#555555',
|
||||
'red':'#cc3333','lightred':'#ff5555','green':'#33cc33','lightgreen':'#55ff55',
|
||||
'brown':'#cccc33','yellow':'#ffff55','blue':'#3333cc','lightblue':'#5555ff',
|
||||
'magenta':'#cc33cc','lightmagenta':'#ff55ff','cyan':'#33cccc','lightcyan':'#55ffff',
|
||||
'gray':'#cccccc','white':'#ffffff',
|
||||
};
|
||||
|
||||
// Convert a nick color value from the relay API to a CSS color string.
|
||||
// The API sends either an ANSI escape sequence or a WeeChat color name.
|
||||
export function nickColorToCss(colorVal) {
|
||||
if (!colorVal) return '';
|
||||
if (colorVal.includes('\x1b')) {
|
||||
// Extract colour from ANSI escape by running it through ansiToHtml
|
||||
const html = ansiToHtml(colorVal + 'X\x1b[0m');
|
||||
const m = html.match(/style="([^"]+)"/);
|
||||
if (m) {
|
||||
const cm = m[1].match(/(?:^|;)color:([^;]+)/);
|
||||
if (cm) return cm[1];
|
||||
}
|
||||
return '';
|
||||
}
|
||||
return WEECHAT_COLOR_NAMES[colorVal.toLowerCase()] || 'inherit';
|
||||
}
|
||||
+323
@@ -0,0 +1,323 @@
|
||||
import { state, saveSettings } from './state.js';
|
||||
import { parseId } from './connection.js';
|
||||
import { ansiToHtml, nickColorToCss, safeFg } from './ansi.js';
|
||||
import { renderMessages, renderChatHeader, hideNewMsgBanner, appendLine } from './chat.js';
|
||||
import { maybeNotify, updateTitle } from './notifications.js';
|
||||
|
||||
const el = id => document.getElementById(id);
|
||||
const esc = s => String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||||
|
||||
// ─── Buffer events ────────────────────────────────────────────────────────────
|
||||
export function onBufOpened(buf) {
|
||||
if (!buf) return;
|
||||
const id = parseId(buf.id);
|
||||
buf = { ...buf, id };
|
||||
state.buffers.set(id, { ...buf, lines: buf.lines||[], nicks:{}, unread:0, highlight:0 });
|
||||
if (!state.smartFilter.has(id)) state.smartFilter.set(id, true);
|
||||
rebuildBufList();
|
||||
if (state.activeBufferId == null) activateBuffer(id);
|
||||
}
|
||||
|
||||
export function onBufUpdated(buf) {
|
||||
if (!buf) return;
|
||||
const id = parseId(buf.id);
|
||||
const b = state.buffers.get(id);
|
||||
if (!b) return;
|
||||
Object.assign(b, { ...buf, id });
|
||||
paintNode(id);
|
||||
if (state.activeBufferId === id) renderChatHeader();
|
||||
}
|
||||
|
||||
export function onBufCleared(rawId) {
|
||||
const id = parseId(rawId);
|
||||
const b = state.buffers.get(id);
|
||||
if (b) { b.lines = []; if (state.activeBufferId === id) el('messages').innerHTML = ''; }
|
||||
}
|
||||
|
||||
export function onBufClosed(rawId) {
|
||||
const id = parseId(rawId);
|
||||
state.buffers.delete(id);
|
||||
removeNode(id);
|
||||
if (state.activeBufferId === id) {
|
||||
const first = state.buffers.keys().next().value;
|
||||
if (first != null) activateBuffer(first);
|
||||
else { state.activeBufferId = null; el('messages').innerHTML = ''; }
|
||||
}
|
||||
}
|
||||
|
||||
export function onLineAdded(rawId, line) {
|
||||
if (!line) return;
|
||||
const id = parseId(rawId);
|
||||
const b = state.buffers.get(id);
|
||||
if (!b) return;
|
||||
b.lines.push(line);
|
||||
if (state.activeBufferId === id) {
|
||||
appendLine(line);
|
||||
} else {
|
||||
b.unread++;
|
||||
if (line.highlight) b.highlight++;
|
||||
paintNode(id);
|
||||
}
|
||||
maybeNotify(b, line, activateBuffer);
|
||||
updateTitle();
|
||||
}
|
||||
|
||||
// ─── Nick events ──────────────────────────────────────────────────────────────
|
||||
export function collectNicks(group, out) {
|
||||
if (!group) return;
|
||||
for (const n of (group.nicks || [])) out[n.id] = n;
|
||||
for (const g of (group.groups || [])) collectNicks(g, out);
|
||||
}
|
||||
|
||||
export function onNickAdded(rawId, nick) {
|
||||
const id = parseId(rawId);
|
||||
const b = state.buffers.get(id);
|
||||
if (!b || !nick) return;
|
||||
b.nicks[nick.id] = nick;
|
||||
if (state.activeBufferId === id) renderNicklist(b);
|
||||
}
|
||||
|
||||
export function onNickRemoved(rawId, nick) {
|
||||
const id = parseId(rawId);
|
||||
const b = state.buffers.get(id);
|
||||
if (!b || !nick) return;
|
||||
delete b.nicks[nick.id];
|
||||
if (state.activeBufferId === id) renderNicklist(b);
|
||||
}
|
||||
|
||||
export function onGroupChanged(rawId) {
|
||||
const id = parseId(rawId);
|
||||
const b = state.buffers.get(id);
|
||||
if (b && state.activeBufferId === id) renderNicklist(b);
|
||||
}
|
||||
|
||||
// ─── Nicklist ─────────────────────────────────────────────────────────────────
|
||||
export function renderNicklist(buf) {
|
||||
const box = el('nicklist');
|
||||
box.innerHTML = '';
|
||||
const nicks = Object.values(buf.nicks || {}).sort((a, b) => {
|
||||
const w = p => p==='~'?0 : p==='&'?1 : p==='@'?2 : p==='%'?3 : p==='+'?4 : 5;
|
||||
const d = w(a.prefix) - w(b.prefix);
|
||||
return d !== 0 ? d : a.name.localeCompare(b.name, undefined, {sensitivity:'base'});
|
||||
});
|
||||
for (const nick of nicks) {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'nick-item';
|
||||
const pfxChar = (nick.prefix && nick.prefix.trim()) ? esc(nick.prefix) : ' ';
|
||||
const pfxHtml = nick.prefix_color
|
||||
? `<span class="nick-pfx" style="color:${nickColorToCss(nick.prefix_color)}">${pfxChar}</span>`
|
||||
: `<span class="nick-pfx">${pfxChar}</span>`;
|
||||
const nameHtml = nick.color
|
||||
? `<span class="nick-name" style="color:${safeFg(nickColorToCss(nick.color))}">${esc(nick.name)}</span>`
|
||||
: `<span class="nick-name">${esc(nick.name)}</span>`;
|
||||
row.innerHTML = pfxHtml + nameHtml;
|
||||
row.addEventListener('click', () => openNickMenu(nick, buf));
|
||||
box.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Nick context menu ────────────────────────────────────────────────────────
|
||||
function openNickMenu(nick, buf) {
|
||||
closeNickMenu();
|
||||
const overlay = document.createElement('div');
|
||||
overlay.id = 'nick-overlay';
|
||||
overlay.className = 'nick-overlay';
|
||||
overlay.addEventListener('click', e => { if (e.target === overlay) closeNickMenu(); });
|
||||
|
||||
const menu = document.createElement('div');
|
||||
menu.className = 'nick-menu';
|
||||
|
||||
const hdr = document.createElement('div');
|
||||
hdr.className = 'nick-menu-hdr';
|
||||
hdr.textContent = (nick.prefix && nick.prefix.trim() ? nick.prefix : '') + nick.name;
|
||||
menu.appendChild(hdr);
|
||||
|
||||
const myPfx = ownPrefix(buf);
|
||||
const isOp = ['@','~','&'].includes(myPfx);
|
||||
|
||||
const actions = [
|
||||
{ label: '💬 Query', cmd: `/query ${nick.name}` },
|
||||
{ label: '🔍 Whois', cmd: `/whois ${nick.name}` },
|
||||
{ label: '🔍 Whois (full)', cmd: `/whois ${nick.name} ${nick.name}` },
|
||||
{ label: '📌 Ignore', cmd: `/ignore ${nick.name}` },
|
||||
{ label: '🔇 Kick', cmd: `/kick ${nick.name}`, op: true },
|
||||
{ label: '🚫 Ban', cmd: `/ban ${nick.name}`, op: true },
|
||||
];
|
||||
for (const a of actions) {
|
||||
if (a.op && !isOp) continue;
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'nick-menu-btn';
|
||||
btn.textContent = a.label;
|
||||
btn.addEventListener('click', () => {
|
||||
wsSendRef(a.cmd, buf.name);
|
||||
closeNickMenu();
|
||||
});
|
||||
menu.appendChild(btn);
|
||||
}
|
||||
|
||||
overlay.appendChild(menu);
|
||||
document.body.appendChild(overlay);
|
||||
overlay._esc = e => { if (e.key === 'Escape') closeNickMenu(); };
|
||||
document.addEventListener('keydown', overlay._esc);
|
||||
}
|
||||
|
||||
function closeNickMenu() {
|
||||
const ov = document.getElementById('nick-overlay');
|
||||
if (!ov) return;
|
||||
document.removeEventListener('keydown', ov._esc);
|
||||
ov.remove();
|
||||
}
|
||||
|
||||
function ownPrefix(buf) {
|
||||
const nick = (buf.local_variables || {}).nick || '';
|
||||
const entry = Object.values(buf.nicks || {}).find(n => n.name === nick);
|
||||
return entry ? (entry.prefix || '') : '';
|
||||
}
|
||||
|
||||
// wsSend reference — set by main.js after connection module loads
|
||||
let wsSendRef = () => {};
|
||||
export function setWsSend(fn) {
|
||||
wsSendRef = (cmd, bufName) => fn({ request: 'POST /api/input', body: { buffer_name: bufName, command: cmd } });
|
||||
}
|
||||
|
||||
// ─── Buffer list DOM ──────────────────────────────────────────────────────────
|
||||
const bufNodes = new Map();
|
||||
|
||||
const bKey = id => 'b:' + id;
|
||||
const gKey = key => 'g:' + key;
|
||||
|
||||
function bufMeta(buf) {
|
||||
const lv = buf.local_variables || {};
|
||||
const plugin = lv.plugin || '';
|
||||
const server = lv.server || '';
|
||||
const type = lv.type || '';
|
||||
if (!plugin || plugin === 'core')
|
||||
return { group:'\x00core', groupLabel:'weechat', isServer:false, indent:false };
|
||||
if (plugin === 'irc') {
|
||||
if (type === 'server' || !server)
|
||||
return { group: server||buf.name, groupLabel: server||buf.name, isServer:true, indent:false };
|
||||
return { group: server, groupLabel: server, isServer:false, indent:true };
|
||||
}
|
||||
const gk = server ? `${plugin}.${server}` : plugin;
|
||||
return { group:gk, groupLabel: server ? `${plugin}/${server}` : plugin,
|
||||
isServer:!server, indent:!!server };
|
||||
}
|
||||
|
||||
function buildWanted() {
|
||||
const sorted = [...state.buffers.values()].sort((a,b) => a.number - b.number);
|
||||
const groups = new Map();
|
||||
for (const buf of sorted) {
|
||||
const m = bufMeta(buf);
|
||||
if (!groups.has(m.group)) groups.set(m.group, { label:m.groupLabel, srv:null, ch:[] });
|
||||
const g = groups.get(m.group);
|
||||
if (m.isServer) g.srv = buf; else g.ch.push(buf);
|
||||
}
|
||||
const items = [];
|
||||
for (const [gk, g] of groups) {
|
||||
if (g.srv) items.push({ key:bKey(g.srv.id), type:'server', buf:g.srv });
|
||||
else items.push({ key:gKey(gk), type:'header', label:g.label });
|
||||
for (const buf of g.ch)
|
||||
items.push({ key:bKey(buf.id), type:'channel', buf });
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
export function rebuildBufList() {
|
||||
const container = el('buffer-list');
|
||||
for (const [,node] of bufNodes) node.remove();
|
||||
bufNodes.clear();
|
||||
for (const item of buildWanted()) {
|
||||
const node = makeNode(item);
|
||||
bufNodes.set(item.key, node);
|
||||
container.appendChild(node);
|
||||
}
|
||||
}
|
||||
|
||||
function paintNode(id) {
|
||||
const node = bufNodes.get(bKey(id));
|
||||
if (!node) return;
|
||||
const buf = state.buffers.get(id);
|
||||
if (!buf) return;
|
||||
const isServer = node.dataset.isServer === '1';
|
||||
const indent = node.dataset.indent === '1';
|
||||
const classes = ['buffer-item'];
|
||||
if (isServer) classes.push('buf-server');
|
||||
if (indent) classes.push('buf-indented');
|
||||
if (String(buf.id) === String(state.activeBufferId)) classes.push('active');
|
||||
if (buf.highlight > 0) classes.push('highlight');
|
||||
else if (buf.unread > 0) classes.push('unread');
|
||||
node.className = classes.join(' ');
|
||||
const name = buf.short_name || buf.name || '?';
|
||||
const badge = buf.highlight > 0
|
||||
? `<span class="badge hl-badge">${buf.highlight}</span>`
|
||||
: buf.unread > 0 ? `<span class="badge">${buf.unread}</span>` : '';
|
||||
node.innerHTML =
|
||||
`<span class="buf-num">${buf.number}</span>` +
|
||||
`<span class="buf-name">${esc(name)}</span>${badge}` +
|
||||
`<button class="buf-close" data-id="${buf.id}" title="Close buffer">×</button>`;
|
||||
}
|
||||
|
||||
function removeNode(id) {
|
||||
const node = bufNodes.get(bKey(id));
|
||||
if (node) { node.remove(); bufNodes.delete(bKey(id)); }
|
||||
rebuildBufList();
|
||||
}
|
||||
|
||||
function makeNode(item) {
|
||||
if (item.type === 'header') {
|
||||
const node = document.createElement('div');
|
||||
node.className = 'buf-group-header';
|
||||
node.dataset.key = item.key;
|
||||
node.textContent = item.label;
|
||||
return node;
|
||||
}
|
||||
const isServer = item.type === 'server';
|
||||
const indent = item.type === 'channel';
|
||||
const node = document.createElement('div');
|
||||
node.dataset.key = item.key;
|
||||
node.dataset.id = String(item.buf.id);
|
||||
node.dataset.isServer = isServer ? '1' : '0';
|
||||
node.dataset.indent = indent ? '1' : '0';
|
||||
node.addEventListener('click', () => activateBuffer(node.dataset.id));
|
||||
const classes = ['buffer-item'];
|
||||
if (isServer) classes.push('buf-server');
|
||||
if (indent) classes.push('buf-indented');
|
||||
node.className = classes.join(' ');
|
||||
const buf = item.buf;
|
||||
const name = buf.short_name || buf.name || '?';
|
||||
node.innerHTML =
|
||||
`<span class="buf-num">${buf.number}</span>` +
|
||||
`<span class="buf-name">${esc(name)}</span>` +
|
||||
`<button class="buf-close" data-id="${buf.id}" title="Close buffer">×</button>`;
|
||||
return node;
|
||||
}
|
||||
|
||||
// ─── Activate buffer ──────────────────────────────────────────────────────────
|
||||
export function activateBuffer(id) {
|
||||
const prev = state.activeBufferId;
|
||||
const buf = state.buffers.get(id);
|
||||
if (!buf) return;
|
||||
state.activeBufferId = id;
|
||||
state.scroll.pinned = true;
|
||||
state.scroll.newCount = 0;
|
||||
buf.unread = 0;
|
||||
buf.highlight = 0;
|
||||
if (prev != null && prev !== id) paintNode(prev);
|
||||
paintNode(id);
|
||||
renderChatHeader();
|
||||
renderMessages(buf);
|
||||
renderNicklist(buf);
|
||||
hideNewMsgBanner();
|
||||
updateTitle();
|
||||
el('chat-input').focus();
|
||||
|
||||
// Sync read position back to WeeChat by switching to the buffer there too.
|
||||
// This marks lines as read in WeeChat's state, updating last_read_line_id.
|
||||
// We send it as a direct API input command rather than going through the input box.
|
||||
if (state.ws && state.ws.readyState === WebSocket.OPEN) {
|
||||
state.ws.send(JSON.stringify({
|
||||
request: 'POST /api/input',
|
||||
body: { buffer_name: 'core.weechat', command: `/buffer ${buf.name}` }
|
||||
}));
|
||||
}
|
||||
}
|
||||
+183
@@ -0,0 +1,183 @@
|
||||
import { state } from './state.js';
|
||||
import { ansiToHtml } from './ansi.js';
|
||||
|
||||
const el = id => document.getElementById(id);
|
||||
|
||||
// ─── Prefix truncation ────────────────────────────────────────────────────────
|
||||
// Mirrors weechat.look.prefix_align_max — truncates long nicks in the prefix
|
||||
// column. Strips ANSI to measure visible length, re-wraps with original escape.
|
||||
//
|
||||
// IMPORTANT: the regex literals below must contain a literal ESC byte (0x1b).
|
||||
// Do not modify with automated text replacement tools.
|
||||
export function truncPrefix(raw) {
|
||||
if (!raw) return raw;
|
||||
const visible = raw.replace(/\x1b\[[0-9;]*m/g, '');
|
||||
const max = state.prefixAlignMax;
|
||||
if (visible.length <= max) return raw;
|
||||
// Preserve leading colour escape, truncate visible chars, close with reset
|
||||
const esc = raw.match(/^(\x1b\[[0-9;]*m)*/);
|
||||
const lead = esc ? esc[0] : '';
|
||||
const plain = visible.slice(0, max - 1) + '…';
|
||||
return lead + plain + '\x1b[0m';
|
||||
}
|
||||
|
||||
export function applyPrefixWidth() {
|
||||
const charWidth = 8.2; // IBM Plex Mono px/char at 13px
|
||||
const px = Math.round(state.prefixAlignMax * charWidth) + 16;
|
||||
document.documentElement.style.setProperty('--prefix-col-width', px + 'px');
|
||||
}
|
||||
|
||||
// ─── Chat header ──────────────────────────────────────────────────────────────
|
||||
export function renderChatHeader() {
|
||||
const buf = state.buffers.get(state.activeBufferId);
|
||||
if (!buf) return;
|
||||
el('chat-title').textContent = buf.short_name || buf.name || '';
|
||||
el('chat-topic').innerHTML = buf.title ? ansiToHtml(buf.title) : '';
|
||||
const lv = buf.local_variables || {};
|
||||
const isIrc = lv.plugin === 'irc' && lv.type !== 'server';
|
||||
const sfBtn = el('smartfilter-btn');
|
||||
if (isIrc) {
|
||||
const on = state.smartFilter.get(buf.id) !== false;
|
||||
sfBtn.textContent = on ? 'FILTER: ON' : 'FILTER: OFF';
|
||||
sfBtn.classList.toggle('sf-off', !on);
|
||||
sfBtn.style.display = '';
|
||||
} else {
|
||||
sfBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
export function toggleSmartFilter() {
|
||||
const id = state.activeBufferId;
|
||||
if (id == null) return;
|
||||
const cur = state.smartFilter.get(id) !== false;
|
||||
state.smartFilter.set(id, !cur);
|
||||
renderChatHeader();
|
||||
const buf = state.buffers.get(id);
|
||||
if (buf) renderMessages(buf);
|
||||
}
|
||||
|
||||
// ─── Message rendering ────────────────────────────────────────────────────────
|
||||
export function renderMessages(buf) {
|
||||
const box = el('messages');
|
||||
box.innerHTML = '';
|
||||
for (const line of buf.lines) appendLine(line, false, buf.lastReadId);
|
||||
box.scrollTop = box.scrollHeight;
|
||||
box.onscroll = onMessagesScroll;
|
||||
}
|
||||
|
||||
export function appendLine(line, scroll = true, lastReadId = null) {
|
||||
if (!line.displayed) return;
|
||||
// Smart filter: skip join/part/quit noise tagged by WeeChat
|
||||
if (line.tags && line.tags.includes('irc_smart_filter')) {
|
||||
if (state.smartFilter.get(state.activeBufferId) !== false) return;
|
||||
}
|
||||
const box = el('messages');
|
||||
|
||||
// Read marker divider — insert before the first unread line
|
||||
if (lastReadId !== null && String(line.id) === String(lastReadId)) {
|
||||
// This is the last-read line; the NEXT line will be unread.
|
||||
// We track this by inserting the divider after this line is appended.
|
||||
// We use a sentinel attribute on the box so we know to insert after this row.
|
||||
box.dataset.insertDividerAfterNext = '1';
|
||||
} else if (box.dataset.insertDividerAfterNext === '1') {
|
||||
delete box.dataset.insertDividerAfterNext;
|
||||
const divider = document.createElement('div');
|
||||
divider.className = 'read-marker';
|
||||
divider.textContent = '─── unread ───';
|
||||
box.appendChild(divider);
|
||||
}
|
||||
|
||||
const subLines = (line.message || '').split('\n');
|
||||
const time = line.date ? fmtTime(line.date) : '';
|
||||
const prefix = line.prefix ? ansiToHtml(truncPrefix(line.prefix)) : '';
|
||||
const hlClass = line.highlight ? ' msg-highlight' : '';
|
||||
|
||||
subLines.forEach((sub, i) => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'msg-row' + hlClass;
|
||||
if (i === 0) {
|
||||
row.innerHTML =
|
||||
`<span class="msg-time">${time}</span>` +
|
||||
`<span class="msg-prefix">${prefix}</span>` +
|
||||
`<span class="msg-sep"></span>` +
|
||||
`<span class="msg-text">${ansiToHtml(sub)}</span>`;
|
||||
} else {
|
||||
row.innerHTML =
|
||||
`<span class="msg-time"></span>` +
|
||||
`<span class="msg-prefix"></span>` +
|
||||
`<span class="msg-sep"></span>` +
|
||||
`<span class="msg-text">${ansiToHtml(sub)}</span>`;
|
||||
}
|
||||
box.appendChild(row);
|
||||
});
|
||||
|
||||
if (scroll) {
|
||||
if (state.scroll.pinned) {
|
||||
box.scrollTop = box.scrollHeight;
|
||||
} else {
|
||||
state.scroll.newCount++;
|
||||
showNewMsgBanner(state.scroll.newCount);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function sysMsg(id, text) {
|
||||
if (id != null && id !== state.activeBufferId) return;
|
||||
const box = el('messages');
|
||||
const row = document.createElement('div');
|
||||
row.className = 'msg-row msg-system';
|
||||
row.innerHTML =
|
||||
`<span class="msg-time">${fmtTime(new Date().toISOString())}</span>` +
|
||||
`<span class="msg-prefix">--</span>` +
|
||||
`<span class="msg-sep"></span>` +
|
||||
`<span class="msg-text">${escHtml(text)}</span>`;
|
||||
box.appendChild(row);
|
||||
if (state.scroll.pinned) box.scrollTop = box.scrollHeight;
|
||||
}
|
||||
|
||||
// ─── Scroll lock ──────────────────────────────────────────────────────────────
|
||||
export function onMessagesScroll() {
|
||||
const box = el('messages');
|
||||
const atBottom = box.scrollHeight - box.scrollTop - box.clientHeight < 2;
|
||||
if (atBottom && !state.scroll.pinned) {
|
||||
state.scroll.pinned = true;
|
||||
state.scroll.newCount = 0;
|
||||
hideNewMsgBanner();
|
||||
} else if (!atBottom && state.scroll.pinned) {
|
||||
state.scroll.pinned = false;
|
||||
}
|
||||
}
|
||||
|
||||
export function showNewMsgBanner(count) {
|
||||
let banner = document.getElementById('new-msg-banner');
|
||||
if (!banner) {
|
||||
banner = document.createElement('div');
|
||||
banner.id = 'new-msg-banner';
|
||||
banner.className = 'new-msg-banner';
|
||||
banner.addEventListener('click', () => {
|
||||
const box = el('messages');
|
||||
box.scrollTop = box.scrollHeight;
|
||||
state.scroll.pinned = true;
|
||||
state.scroll.newCount = 0;
|
||||
hideNewMsgBanner();
|
||||
});
|
||||
el('main').appendChild(banner);
|
||||
}
|
||||
banner.textContent = `▼ ${count} new message${count === 1 ? '' : 's'}`;
|
||||
}
|
||||
|
||||
export function hideNewMsgBanner() {
|
||||
const b = document.getElementById('new-msg-banner');
|
||||
if (b) b.remove();
|
||||
}
|
||||
|
||||
// ─── Helpers (local) ─────────────────────────────────────────────────────────
|
||||
function fmtTime(iso) {
|
||||
try { return new Date(iso).toLocaleTimeString([],
|
||||
{hour:'2-digit', minute:'2-digit', second:'2-digit', hour12:false}); }
|
||||
catch { return ''; }
|
||||
}
|
||||
|
||||
function escHtml(s) {
|
||||
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||||
}
|
||||
@@ -0,0 +1,259 @@
|
||||
import { state, saveSettings, BLOCKED_PORTS } from './state.js';
|
||||
import { initNotifications } from './notifications.js';
|
||||
import { applyPrefixWidth, sysMsg } from './chat.js';
|
||||
import {
|
||||
onBufOpened, onBufUpdated, onBufCleared, onBufClosed,
|
||||
onLineAdded, onNickAdded, onNickRemoved, onGroupChanged,
|
||||
collectNicks, rebuildBufList, activateBuffer,
|
||||
} from './buffers.js';
|
||||
|
||||
const el = id => document.getElementById(id);
|
||||
|
||||
// ─── Reconnect state ──────────────────────────────────────────────────────────
|
||||
const reconnect = {
|
||||
enabled: false, // set true after first successful connect; false on user disconnect
|
||||
timer: null,
|
||||
backoff: 1000, // ms, doubles each attempt up to MAX_BACKOFF
|
||||
};
|
||||
const MAX_BACKOFF = 30_000;
|
||||
const INITIAL_BACKOFF = 1_000;
|
||||
|
||||
// ─── Float-safe ID parser ─────────────────────────────────────────────────────
|
||||
// The relay sometimes sends buffer IDs as JSON floats (e.g. 1709932823649184.0).
|
||||
// Parsing those as Number loses precision — parse as string when safe.
|
||||
export function parseId(v) {
|
||||
if (v == null) return null;
|
||||
if (typeof v === 'string') return v; // already a string key
|
||||
if (typeof v === 'number') return String(Math.round(v)); // float → integer string
|
||||
return String(v);
|
||||
}
|
||||
|
||||
// ─── WebSocket send ───────────────────────────────────────────────────────────
|
||||
export function wsSend(obj) {
|
||||
if (state.ws && state.ws.readyState === WebSocket.OPEN)
|
||||
state.ws.send(JSON.stringify(obj));
|
||||
}
|
||||
|
||||
// ─── Connect ──────────────────────────────────────────────────────────────────
|
||||
export function connect() {
|
||||
const host = el('host').value.trim();
|
||||
const port = parseInt(el('port').value, 10);
|
||||
const pass = el('password').value;
|
||||
const tls = el('tls').checked;
|
||||
|
||||
if (!host || !port) return showConnError('Host and port are required.');
|
||||
if (BLOCKED_PORTS.has(port)) return showConnError(
|
||||
`Port ${port} is blocked by browsers. Use a different port — e.g. 9000.`);
|
||||
|
||||
reconnect.enabled = false; // reset; re-enabled on first successful connect
|
||||
clearReconnectTimer();
|
||||
connectTo(host, port, pass, tls);
|
||||
}
|
||||
|
||||
function connectTo(host, port, pass, tls) {
|
||||
const hostFmt = (host.includes(':') && !host.startsWith('[')) ? `[${host}]` : host;
|
||||
const url = `${tls ? 'wss' : 'ws'}://${hostFmt}:${port}/api`;
|
||||
|
||||
hideConnError();
|
||||
setConnecting(true);
|
||||
|
||||
let ws;
|
||||
try {
|
||||
ws = new WebSocket(url, [
|
||||
'api.weechat',
|
||||
`base64url.bearer.authorization.weechat.${buildAuth(pass)}`
|
||||
]);
|
||||
} catch (e) {
|
||||
setConnecting(false);
|
||||
showConnError(`Could not open WebSocket: ${e.message}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
ws.close();
|
||||
setConnecting(false);
|
||||
showConnError('Connection timed out. Check host, port, and relay config.');
|
||||
}, 8000);
|
||||
|
||||
ws.onopen = () => {
|
||||
clearTimeout(timer);
|
||||
state.ws = ws;
|
||||
state.connected = true;
|
||||
reconnect.enabled = true;
|
||||
reconnect.backoff = INITIAL_BACKOFF;
|
||||
Object.assign(state.settings, { host, port, pass, tls });
|
||||
saveSettings();
|
||||
onConnected();
|
||||
};
|
||||
|
||||
ws.onmessage = e => {
|
||||
let data;
|
||||
try { data = JSON.parse(e.data); } catch { return; }
|
||||
if (Array.isArray(data)) data.forEach(dispatch);
|
||||
else dispatch(data);
|
||||
};
|
||||
|
||||
ws.onerror = () => {
|
||||
clearTimeout(timer);
|
||||
setConnecting(false);
|
||||
if (location.protocol === 'https:' && !tls) {
|
||||
showConnError('Secure connection error — cannot connect to an unencrypted relay (ws://) from an HTTPS page.');
|
||||
} else if (!reconnect.enabled) {
|
||||
showConnError('WebSocket error. Check host, port, TLS, and relay config.');
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
clearTimeout(timer);
|
||||
if (state.connected) {
|
||||
onDisconnected(/* userInitiated */ false);
|
||||
if (reconnect.enabled) scheduleReconnect(host, port, pass, tls);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function scheduleReconnect(host, port, pass, tls) {
|
||||
clearReconnectTimer();
|
||||
const delay = reconnect.backoff;
|
||||
reconnect.backoff = Math.min(reconnect.backoff * 2, MAX_BACKOFF);
|
||||
setStatus('connecting', `RECONNECTING in ${Math.round(delay/1000)}s…`);
|
||||
reconnect.timer = setTimeout(() => {
|
||||
if (!reconnect.enabled) return;
|
||||
setStatus('connecting', 'RECONNECTING…');
|
||||
connectTo(host, port, pass, tls);
|
||||
}, delay);
|
||||
}
|
||||
|
||||
function clearReconnectTimer() {
|
||||
if (reconnect.timer) { clearTimeout(reconnect.timer); reconnect.timer = null; }
|
||||
}
|
||||
|
||||
export function disconnect() {
|
||||
reconnect.enabled = false;
|
||||
clearReconnectTimer();
|
||||
wsSend({ request: 'DELETE /api/sync' });
|
||||
onDisconnected(/* userInitiated */ true);
|
||||
}
|
||||
|
||||
// ─── Auth ─────────────────────────────────────────────────────────────────────
|
||||
function buildAuth(pw) {
|
||||
return btoa('plain:' + pw).replace(/\+/g,'-').replace(/\//g,'_').replace(/=/g,'');
|
||||
}
|
||||
|
||||
// ─── Message dispatch ─────────────────────────────────────────────────────────
|
||||
function dispatch(msg) {
|
||||
if (!msg) return;
|
||||
if (msg.code === 0 && msg.event_name) { handleEvent(msg); return; }
|
||||
if (msg.request_id === 'init' && msg.body_type === 'buffers') { handleInit(msg); return; }
|
||||
}
|
||||
|
||||
function handleEvent(msg) {
|
||||
switch (msg.event_name) {
|
||||
case 'buffer_opened': onBufOpened(msg.body); break;
|
||||
case 'buffer_closed': onBufClosed(msg.buffer_id); break;
|
||||
case 'buffer_renamed':
|
||||
case 'buffer_title_changed':
|
||||
case 'buffer_localvar_added':
|
||||
case 'buffer_localvar_changed':
|
||||
case 'buffer_localvar_removed':
|
||||
case 'buffer_moved':
|
||||
case 'buffer_merged':
|
||||
case 'buffer_unmerged':
|
||||
case 'buffer_hidden':
|
||||
case 'buffer_unhidden': onBufUpdated(msg.body); break;
|
||||
case 'buffer_cleared': onBufCleared(msg.buffer_id); break;
|
||||
case 'buffer_line_added': onLineAdded(msg.buffer_id, msg.body); break;
|
||||
case 'nicklist_nick_added':
|
||||
case 'nicklist_nick_changed': onNickAdded(msg.buffer_id, msg.body); break;
|
||||
case 'nicklist_nick_removing': onNickRemoved(msg.buffer_id, msg.body); break;
|
||||
case 'nicklist_group_added':
|
||||
case 'nicklist_group_changed': onGroupChanged(msg.buffer_id); break;
|
||||
case 'upgrade': sysMsg(null, '⟳ WeeChat upgrading…'); break;
|
||||
case 'upgrade_ended': sysMsg(null, '✓ WeeChat upgrade complete.'); break;
|
||||
case 'quit': onDisconnected(); break;
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Lifecycle ────────────────────────────────────────────────────────────────
|
||||
function onConnected() {
|
||||
setStatus('connected', 'CONNECTED');
|
||||
initNotifications();
|
||||
wsSend([
|
||||
{ request: 'GET /api/buffers?lines=-200&nicks=true&colors=ansi', request_id: 'init' },
|
||||
{ request: 'POST /api/sync', body: { nicks: true, colors: 'ansi' } }
|
||||
]);
|
||||
}
|
||||
|
||||
function handleInit(msg) {
|
||||
state.buffers.clear();
|
||||
const cfg = window.CATHODE_CONFIG || {};
|
||||
if (cfg.prefixAlignMax) {
|
||||
state.prefixAlignMax = cfg.prefixAlignMax;
|
||||
state.settings.prefixAlignMax = cfg.prefixAlignMax;
|
||||
} else if (state.settings.prefixAlignMax) {
|
||||
state.prefixAlignMax = state.settings.prefixAlignMax;
|
||||
}
|
||||
for (const buf of (msg.body || [])) {
|
||||
const nicks = {};
|
||||
collectNicks(buf.nicklist_root, nicks);
|
||||
// Use parseId to handle float IDs from the relay
|
||||
const id = parseId(buf.id) ?? buf.id;
|
||||
state.buffers.set(id, { ...buf, id, lines: buf.lines||[], nicks, unread:0, highlight:0,
|
||||
lastReadId: buf.last_read_line_id ? parseId(buf.last_read_line_id) : null });
|
||||
if (!state.smartFilter.has(id)) state.smartFilter.set(id, true);
|
||||
}
|
||||
setConnecting(false);
|
||||
el('disconnect-btn').style.display = '';
|
||||
applyPrefixWidth();
|
||||
showScreen('chat');
|
||||
rebuildBufList();
|
||||
state.scroll.pinned = true;
|
||||
state.scroll.newCount = 0;
|
||||
const first = state.buffers.keys().next().value;
|
||||
if (first != null) activateBuffer(first);
|
||||
}
|
||||
|
||||
export function onDisconnected(userInitiated = true) {
|
||||
if (!state.connected && !state.ws) return;
|
||||
state.connected = false;
|
||||
if (state.ws) { try { state.ws.close(); } catch(_){} state.ws = null; }
|
||||
setStatus('disconnected', 'DISCONNECTED');
|
||||
el('disconnect-btn').style.display = 'none';
|
||||
// Only return to connect screen on explicit user disconnect or first-time failure
|
||||
// On auto-reconnect we stay on the chat screen showing the status
|
||||
if (userInitiated) {
|
||||
showScreen('connect');
|
||||
state.buffers.clear();
|
||||
state.activeBufferId = null;
|
||||
state.scroll.pinned = true;
|
||||
state.scroll.newCount = 0;
|
||||
el('buffer-list').innerHTML = '';
|
||||
el('messages').innerHTML = '';
|
||||
el('nicklist').innerHTML = '';
|
||||
const banner = document.getElementById('new-msg-banner');
|
||||
if (banner) banner.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// ─── UI helpers (connection-screen) ──────────────────────────────────────────
|
||||
function showConnError(msg) {
|
||||
el('conn-error').textContent = msg;
|
||||
el('conn-error').style.display = 'block';
|
||||
}
|
||||
function hideConnError() { el('conn-error').style.display = 'none'; }
|
||||
|
||||
function setConnecting(on) {
|
||||
el('connect-btn').disabled = on;
|
||||
el('connect-btn').textContent = on ? 'CONNECTING…' : 'CONNECT';
|
||||
if (on) setStatus('connecting', 'CONNECTING…');
|
||||
}
|
||||
|
||||
function setStatus(s, text) {
|
||||
el('status-dot').className = 'status-dot ' + s;
|
||||
el('status-text').textContent = text;
|
||||
}
|
||||
|
||||
function showScreen(name) {
|
||||
el('connect-screen').style.display = name === 'connect' ? '' : 'none';
|
||||
el('chat-screen').style.display = name === 'chat' ? '' : 'none';
|
||||
}
|
||||
+131
@@ -0,0 +1,131 @@
|
||||
import { state } from './state.js';
|
||||
|
||||
const el = id => document.getElementById(id);
|
||||
|
||||
// Emoji tab completion via emoji-mart SearchIndex.
|
||||
// Lazily initialised on first use so it doesn't block startup.
|
||||
let emojiSearchReady = false;
|
||||
async function initEmojiSearch() {
|
||||
if (emojiSearchReady) return;
|
||||
if (!window.EmojiMart?.SearchIndex) return;
|
||||
try {
|
||||
const res = await fetch('vendor/emoji-data.json');
|
||||
const data = await res.json();
|
||||
await EmojiMart.init({ data });
|
||||
emojiSearchReady = true;
|
||||
} catch (e) {
|
||||
console.warn('Emoji search init failed:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function searchEmoji(stem) {
|
||||
await initEmojiSearch();
|
||||
if (!emojiSearchReady) return [];
|
||||
const results = await EmojiMart.SearchIndex.search(stem);
|
||||
return (results || []).map(e => e.skins[0].native + e.id);
|
||||
}
|
||||
|
||||
const hist = { lines: [], pos: -1, draft: '' };
|
||||
const tab = { matches: [], pos: -1, stem: '' };
|
||||
|
||||
export function sendInput(wsSend) {
|
||||
const buf = state.buffers.get(state.activeBufferId);
|
||||
const text = el('chat-input').value.trim();
|
||||
if (!buf || !text) return;
|
||||
hist.lines.unshift(text);
|
||||
hist.pos = -1;
|
||||
tab.matches = [];
|
||||
tab.pos = -1;
|
||||
wsSend({ request: 'POST /api/input', body: { buffer_name: buf.name, command: text } });
|
||||
el('chat-input').value = '';
|
||||
}
|
||||
|
||||
export function onInputKey(e, wsSend) {
|
||||
if (e.key === 'Tab') {
|
||||
e.preventDefault();
|
||||
doTabComplete();
|
||||
return;
|
||||
}
|
||||
if (e.key !== 'Shift') { tab.matches = []; tab.pos = -1; }
|
||||
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendInput(wsSend);
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
if (hist.pos === -1) hist.draft = el('chat-input').value;
|
||||
hist.pos = Math.min(hist.pos + 1, hist.lines.length - 1);
|
||||
if (hist.lines[hist.pos] !== undefined) el('chat-input').value = hist.lines[hist.pos];
|
||||
} else if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
hist.pos = Math.max(hist.pos - 1, -1);
|
||||
el('chat-input').value = hist.pos === -1 ? hist.draft : hist.lines[hist.pos];
|
||||
}
|
||||
}
|
||||
|
||||
function doTabComplete() {
|
||||
const input = el('chat-input');
|
||||
const val = input.value;
|
||||
const caret = input.selectionStart;
|
||||
const before = val.slice(0, caret);
|
||||
const tokenMatch = before.match(/(\S+)$/);
|
||||
const token = tokenMatch ? tokenMatch[1] : '';
|
||||
if (!token) return;
|
||||
|
||||
const lower = token.toLowerCase();
|
||||
|
||||
if (tab.matches.length === 0 || tab.stem !== lower) {
|
||||
const buf = state.buffers.get(state.activeBufferId);
|
||||
if (!buf) return;
|
||||
|
||||
const prevWord = before.slice(0, before.length - token.length).trim().split(/\s+/).pop() || '';
|
||||
const wantChannel = token.startsWith('#') || prevWord.toLowerCase() === '/join';
|
||||
const wantEmoji = token.startsWith(':') && token.length > 1;
|
||||
|
||||
if (wantEmoji) {
|
||||
const stem = token.slice(1).replace(/:$/, '').toLowerCase();
|
||||
// Async: kick off search and return; next Tab press will use the results
|
||||
searchEmoji(stem).then(results => {
|
||||
tab.matches = results;
|
||||
tab.stem = lower;
|
||||
tab.pos = -1;
|
||||
if (results.length > 0) doComplete(input, val, caret, before, token);
|
||||
});
|
||||
return; // first Tab fetches; subsequent Tab presses cycle
|
||||
}
|
||||
|
||||
let candidates;
|
||||
if (wantChannel) {
|
||||
candidates = [...state.buffers.values()]
|
||||
.filter(b => {
|
||||
const lv = b.local_variables || {};
|
||||
return lv.type === 'channel' || (b.short_name || '').startsWith('#');
|
||||
})
|
||||
.map(b => b.short_name || b.name);
|
||||
} else {
|
||||
candidates = Object.values(buf.nicks || {}).map(n => n.name);
|
||||
}
|
||||
|
||||
tab.matches = candidates.filter(c => c.toLowerCase().startsWith(lower));
|
||||
tab.matches.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }));
|
||||
tab.pos = -1;
|
||||
tab.stem = lower;
|
||||
if (tab.matches.length === 0) return;
|
||||
}
|
||||
|
||||
doComplete(input, val, caret, before, token);
|
||||
}
|
||||
|
||||
function doComplete(input, val, caret, before, token) {
|
||||
if (tab.matches.length === 0) return;
|
||||
tab.pos = (tab.pos + 1) % tab.matches.length;
|
||||
const match = tab.matches[tab.pos];
|
||||
const isEmoji = /^\p{Emoji}/u.test(match);
|
||||
const insert = isEmoji ? [...match][0] : match;
|
||||
const atStart = before.trimStart() === token;
|
||||
const isNick = !insert.startsWith('#') && !isEmoji;
|
||||
const suffix = (atStart && isNick) ? ': ' : ' ';
|
||||
const completed = before.slice(0, before.length - token.length) + insert + suffix;
|
||||
input.value = completed + val.slice(caret);
|
||||
input.selectionStart = input.selectionEnd = completed.length;
|
||||
}
|
||||
+194
@@ -0,0 +1,194 @@
|
||||
import { state } from './state.js';
|
||||
import { initTheme, toggleTheme,
|
||||
openSettings, closeSettings,
|
||||
saveSettingsPanel, updateBackendVis,
|
||||
checkPort, openCertPage } from './settings.js';
|
||||
import { connect, disconnect, wsSend } from './connection.js';
|
||||
import { toggleSmartFilter } from './chat.js';
|
||||
import { sendInput, onInputKey } from './input.js';
|
||||
import { uploadFile, initDragDrop } from './upload.js';
|
||||
import { setWsSend } from './buffers.js';
|
||||
|
||||
const el = id => document.getElementById(id);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initTheme();
|
||||
|
||||
// ── Operator config (config.js → window.CATHODE_CONFIG) ──────────────────
|
||||
const cfg = window.CATHODE_CONFIG || {};
|
||||
if (cfg.uploadBackend) {
|
||||
state.settings.uploadBackend = cfg.uploadBackend;
|
||||
state.settings.filehostUrl = cfg.filehostUrl || '';
|
||||
state.settings.imgurClientId = cfg.imgurClientId || '';
|
||||
const sec = el('settings-upload-section');
|
||||
if (sec) sec.style.display = 'none';
|
||||
}
|
||||
if (cfg.prefixAlignMax) {
|
||||
state.prefixAlignMax = cfg.prefixAlignMax;
|
||||
state.settings.prefixAlignMax = cfg.prefixAlignMax;
|
||||
}
|
||||
|
||||
// ── Restore saved connection settings ────────────────────────────────────
|
||||
const s = state.settings;
|
||||
if (s.host) el('host').value = s.host;
|
||||
if (s.port) el('port').value = s.port;
|
||||
if (s.tls !== undefined) el('tls').checked = s.tls;
|
||||
if (s.prefixAlignMax) state.prefixAlignMax = s.prefixAlignMax;
|
||||
|
||||
// ── Initial UI state ──────────────────────────────────────────────────────
|
||||
el('connect-screen').style.display = '';
|
||||
el('chat-screen').style.display = 'none';
|
||||
el('status-dot').className = 'status-dot disconnected';
|
||||
el('status-text').textContent = 'DISCONNECTED';
|
||||
el('disconnect-btn').style.display = 'none';
|
||||
|
||||
if (location.protocol === 'https:') {
|
||||
el('http-notice').style.display = '';
|
||||
el('tls-locked-note').style.display = '';
|
||||
}
|
||||
|
||||
// ── Wire wsSend into buffers (nick menu commands) ─────────────────────────
|
||||
setWsSend(wsSend);
|
||||
|
||||
// ── Connection ────────────────────────────────────────────────────────────
|
||||
el('connect-btn') .addEventListener('click', connect);
|
||||
el('disconnect-btn').addEventListener('click', disconnect);
|
||||
['host','port','password'].forEach(id =>
|
||||
el(id).addEventListener('keydown', e => { if (e.key === 'Enter') connect(); })
|
||||
);
|
||||
el('port').addEventListener('input', checkPort);
|
||||
|
||||
// ── Chat input ────────────────────────────────────────────────────────────
|
||||
el('send-btn') .addEventListener('click', () => sendInput(wsSend));
|
||||
el('chat-input').addEventListener('keydown', e => onInputKey(e, wsSend));
|
||||
|
||||
// ── Smart filter ──────────────────────────────────────────────────────────
|
||||
el('smartfilter-btn').addEventListener('click', toggleSmartFilter);
|
||||
|
||||
// ── Buffer close buttons (delegated) ─────────────────────────────────────
|
||||
el('buffer-list').addEventListener('click', e => {
|
||||
const btn = e.target.closest('.buf-close');
|
||||
if (!btn) return;
|
||||
e.stopPropagation();
|
||||
const buf = state.buffers.get(btn.dataset.id);
|
||||
if (!buf) return;
|
||||
wsSend({ request: 'POST /api/input', body: { buffer_name: buf.name, command: '/close' } });
|
||||
});
|
||||
|
||||
// ── Sidebar join button ───────────────────────────────────────────────────
|
||||
el('sidebar-join-btn').addEventListener('click', () => {
|
||||
const ch = prompt('Channel to join (e.g. #weechat):');
|
||||
if (!ch) return;
|
||||
const buf = state.buffers.get(state.activeBufferId);
|
||||
if (!buf) return;
|
||||
wsSend({ request: 'POST /api/input', body: { buffer_name: buf.name, command: '/join ' + ch } });
|
||||
});
|
||||
|
||||
// ── Media preview (document-level delegation) ─────────────────────────────
|
||||
document.addEventListener('click', e => {
|
||||
const btn = e.target.closest('.media-toggle');
|
||||
if (!btn) return;
|
||||
const url = btn.dataset.url.replace(/&/g, '&');
|
||||
const type = btn.dataset.type;
|
||||
const existing = btn.nextElementSibling;
|
||||
if (existing && existing.classList.contains('media-preview')) {
|
||||
existing.remove();
|
||||
btn.textContent = type === 'img' ? 'Show Image' : 'Show Video';
|
||||
return;
|
||||
}
|
||||
const wrap = document.createElement('span');
|
||||
wrap.className = 'media-preview';
|
||||
if (type === 'img') {
|
||||
const img = document.createElement('img');
|
||||
img.src = url;
|
||||
img.className = 'preview-img';
|
||||
img.alt = 'image';
|
||||
img.title = 'Click to open full size';
|
||||
img.addEventListener('click', () => window.open(url, '_blank'));
|
||||
wrap.appendChild(img);
|
||||
} else {
|
||||
const vid = document.createElement('video');
|
||||
vid.src = url;
|
||||
vid.controls = true;
|
||||
vid.className = 'preview-vid';
|
||||
wrap.appendChild(vid);
|
||||
}
|
||||
btn.after(wrap);
|
||||
btn.textContent = type === 'img' ? 'Hide Image' : 'Hide Video';
|
||||
});
|
||||
|
||||
// ── Theme ─────────────────────────────────────────────────────────────────
|
||||
el('theme-toggle').addEventListener('click', toggleTheme);
|
||||
window.addEventListener('cathode:themechange', () => {
|
||||
const buf = state.buffers.get(state.activeBufferId);
|
||||
if (buf) import('./chat.js').then(m => m.renderMessages(buf));
|
||||
if (_emojiPicker) { _emojiPicker.remove(); _emojiPicker = null; }
|
||||
});
|
||||
|
||||
// ── Emoji picker ──────────────────────────────────────────────────────────
|
||||
let _emojiPicker = null;
|
||||
let _emojiDataCache = null;
|
||||
|
||||
async function getEmojiData() {
|
||||
if (_emojiDataCache) return _emojiDataCache;
|
||||
const res = await fetch('vendor/emoji-data.json');
|
||||
_emojiDataCache = await res.json();
|
||||
return _emojiDataCache;
|
||||
}
|
||||
|
||||
el('emoji-btn').addEventListener('click', async e => {
|
||||
e.stopPropagation();
|
||||
if (_emojiPicker) {
|
||||
_emojiPicker.remove(); _emojiPicker = null; return;
|
||||
}
|
||||
if (!window.EmojiMart?.Picker) return;
|
||||
const data = await getEmojiData();
|
||||
const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
|
||||
_emojiPicker = new EmojiMart.Picker({
|
||||
data,
|
||||
theme,
|
||||
onEmojiSelect: emoji => {
|
||||
const input = el('chat-input');
|
||||
const pos = input.selectionStart ?? input.value.length;
|
||||
input.value =
|
||||
input.value.slice(0, pos) + emoji.native + input.value.slice(pos);
|
||||
input.selectionStart = input.selectionEnd = pos + [...emoji.native].length;
|
||||
_emojiPicker.remove(); _emojiPicker = null;
|
||||
input.focus();
|
||||
},
|
||||
onClickOutside: () => {
|
||||
if (_emojiPicker) { _emojiPicker.remove(); _emojiPicker = null; }
|
||||
},
|
||||
});
|
||||
_emojiPicker.style.cssText = 'position:absolute;bottom:48px;right:8px;z-index:200;';
|
||||
el('main').appendChild(_emojiPicker);
|
||||
});
|
||||
|
||||
// ── Cert helper ───────────────────────────────────────────────────────────
|
||||
el('cert-btn').addEventListener('click', openCertPage);
|
||||
|
||||
// ── Upload ────────────────────────────────────────────────────────────────
|
||||
el('upload-btn') .addEventListener('click', () => el('upload-file').click());
|
||||
el('upload-file').addEventListener('change', e => {
|
||||
const file = e.target.files[0];
|
||||
if (file) { uploadFile(file); e.target.value = ''; }
|
||||
});
|
||||
initDragDrop();
|
||||
|
||||
// ── Settings panel ────────────────────────────────────────────────────────
|
||||
el('settings-btn') .addEventListener('click', openSettings);
|
||||
el('settings-close') .addEventListener('click', closeSettings);
|
||||
el('settings-save') .addEventListener('click', saveSettingsPanel);
|
||||
el('s-upload-backend').addEventListener('change', updateBackendVis);
|
||||
el('settings-overlay').addEventListener('click', e => {
|
||||
if (e.target === el('settings-overlay')) closeSettings();
|
||||
});
|
||||
|
||||
// ── Global keyboard shortcuts ─────────────────────────────────────────────
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.key === 'Escape') {
|
||||
closeSettings();
|
||||
if (_emojiPicker) { _emojiPicker.remove(); _emojiPicker = null; }
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,60 @@
|
||||
import { state } from './state.js';
|
||||
|
||||
export async function initNotifications() {
|
||||
if (!('Notification' in window)) return;
|
||||
if (Notification.permission === 'default') {
|
||||
await Notification.requestPermission();
|
||||
}
|
||||
}
|
||||
|
||||
export function maybeNotify(buf, line, activateBufferFn) {
|
||||
if (!line) return;
|
||||
if (!('Notification' in window) || Notification.permission !== 'granted') return;
|
||||
|
||||
// Buffer-level notify gate.
|
||||
// WeeChat's buffer.notify setting only gates the hotlist — it does NOT affect
|
||||
// line.highlight or line.notify_level, so we implement our own gate here.
|
||||
// The relay API doesn't expose buffer.notify, so we use config flags instead.
|
||||
const lv = buf.local_variables || {};
|
||||
const type = lv.type || '';
|
||||
const cfg = window.CATHODE_CONFIG || {};
|
||||
if (type === 'server' && cfg.notifyServerBuffers === false) return;
|
||||
|
||||
// Detect highlight — check all three sources WeeChat may use
|
||||
const tags = Array.isArray(line.tags) ? line.tags : [];
|
||||
const isHL = line.highlight
|
||||
|| (line.notify_level >= 3)
|
||||
|| tags.includes('notify_highlight');
|
||||
const isPrivate = (line.notify_level === 2)
|
||||
|| tags.includes('notify_private');
|
||||
|
||||
if (!isHL && !isPrivate) return;
|
||||
|
||||
// Suppress only when tab is visible AND the user is on this exact buffer
|
||||
const focused = document.visibilityState === 'visible'
|
||||
&& state.activeBufferId === buf.id;
|
||||
if (focused) return;
|
||||
|
||||
const bufName = buf.short_name || buf.name || '?';
|
||||
const stripAnsi = s => (s || '').replace(/\x1b\[[0-9;]*m/g, '').trim();
|
||||
const prefix = stripAnsi(line.prefix);
|
||||
const body = stripAnsi(line.message);
|
||||
const title = isPrivate ? `PM from ${prefix}` : `${prefix} in ${bufName}`;
|
||||
|
||||
const n = new Notification(title, {
|
||||
body,
|
||||
icon: 'apple-touch-icon.png',
|
||||
tag: `cathode-${buf.id}`, // collapses repeated pings from same buffer
|
||||
});
|
||||
n.onclick = () => {
|
||||
window.focus();
|
||||
activateBufferFn(buf.id);
|
||||
n.close();
|
||||
};
|
||||
}
|
||||
|
||||
export function updateTitle() {
|
||||
let total = 0;
|
||||
for (const buf of state.buffers.values()) total += buf.highlight;
|
||||
document.title = total > 0 ? `(${total}) Cathode` : 'Cathode';
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { state, saveSettings, BLOCKED_PORTS } from './state.js';
|
||||
import { applyPrefixWidth } from './chat.js';
|
||||
|
||||
const el = id => document.getElementById(id);
|
||||
|
||||
// ─── Theme ────────────────────────────────────────────────────────────────────
|
||||
export function initTheme() {
|
||||
setTheme(localStorage.getItem('cathode_theme') || 'dark');
|
||||
}
|
||||
|
||||
export function setTheme(t) {
|
||||
document.documentElement.setAttribute('data-theme', t);
|
||||
localStorage.setItem('cathode_theme', t);
|
||||
el('theme-toggle').textContent = t === 'dark' ? '◐ LIGHT' : '◑ DARK';
|
||||
}
|
||||
|
||||
export function toggleTheme() {
|
||||
const cur = document.documentElement.getAttribute('data-theme') || 'dark';
|
||||
setTheme(cur === 'dark' ? 'light' : 'dark');
|
||||
// Re-render dispatched via custom event so chat.js can respond without circular import
|
||||
window.dispatchEvent(new CustomEvent('cathode:themechange'));
|
||||
}
|
||||
|
||||
// ─── Settings panel ───────────────────────────────────────────────────────────
|
||||
export function openSettings() {
|
||||
const s = state.settings;
|
||||
el('s-upload-backend').value = s.uploadBackend || 'none';
|
||||
el('s-filehost-url').value = s.filehostUrl || '';
|
||||
el('s-imgur-key').value = s.imgurClientId || '';
|
||||
el('s-prefix-max').value = s.prefixAlignMax || state.prefixAlignMax;
|
||||
updateBackendVis();
|
||||
el('settings-overlay').style.display = '';
|
||||
}
|
||||
|
||||
export function closeSettings() {
|
||||
el('settings-overlay').style.display = 'none';
|
||||
}
|
||||
|
||||
export function saveSettingsPanel() {
|
||||
state.settings.uploadBackend = el('s-upload-backend').value;
|
||||
state.settings.filehostUrl = el('s-filehost-url').value.trim();
|
||||
state.settings.imgurClientId = el('s-imgur-key').value.trim();
|
||||
const pm = parseInt(el('s-prefix-max').value, 10);
|
||||
if (pm >= 4 && pm <= 64) {
|
||||
state.settings.prefixAlignMax = pm;
|
||||
state.prefixAlignMax = pm;
|
||||
applyPrefixWidth();
|
||||
}
|
||||
saveSettings();
|
||||
closeSettings();
|
||||
}
|
||||
|
||||
export function updateBackendVis() {
|
||||
const v = el('s-upload-backend').value;
|
||||
el('s-filehost-opts').style.display = v === 'filehost' ? '' : 'none';
|
||||
el('s-imgur-opts').style.display = v === 'imgur' ? '' : 'none';
|
||||
}
|
||||
|
||||
// ─── Port warning ─────────────────────────────────────────────────────────────
|
||||
export function checkPort() {
|
||||
const port = parseInt(el('port').value, 10);
|
||||
const show = BLOCKED_PORTS.has(port);
|
||||
el('port-warning').textContent = show
|
||||
? `⚠ Port ${port} is blocked by browsers. Use a different port (e.g. 9000).` : '';
|
||||
el('port-warning').style.display = show ? 'block' : 'none';
|
||||
}
|
||||
|
||||
// ─── Cert helper ──────────────────────────────────────────────────────────────
|
||||
export function openCertPage() {
|
||||
const host = el('host').value.trim();
|
||||
const port = parseInt(el('port').value, 10);
|
||||
if (!host || !port) return alert('Enter host and port first.');
|
||||
window.open(`https://${host}:${port}/api/version`, '_blank');
|
||||
}
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
// ─── Blocked ports (browser hard-block list) ─────────────────────────────────
|
||||
export const BLOCKED_PORTS = new Set([
|
||||
1,7,9,11,13,15,17,19,20,21,22,23,25,37,42,43,53,69,77,79,87,95,
|
||||
101,102,103,104,107,109,110,111,113,115,117,119,123,135,137,139,
|
||||
143,161,179,389,427,465,512,513,514,515,526,530,531,532,540,548,
|
||||
554,556,563,587,601,636,989,990,993,995,1719,1720,1723,2049,3659,
|
||||
4045,5060,5061,6000,6566,6665,6666,6667,6668,6669,6697,10080
|
||||
]);
|
||||
|
||||
// ─── Settings persistence ─────────────────────────────────────────────────────
|
||||
export function loadSettings() {
|
||||
try { return JSON.parse(localStorage.getItem('cathode_settings') || '{}'); }
|
||||
catch { return {}; }
|
||||
}
|
||||
|
||||
export function saveSettings() {
|
||||
localStorage.setItem('cathode_settings', JSON.stringify(state.settings));
|
||||
}
|
||||
|
||||
// ─── Shared application state ─────────────────────────────────────────────────
|
||||
export const state = {
|
||||
ws: null,
|
||||
connected: false,
|
||||
buffers: new Map(), // id (number) → buffer object
|
||||
activeBufferId: null,
|
||||
settings: loadSettings(),
|
||||
prefixAlignMax: 16, // mirrors weechat.look.prefix_align_max
|
||||
scroll: { pinned: true, newCount: 0 },
|
||||
smartFilter: new Map(), // bufferId → boolean
|
||||
};
|
||||
+126
@@ -0,0 +1,126 @@
|
||||
import { state } from './state.js';
|
||||
|
||||
const el = id => document.getElementById(id);
|
||||
|
||||
// ─── Upload dispatch ──────────────────────────────────────────────────────────
|
||||
export async function uploadFile(file) {
|
||||
const s = state.settings;
|
||||
const backend = s.uploadBackend || 'none';
|
||||
if (backend === 'none') {
|
||||
showUploadError('No upload backend configured. Open ⚙ Settings to set one up.');
|
||||
return;
|
||||
}
|
||||
setUploadState('uploading');
|
||||
try {
|
||||
let url;
|
||||
if (backend === 'filehost') url = await uploadToFilehost(file, s.filehostUrl);
|
||||
else if (backend === 'imgur') url = await uploadToImgur(file, s.imgurClientId);
|
||||
|
||||
setUploadState('ok');
|
||||
setTimeout(() => setUploadState('idle'), 2000);
|
||||
|
||||
const input = el('chat-input');
|
||||
const pos = input.selectionStart || input.value.length;
|
||||
const sep = input.value.length > 0 && !input.value.endsWith(' ') ? ' ' : '';
|
||||
input.value = input.value.slice(0, pos) + sep + url + input.value.slice(pos);
|
||||
input.focus();
|
||||
input.selectionStart = input.selectionEnd = pos + sep.length + url.length;
|
||||
} catch (err) {
|
||||
setUploadState('err');
|
||||
setTimeout(() => setUploadState('idle'), 3000);
|
||||
showUploadError(`Upload failed: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function uploadToFilehost(file, baseUrl) {
|
||||
if (!baseUrl) throw new Error('Filehost URL not configured in Settings.');
|
||||
const url = baseUrl.endsWith('/') ? baseUrl : baseUrl + '/';
|
||||
const form = new FormData();
|
||||
form.append('file', file, file.name);
|
||||
const res = await fetch(url, { method: 'POST', body: form });
|
||||
if (!res.ok) throw new Error(`Server returned ${res.status}`);
|
||||
const text = (await res.text()).trim();
|
||||
if (!text.startsWith('http')) throw new Error(`Unexpected response: ${text}`);
|
||||
return text;
|
||||
}
|
||||
|
||||
async function uploadToImgur(file, clientId) {
|
||||
if (!clientId) throw new Error('Imgur Client ID not configured in Settings.');
|
||||
const form = new FormData();
|
||||
form.append('image', file);
|
||||
const res = await fetch('https://api.imgur.com/3/image', {
|
||||
method: 'POST',
|
||||
headers: { Authorization: `Client-ID ${clientId}` },
|
||||
body: form,
|
||||
});
|
||||
const json = await res.json();
|
||||
if (!json.success) throw new Error(json.data?.error || 'Imgur upload failed');
|
||||
return json.data.link;
|
||||
}
|
||||
|
||||
function setUploadState(s) {
|
||||
const btn = el('upload-btn');
|
||||
btn.classList.remove('uploading', 'upload-ok', 'upload-err');
|
||||
if (s === 'uploading') { btn.classList.add('uploading'); btn.textContent = '⏳'; }
|
||||
else if (s === 'ok') { btn.classList.add('upload-ok'); btn.textContent = '✓'; }
|
||||
else if (s === 'err') { btn.classList.add('upload-err'); btn.textContent = '✗'; }
|
||||
else { btn.textContent = '📎'; }
|
||||
}
|
||||
|
||||
function showUploadError(msg) {
|
||||
const box = el('messages');
|
||||
if (!box) return;
|
||||
const row = document.createElement('div');
|
||||
row.className = 'msg-row msg-system';
|
||||
row.style.color = 'var(--status-disc)';
|
||||
row.innerHTML =
|
||||
`<span class="msg-time"></span>` +
|
||||
`<span class="msg-prefix">upload</span>` +
|
||||
`<span class="msg-sep"></span>` +
|
||||
`<span class="msg-text">${msg}</span>`;
|
||||
box.appendChild(row);
|
||||
if (state.scroll.pinned) box.scrollTop = box.scrollHeight;
|
||||
}
|
||||
|
||||
// ─── Drag & drop and clipboard paste ─────────────────────────────────────────
|
||||
export function initDragDrop() {
|
||||
let dragCounter = 0;
|
||||
|
||||
window.addEventListener('dragenter', e => {
|
||||
if (!e.dataTransfer.types.includes('Files')) return;
|
||||
dragCounter++;
|
||||
el('drag-overlay').style.display = 'flex';
|
||||
});
|
||||
|
||||
window.addEventListener('dragleave', () => {
|
||||
dragCounter--;
|
||||
if (dragCounter <= 0) {
|
||||
dragCounter = 0;
|
||||
el('drag-overlay').style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('dragover', e => {
|
||||
if (!e.dataTransfer.types.includes('Files')) return;
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
window.addEventListener('drop', e => {
|
||||
e.preventDefault();
|
||||
dragCounter = 0;
|
||||
el('drag-overlay').style.display = 'none';
|
||||
if (!state.connected) return;
|
||||
const files = [...e.dataTransfer.files];
|
||||
if (files.length) uploadFile(files[0]);
|
||||
});
|
||||
|
||||
// Paste image from clipboard
|
||||
el('chat-input').addEventListener('paste', e => {
|
||||
const items = [...(e.clipboardData?.items || [])];
|
||||
const imageItem = items.find(i => i.kind === 'file' && i.type.startsWith('image/'));
|
||||
if (!imageItem) return;
|
||||
e.preventDefault();
|
||||
const file = imageItem.getAsFile();
|
||||
if (file) uploadFile(file);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
# Caddyfile — Cathode + WeeChat relay reverse proxy
|
||||
#
|
||||
# This config does two things:
|
||||
# 1. Serves the Cathode static files at the root
|
||||
# 2. Proxies /api/* to WeeChat's relay (API protocol) with WebSocket support
|
||||
#
|
||||
# Caddy handles TLS automatically (Let's Encrypt) when you use a real domain.
|
||||
# Replace cathode.example.com with your actual domain.
|
||||
|
||||
cathode.example.com {
|
||||
|
||||
# Serve Cathode static files
|
||||
root * /var/www/cathode
|
||||
file_server
|
||||
|
||||
# Proxy WeeChat relay API (REST + WebSocket)
|
||||
# WeeChat listens on localhost:9000 — adjust if needed
|
||||
handle /api* {
|
||||
reverse_proxy localhost:9000 {
|
||||
# Pass the real client IP to WeeChat
|
||||
header_up X-Real-IP {remote_host}
|
||||
|
||||
# Required for WebSocket upgrade
|
||||
transport http {
|
||||
# If WeeChat relay uses a self-signed cert on localhost,
|
||||
# disable verification for the backend connection
|
||||
# tls_insecure_skip_verify
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
# Security headers
|
||||
header {
|
||||
X-Content-Type-Options nosniff
|
||||
X-Frame-Options DENY
|
||||
Referrer-Policy strict-origin-when-cross-origin
|
||||
}
|
||||
|
||||
# Optional: enable compression for static assets
|
||||
encode gzip
|
||||
}
|
||||
|
||||
|
||||
# ── Local / LAN setup (no domain, plain HTTP) ────────────────────────────────
|
||||
# If you're running on a LAN and don't have a domain, use this instead.
|
||||
# Note: browsers will require ws:// (not wss://) and you must uncheck TLS
|
||||
# in Cathode's connect screen.
|
||||
#
|
||||
# :8080 {
|
||||
# root * /var/www/cathode
|
||||
# file_server
|
||||
#
|
||||
# handle /api* {
|
||||
# reverse_proxy localhost:9000
|
||||
# }
|
||||
# }
|
||||
@@ -0,0 +1,89 @@
|
||||
# Apache VirtualHost config for Cathode
|
||||
# Drop in /etc/apache2/sites-available/cathode.conf
|
||||
# Enable with: sudo a2ensite cathode
|
||||
#
|
||||
# Required modules:
|
||||
# sudo a2enmod ssl proxy proxy_http proxy_wstunnel rewrite headers
|
||||
#
|
||||
# For TLS certs use certbot:
|
||||
# sudo certbot --apache -d cathode.example.com
|
||||
|
||||
# HTTP → HTTPS redirect
|
||||
<VirtualHost *:80>
|
||||
ServerName cathode.example.com
|
||||
Redirect permanent / https://cathode.example.com/
|
||||
</VirtualHost>
|
||||
|
||||
<VirtualHost *:443>
|
||||
ServerName cathode.example.com
|
||||
|
||||
# TLS (certbot will fill these in, or provide your own)
|
||||
SSLEngine on
|
||||
SSLCertificateFile /etc/letsencrypt/live/cathode.example.com/fullchain.pem
|
||||
SSLCertificateKeyFile /etc/letsencrypt/live/cathode.example.com/privkey.pem
|
||||
|
||||
# Modern TLS
|
||||
SSLProtocol -all +TLSv1.2 +TLSv1.3
|
||||
SSLHonorCipherOrder off
|
||||
|
||||
# Serve Cathode static files
|
||||
DocumentRoot /var/www/cathode
|
||||
<Directory /var/www/cathode>
|
||||
Options -Indexes +FollowSymLinks
|
||||
AllowOverride None
|
||||
Require all granted
|
||||
</Directory>
|
||||
|
||||
# Proxy WeeChat relay API — REST and WebSocket
|
||||
# WeeChat listens on localhost:9000 — adjust if needed
|
||||
|
||||
# Enable proxy for this vhost
|
||||
ProxyRequests off
|
||||
|
||||
# WebSocket proxy: must come before the plain HTTP proxy rule
|
||||
# Apache uses mod_proxy_wstunnel for WebSocket upgrades
|
||||
RewriteEngine on
|
||||
RewriteCond %{HTTP:Upgrade} =websocket [NC]
|
||||
RewriteRule ^/api(.*) ws://localhost:9000/api$1 [P,L]
|
||||
|
||||
# Plain HTTP proxy for REST requests to /api
|
||||
ProxyPass /api http://localhost:9000/api
|
||||
ProxyPassReverse /api http://localhost:9000/api
|
||||
|
||||
# Pass real client IP
|
||||
ProxyPreserveHost on
|
||||
RequestHeader set X-Real-IP "%{REMOTE_ADDR}s"
|
||||
|
||||
# Timeouts for long-lived WebSocket connections
|
||||
ProxyTimeout 3600
|
||||
|
||||
# Security headers
|
||||
Header always set X-Content-Type-Options "nosniff"
|
||||
Header always set X-Frame-Options "DENY"
|
||||
Header always set Referrer-Policy "strict-origin-when-cross-origin"
|
||||
|
||||
# Logging
|
||||
ErrorLog ${APACHE_LOG_DIR}/cathode_error.log
|
||||
CustomLog ${APACHE_LOG_DIR}/cathode_access.log combined
|
||||
</VirtualHost>
|
||||
|
||||
|
||||
# ── Local / LAN setup (no domain, plain HTTP) ────────────────────────────────
|
||||
# If you're on a LAN without a domain, use this simpler block.
|
||||
# Cathode connect screen: uncheck TLS, use ws:// (port 8080 here).
|
||||
#
|
||||
# <VirtualHost *:8080>
|
||||
# DocumentRoot /var/www/cathode
|
||||
# <Directory /var/www/cathode>
|
||||
# Options -Indexes
|
||||
# Require all granted
|
||||
# </Directory>
|
||||
#
|
||||
# ProxyRequests off
|
||||
# RewriteEngine on
|
||||
# RewriteCond %{HTTP:Upgrade} =websocket [NC]
|
||||
# RewriteRule ^/api(.*) ws://localhost:9000/api$1 [P,L]
|
||||
# ProxyPass /api http://localhost:9000/api
|
||||
# ProxyPassReverse /api http://localhost:9000/api
|
||||
# ProxyTimeout 3600
|
||||
# </VirtualHost>
|
||||
@@ -0,0 +1,100 @@
|
||||
# nginx.conf (or drop in /etc/nginx/sites-available/cathode)
|
||||
#
|
||||
# This config:
|
||||
# 1. Serves the Cathode static files at the root
|
||||
# 2. Proxies /api/* to WeeChat's relay with WebSocket support
|
||||
# 3. Handles TLS termination (you must provide your own certs, or use
|
||||
# certbot: sudo certbot --nginx -d cathode.example.com)
|
||||
#
|
||||
# Replace cathode.example.com and cert paths as needed.
|
||||
|
||||
server {
|
||||
listen 80;
|
||||
server_name cathode.example.com;
|
||||
|
||||
# Redirect all HTTP → HTTPS
|
||||
return 301 https://$host$request_uri;
|
||||
}
|
||||
|
||||
server {
|
||||
listen 443 ssl http2;
|
||||
server_name cathode.example.com;
|
||||
|
||||
# TLS certificates (use certbot or provide your own)
|
||||
ssl_certificate /etc/letsencrypt/live/cathode.example.com/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/cathode.example.com/privkey.pem;
|
||||
|
||||
# Modern TLS settings
|
||||
ssl_protocols TLSv1.2 TLSv1.3;
|
||||
ssl_prefer_server_ciphers off;
|
||||
ssl_session_cache shared:SSL:10m;
|
||||
ssl_session_timeout 1d;
|
||||
|
||||
# Serve Cathode static files
|
||||
root /var/www/cathode;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ =404;
|
||||
}
|
||||
|
||||
# Proxy WeeChat relay API — REST and WebSocket
|
||||
# WeeChat listens on localhost:9000 — adjust if needed
|
||||
location /api {
|
||||
|
||||
proxy_pass http://localhost:9000;
|
||||
|
||||
# Required for WebSocket upgrade
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
|
||||
# Standard proxy headers
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
|
||||
# WebSocket connections can be long-lived — raise the timeouts
|
||||
proxy_read_timeout 3600s;
|
||||
proxy_send_timeout 3600s;
|
||||
proxy_connect_timeout 10s;
|
||||
|
||||
# Disable buffering for real-time streaming
|
||||
proxy_buffering off;
|
||||
}
|
||||
|
||||
# Security headers
|
||||
add_header X-Content-Type-Options nosniff always;
|
||||
add_header X-Frame-Options DENY always;
|
||||
add_header Referrer-Policy strict-origin-when-cross-origin always;
|
||||
|
||||
# Compression
|
||||
gzip on;
|
||||
gzip_types text/css application/javascript text/plain;
|
||||
gzip_min_length 1024;
|
||||
}
|
||||
|
||||
|
||||
# ── Local / LAN setup (no domain, plain HTTP) ────────────────────────────────
|
||||
# If you're on a LAN without a domain, use this simpler block.
|
||||
# Cathode connect screen: uncheck TLS, use ws:// (port 8080 here).
|
||||
#
|
||||
# server {
|
||||
# listen 8080;
|
||||
#
|
||||
# root /var/www/cathode;
|
||||
# index index.html;
|
||||
#
|
||||
# location / {
|
||||
# try_files $uri $uri/ =404;
|
||||
# }
|
||||
#
|
||||
# location /api {
|
||||
# proxy_pass http://localhost:9000;
|
||||
# proxy_http_version 1.1;
|
||||
# proxy_set_header Upgrade $http_upgrade;
|
||||
# proxy_set_header Connection "upgrade";
|
||||
# proxy_read_timeout 3600s;
|
||||
# proxy_buffering off;
|
||||
# }
|
||||
# }
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
Vendored
+2
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user