Skip to content

Persist Ask thread sidebar width + render markdown code blocks with syntax highlighting #8

@jstuart0

Description

@jstuart0

Goal

Two small improvements to the `/ask` page that together make long sessions much more usable.

Part A — Resizable, persisted sidebar

Today the thread sidebar is a fixed `w-60`. For long thread titles that's cramped; for short titles it's wasted space.

  • Make the sidebar resizable with a drag handle on the right edge.
  • Persist the width in `useUiPrefsStore` (new field `askSidebarWidth`, default 240px).
  • Clamp between 180 and 480 px.

Part B — Syntax-highlighted code blocks

Assistant replies render through `MarkdownContent`, which shows fenced ```ts / ```bash blocks as plain `

`. Add real syntax highlighting.

  • Install `shiki` (tree-shakeable, already modern).
  • Wire it into `MarkdownContent.tsx` via a custom `code` component renderer.
  • Support at least: `ts`, `js`, `tsx`, `sh`, `json`, `yaml`, `sql`, `python`, `go`.
  • Pick a theme that reads in both light and dark (e.g. `github-dark-dimmed` / `github-light` via the existing theme toggle).

Acceptance criteria

  • Sidebar resizes smoothly, width persists across reloads.
  • Fenced code blocks in assistant replies render with colors that match the current theme.
  • No runtime flash — async-load highlighter only when an Ask reply is rendered on-screen.

Metadata

Metadata

Assignees

No one assigned

    Labels

    askAsk assistant: global chat, resolver, streaminggood first issueGood for newcomersuxUI polish, accessibility, mobile

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions