feat: add advanced customization and chat features

[forketyfork]

Summary

Implements comprehensive customization features based on user feedback requesting:

1. Bubble configuration options for D&D and roleplay scenarios
2. Date/time handling like real chat conversations

Changes

New Features

• Per-speaker custom colors - Configure speaker colors via frontmatter
• Speaker avatars/icons - Add emoji or vault images next to speaker names
• Inline timestamps - [[John]] [14:32]: Hello! syntax
• Date separators - --- 2024-01-15 --- or --- January 15, 2024 ---
• Speaker groups/sides - Control left/right alignment by groups (for D&D parties vs enemies)
• Global appearance settings - Bubble width, corner radius, compact mode, custom owner color

Architecture Refactor

Refactored the monolithic main.ts into modular components:

• src/parser/ - Parsing logic (FrontmatterParser, TimestampParser, DateSeparatorParser, TranscriptParser)
• src/config/ - Configuration resolution (ConfigResolver, SpeakerResolver)
• src/renderer/ - DOM rendering (BubbleRenderer, DateSeparatorRenderer)
• src/settings/ - Settings UI (SettingsTab)
• src/types.ts - All TypeScript interfaces

Testing

Added 82 unit tests covering all new functionality with full coverage of parsers and config resolvers.

Example Usage

---
tags: [transcript]
speech-bubbles:
  speakers:
    DM:
      color: "#8B5CF6"
      icon: "🎲"
    Gandalf:
      color: "#9CA3AF"
      icon: "🧙"
  sides:
    left: ["DM"]
    right: ["Gandalf", "Frodo"]
---

--- January 15, 2024 ---

[[DM]] [19:00]: Welcome to Middle-earth!
[[Gandalf]] [19:01]: You shall not pass!

[Copilot]

Pull request overview

This PR adds comprehensive customization features for speech bubbles, including per-speaker colors and icons, timestamp support, date separators, and speaker group positioning. The implementation refactors the monolithic main.ts into a modular architecture with separate parser, config, and renderer components, all backed by 82 unit tests.

Changes:

• Added per-speaker customization via frontmatter (colors, emoji/image icons)
• Implemented inline timestamps and date separators for chat-like conversations
• Added speaker groups/sides for D&D and roleplay scenarios
• Introduced global appearance settings (bubble width, radius, compact mode, custom owner color)
• Refactored codebase into modular components with full test coverage

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/types.ts	Defines all TypeScript interfaces for settings, speaker config, parsed data structures
src/styles.src.css	Adds CSS custom properties and styles for new features (avatars, timestamps, date separators, compact mode)
src/settings/SettingsTab.ts	Implements settings UI with new appearance controls
src/renderer/DateSeparatorRenderer.ts	Creates DOM elements for date separator pills
src/renderer/BubbleRenderer.ts	Renders speech bubbles with avatars, timestamps, and custom styling
src/parser/TranscriptParser.ts	Parses transcript lines into bubbles, date separators, or regular text
src/parser/TimestampParser.ts	Parses and formats [HH:MM] timestamps
src/parser/FrontmatterParser.ts	Parses speech-bubbles frontmatter configuration
src/parser/DateSeparatorParser.ts	Parses date separator syntax
src/main.ts	Refactored to orchestrate modular components instead of implementing all logic
src/config/SpeakerResolver.ts	Resolves speaker colors, sides, and icons from merged configuration
src/config/ConfigResolver.ts	Merges global settings with frontmatter config
src/colorUtils.ts	Adds color manipulation utilities (lightenColor, hexToSpeakerColor)
src/tests/*	Comprehensive unit tests for all parser and config modules
README.md	Documents new features with examples
CLAUDE.md	Updates architecture documentation and inline styles exception

Comments suppressed due to low confidence (1)

src/main.ts:1

• Using as never to bypass type checking is a code smell. This suggests the plugin parameter type doesn't match what PluginSettingTab expects. Consider properly typing this or using a more specific type assertion that documents why the cast is necessary.

import {

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 71e02b15c4

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".