mio/docs/taolun.md

Project Discussion

Requirements

1. Two-column layout: Note list on the left, editor/preview on the right
2. SQLite storage: Using libsql client
3. Markdown support: Render Markdown content
4. Glow-like effect: Terminal Markdown rendering

Technical Issues and Solutions

OpenTUI Markdown Component Issue

Problem: OpenTUI's <markdown> component could not render styles correctly (tried multiple methods, all failed)

Solution: Implement a custom Markdown parser using OpenTUI's <text> components for manual rendering

Textarea Wrap Issue

Problem: Default wrapMode in textarea React types is missing

Solution: Make textarea usable by setting focused attribute, access EditBufferRenderable's wrapMode option through underlying access

Preview Mode Line Break Issue

Problem: Line breaks from edit mode not showing in preview

Solution: Handle empty lines in renderMarkdown function, add <text>{" "}</text>

Code Block Rendering

Problem: Indentation rendering issues inside ``` code blocks

Solution: Implement code block detection and rendering logic, render each code line separately

Multi-select Feature

Problem: OpenTUI's onMouseDown event doesn't include ctrlKey/shiftKey modifier info, and useKeyboard couldn't capture modifier keys

Solution:

• Tried using useKeyboard to listen for modifier keys but failed (terminal may not send separate modifier key events)
• Switched to double-click "selection mode" approach: double-click any note to toggle selection mode, click to multi-select in selection mode

Cross-platform Database Path

Problem: Hardcoded database path not compatible across platforms

Solution: Implement getDbPath() function to use ~/.config/mio/cache.db for all platforms

Unresolved Issues

1. Multi-select feature: Double-click selection mode experience is not ideal, keyboard modifier key approach couldn't be implemented
2. TypeScript type errors: Some type errors in NoteEditor (bold attribute doesn't exist, etc.)

Gitea Runner and Release Workflow

Runner Configuration

• Image: hub.gaomia.site/titor/bun:latest (based on Debian bookworm with Bun installed)
• Default label: ubuntu-latest
• Issue: Custom image doesn't have git pre-installed

Solution: Install git in workflow:

- name: Install git
  run: apt-get update && apt-get install -y git

Release Workflow (Auto-changelog)

Trigger on push tag (v*):

1. Clone repository using token
2. Install dependencies: bun install
3. Build: bun run build
4. Create release and upload source archive:

TAG_NAME="${GITHUB_REF#refs/tags/}"
PREV_TAG=$(git describe --tags --abbrev=0 HEAD^ 2>/dev/null || echo "")
CHANGES=$(git log --pretty=format:"- %s (%h)" "$PREV_TAG..HEAD" 2>/dev/null || echo "")

# Create release via Gitea API
curl -X POST "https://hub.gaomia.site/api/v1/repos/titor/mio/releases" \
  -H "Authorization: token ${GITEA_TOKEN}" \
  -d "{\"tag_name\":\"${TAG_NAME}\",\"name\":\"${TAG_NAME}\",\"body\":\"${CHANGES}\"}"

Cross-platform Build Limitation

• Bun's bun build --compile runs on Linux runner → can only produce Linux executable
• Cannot compile Windows/macOS binaries on Linux environment
• Workaround: Publish source code archive instead of binaries

Bun Compilation Bug with Native Modules

Problem: Using @libsql/client (native SQLite binding) causes runtime error:

error: Cannot find module '@libsql/win32-x64-msvc' from 'B:\~BUN\root\mio.exe'

This is a known bug in Bun 1.3.4+ with native modules.

Solution: Replace @libsql/client with sql.js (pure JavaScript SQLite implementation):

1. Replace dependency in package.json
2. Rewrite db.ts to use sql.js API (async initialization, different query syntax)
3. Update all function calls in index.tsx and NoteEditor.tsx

Result: bun build --compile works correctly on all platforms.

Build Instructions

npm run dev    # Development mode
npm run build  # Build to mio.exe

Database location: ~/.config/mio/cache.db