Tranquillo Frontend

A desktop front-end for Tranquillo (project codename FaeCord), a self-hostable FOSS alternative to x-cord. This project aims to minimize dependencies. The front end rederer relies entirely on vanilla web tech (excluding TypeScript).

Environment Setup

The typescript is compiled into the dist folder with tsc. There are 3 tsc configs one each for main, preload, and renderer. The theory of operation is that tsc compiles the typescript files into JavaScript appropriate for node on the main process, and web browsers for the renderer.

Deno is currently planned to be used for code linting and formatting. Currently, only formatting has been run. Linting... has not.

Versioning is based on Semantic Versioning. Major.Minor.Patch

• Major increments with breaking changes. Includes non-backwards compatible IPC changes, configuration changes, major restructuring, or big user-facing changes (whole UI updates)
• Minor increments with backward compatible changes. Includes new features, settings, or IPCs.
• Patch increments where nothing else fits. Bug/crash fixes, and security updates. If a higher-level number changes, all numbers to the right reset to 0. Version will change based on releases.

Prerequisites

• node.js >= 22.22.2 (older versions untested but may work)
• npm >= 10.9.8 (older versions untested but may work)

Commands (linux-centric)

grab the source

git clone https://git.chopknee.net/brian/tranquillo-frontend

move into the source directory

cd tranquillo-frontend

install dependencies

npm install

run the development environment

npm run dev

In dev mode, changes to source files cause varying kinds of reloads.

• Modifications to the main process cause the entire application to reload.
• Modifications to the renderer process cause only the page to reload.
• Changes to assets such as css, images, or the index.html file will cause the page to reload.

run the production environment

npm run start

run the packager

npm run package

This creates a package compatible with the dev system.

TODO

Short term todo list

• ✔️ Initial framework and lay out of UI
• ✔️ Rework server addition and login
• ✔️ basic rendering
• ✔️ Fix WebSocket comms
• ✔️ get request proxying
• ✔️ server-oriented state tracking
• ✔️ message sending
• ✔️ better multi-server state management
• ✔️ Handle ws heartbeat
• ✔️ Convert to TypeScript
• ✔️ Actual error handling for server auth issues
• ✔️ Message editing
• ✔️ Work out pagination
• ✔️ Markdown rendering
• ✔️ Add plugins for creating a distributable build for Windows/Linux (maybe mac?)
• ~ voice/video calls (voice partially implemented)
• ❌ Permissions handling
• ❌ Settings windows and popups
• ❌ Context menus
• ❌ Emoticons
• ❌ Reactions
• ❌ Reply-to messages
• ❌ Pop-out chat windows
• ❌ Smoke testing
• ❌ Smoke break
• ❌ Automated linting with deno
• ❌ badging channels with unread messages
• ❌ desktop notifications
• ❌ Look in to Deno Desktop as a possibe replacement for Node/Electron

Roadmap

Rough long-term plan

• packaging and publishing
• git automated builds
• supporting invite links

Sources of Headache

• NodeJs

Feature Wishlist

A wishlist of features that may not be obvious from the current design.

• chat timestamps - converts to device local time when rendered
• unit "stamps" - converts to regional preferred units when rendered
• comprehensive emoji picker - allowing the selection of all emoji for the app's supported encoding scheme
• code embeds

Guide

./scripts

• contains scripts for deployment and debugging

./src

• contains all scripts and content for the client
• most work is done here

./src/main

• contains all scripts for the main process

./src/preload

• contains ipc passthrough functions for connecting main to renderer

./src/renderer

• contains all scripts and content for the renderer

./src/types

• shared types between the main, renderer, and preload