diff --git a/apps/web/src/branding.ts b/apps/web/src/branding.ts index bffd983815..e8fc7fd372 100644 --- a/apps/web/src/branding.ts +++ b/apps/web/src/branding.ts @@ -2,3 +2,5 @@ export const APP_BASE_NAME = "T3 Code"; export const APP_STAGE_LABEL = import.meta.env.DEV ? "Dev" : "Alpha"; export const APP_DISPLAY_NAME = `${APP_BASE_NAME} (${APP_STAGE_LABEL})`; export const APP_VERSION = import.meta.env.APP_VERSION || "0.0.0"; +export const GITHUB_REPO_URL = "https://github.com/pingdotgg/t3code"; +export const GITHUB_REPO_SLUG = "pingdotgg/t3code"; diff --git a/apps/web/src/components/ChangelogDialog.tsx b/apps/web/src/components/ChangelogDialog.tsx new file mode 100644 index 0000000000..1dbcd81e2b --- /dev/null +++ b/apps/web/src/components/ChangelogDialog.tsx @@ -0,0 +1,334 @@ +import { useQuery } from "@tanstack/react-query"; +import { ExternalLinkIcon, LoaderCircleIcon } from "lucide-react"; +import { useCallback, useEffect, useRef, useState } from "react"; + +import { APP_VERSION, GITHUB_REPO_URL } from "~/branding"; +import { changelogQueryOptions } from "~/lib/changelogReactQuery"; +import { cn, formatRelativeTime } from "~/lib/utils"; +import { openExternalUrl } from "~/nativeApi"; +import { GitHubIcon } from "./Icons"; +import { + Dialog, + DialogDescription, + DialogHeader, + DialogPanel, + DialogPopup, + DialogTitle, +} from "./ui/dialog"; + +interface ChangelogDialogProps { + open: boolean; + onOpenChange: (open: boolean) => void; + highlightVersion?: string | null | undefined; +} + +/** + * Parse a single changelog line like: + * "fix(web): add pointer cursor by @binbandit in https://github.com/.../pull/1220" + * into structured parts for rich rendering. + */ +interface ChangelogEntry { + description: string; + author: string | null; + prNumber: string | null; + prUrl: string | null; +} + +function parseChangelogLine(line: string): ChangelogEntry { + const cleaned = line.replace(/^\*\s*/, "").trim(); + + const authorMatch = cleaned.match(/ by @([\w-]+)/); + const prMatch = cleaned.match(/ in (https:\/\/github\.com\/[\w-]+\/[\w-]+\/pull\/(\d+))$/); + + let description = cleaned; + if (authorMatch) { + description = description.slice(0, authorMatch.index).trim(); + } + if (!authorMatch && prMatch) { + description = description.slice(0, prMatch.index).trim(); + } + + return { + description, + author: authorMatch ? authorMatch[1]! : null, + prNumber: prMatch ? prMatch[2]! : null, + prUrl: prMatch ? prMatch[1]! : null, + }; +} + +interface ParsedSection { + title: string; + entries: ChangelogEntry[]; +} + +function parseReleaseBody(body: string): { + sections: ParsedSection[]; + fullChangelogUrl: string | null; +} { + const lines = body.split("\n"); + const sections: ParsedSection[] = []; + let currentSection: ParsedSection | null = null; + let fullChangelogUrl: string | null = null; + + for (const line of lines) { + const trimmed = line.trim(); + + if (trimmed.startsWith("**Full Changelog**:")) { + const urlMatch = trimmed.match(/https:\/\/[^\s]+/); + if (urlMatch) fullChangelogUrl = urlMatch[0]!; + continue; + } + + if (trimmed.startsWith("## ")) { + currentSection = { title: trimmed.replace(/^##\s*/, ""), entries: [] }; + sections.push(currentSection); + continue; + } + + if (trimmed.startsWith("* ") && currentSection) { + currentSection.entries.push(parseChangelogLine(trimmed)); + } + } + + return { sections, fullChangelogUrl }; +} + +function ChangelogEntryItem({ entry }: { entry: ChangelogEntry }) { + return ( +
  • + +
    + {entry.description} + {entry.author && ( + + )} + {entry.prNumber && entry.prUrl && ( + + )} +
    +
    • + ); +} + +function ReleaseCard({ + tagName, + publishedAt, + body, + htmlUrl, + isCurrent, + isHighlighted, + innerRef, +}: { + tagName: string; + publishedAt: string | null; + body: string | null; + htmlUrl: string; + isCurrent: boolean; + isHighlighted: boolean; + innerRef?: ((el: HTMLDivElement | null) => void) | undefined; +}) { + const parsed = body ? parseReleaseBody(body) : null; + const hasParsedContent = parsed && parsed.sections.some((s) => s.entries.length > 0); + + return ( +
    +
    + {tagName} + {isCurrent && ( + + current + + )} + + {formatRelativeTime(publishedAt)} + + +
    + + {hasParsedContent + ? parsed.sections.map((section) => ( +
    +

    + {section.title} +

    + +
    + )) + : body && ( +

    + {body.slice(0, 200)} + {body.length > 200 ? "…" : ""} +

    + )} + + {!body &&

    No release notes.

    } + + {parsed?.fullChangelogUrl && ( + + )} +
    + ); +} + +function isVersionMatch(tagName: string, target: string): boolean { + const version = tagName.replace(/^v/, ""); + return tagName === target || version === target.replace(/^v/, ""); +} + +export function ChangelogDialog({ open, onOpenChange, highlightVersion }: ChangelogDialogProps) { + const { + data: releases, + isLoading, + error, + } = useQuery({ ...changelogQueryOptions(), enabled: open }); + const [activeTag, setActiveTag] = useState(null); + const cardRefs = useRef>(new Map()); + + const scrollToVersion = useCallback((tag: string) => { + setActiveTag(tag); + const el = cardRefs.current.get(tag); + el?.scrollIntoView({ behavior: "smooth", block: "start" }); + }, []); + + // Scroll to highlighted version on open + useEffect(() => { + if (!open || !releases?.length || !highlightVersion) return; + const match = releases.find((r) => isVersionMatch(r.tag_name, highlightVersion)); + if (match) { + // Defer to next frame so dialog has rendered + requestAnimationFrame(() => scrollToVersion(match.tag_name)); + } + }, [open, releases, highlightVersion, scrollToVersion]); + + return ( + + + + Changelog + Release history for T3 Code + + + {isLoading && ( +
    + +
    + )} + + {error && ( +
    + {error.message || "Failed to load releases. Check your internet connection."} +
    + )} + + {releases && releases.length > 0 && ( +
    + {/* Version sidebar */} + + + {/* Release cards */} + + {releases.map((release) => { + const version = release.tag_name.replace(/^v/, ""); + const isCurrent = version === APP_VERSION || release.tag_name === APP_VERSION; + const isHighlighted = + !!highlightVersion && isVersionMatch(release.tag_name, highlightVersion); + + return ( + { + if (el) cardRefs.current.set(release.tag_name, el); + else cardRefs.current.delete(release.tag_name); + }} + /> + ); + })} + +
    + )} + +
    + +
    +     +     + ); +} diff --git a/apps/web/src/components/Icons.tsx b/apps/web/src/components/Icons.tsx index 7d210fa173..35748af4b9 100644 --- a/apps/web/src/components/Icons.tsx +++ b/apps/web/src/components/Icons.tsx @@ -309,3 +309,64 @@ export const OpenCodeIcon: Icon = (props) => ( ); + +const ROCKET_BODY = + "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09zM12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"; +const ROCKET_FINS = "M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"; + +/** Rocket icon with optional bottom-to-top fill overlay for download progress (0–100). */ +export function RocketUpdateIcon({ + fillPercent, + ...props +}: SVGProps & { fillPercent?: number | null }) { + const clipId = useId(); + const showFill = typeof fillPercent === "number"; + + return ( + + {showFill && ( + + + + + + )} + + + {showFill && ( + + + + + )} + + ); +} diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx index 923c30b2f9..221553a1ec 100644 --- a/apps/web/src/components/Sidebar.tsx +++ b/apps/web/src/components/Sidebar.tsx @@ -5,7 +5,6 @@ import { FolderIcon, GitPullRequestIcon, PlusIcon, - RocketIcon, SettingsIcon, SquarePenIcon, TerminalIcon, @@ -45,7 +44,13 @@ import { } from "../appSettings"; import { isElectron } from "../env"; import { APP_STAGE_LABEL, APP_VERSION } from "../branding"; -import { isLinuxPlatform, isMacPlatform, newCommandId, newProjectId } from "../lib/utils"; +import { + formatRelativeTime, + isLinuxPlatform, + isMacPlatform, + newCommandId, + newProjectId, +} from "../lib/utils"; import { useStore } from "../store"; import { shortcutLabelForCommand } from "../keybindings"; import { derivePendingApprovals, derivePendingUserInputs } from "../session-logic"; @@ -55,6 +60,7 @@ import { readNativeApi } from "../nativeApi"; import { useComposerDraftStore } from "../composerDraftStore"; import { useHandleNewThread } from "../hooks/useHandleNewThread"; import { selectThreadTerminalState, useTerminalStateStore } from "../terminalStateStore"; +import { RocketUpdateIcon } from "./Icons"; import { toastManager } from "./ui/toast"; import { getArm64IntelBuildWarningDescription, @@ -62,8 +68,8 @@ import { getDesktopUpdateButtonTooltip, isDesktopUpdateButtonDisabled, resolveDesktopUpdateButtonAction, + resolveDesktopUpdateButtonVisualState, shouldShowArm64IntelBuildWarning, - shouldHighlightDesktopUpdateError, shouldShowDesktopUpdateButton, shouldToastDesktopUpdateActionResult, } from "./desktopUpdate.logic"; @@ -120,16 +126,6 @@ const SIDEBAR_LIST_ANIMATION_OPTIONS = { } as const; const loadedProjectFaviconSrcs = new Set(); -function formatRelativeTime(iso: string): string { - const diff = Date.now() - new Date(iso).getTime(); - const minutes = Math.floor(diff / 60_000); - if (minutes < 1) return "just now"; - if (minutes < 60) return `${minutes}m ago`; - const hours = Math.floor(minutes / 60); - if (hours < 24) return `${hours}h ago`; - return `${Math.floor(hours / 24)}d ago`; -} - interface TerminalStatusIndicator { label: "Terminal process running"; colorClass: string; @@ -1497,7 +1493,7 @@ export default function Sidebar() { const desktopUpdateTooltip = desktopUpdateState ? getDesktopUpdateButtonTooltip(desktopUpdateState) - : "Update available"; + : ""; const desktopUpdateButtonDisabled = isDesktopUpdateButtonDisabled(desktopUpdateState); const desktopUpdateButtonAction = desktopUpdateState @@ -1509,17 +1505,12 @@ export default function Sidebar() { desktopUpdateState && showArm64IntelBuildWarning ? getArm64IntelBuildWarningDescription(desktopUpdateState) : null; + const desktopUpdateVisual = desktopUpdateState + ? resolveDesktopUpdateButtonVisualState(desktopUpdateState) + : null; const desktopUpdateButtonInteractivityClasses = desktopUpdateButtonDisabled ? "cursor-not-allowed opacity-60" - : "hover:bg-accent hover:text-foreground"; - const desktopUpdateButtonClasses = - desktopUpdateState?.status === "downloaded" - ? "text-emerald-500" - : desktopUpdateState?.status === "downloading" - ? "text-sky-400" - : shouldHighlightDesktopUpdateError(desktopUpdateState) - ? "text-rose-500 animate-pulse" - : "text-amber-500 animate-pulse"; + : ""; const newThreadShortcutLabel = shortcutLabelForCommand(keybindings, "chat.newLocal") ?? shortcutLabelForCommand(keybindings, "chat.new"); @@ -1624,36 +1615,49 @@ export default function Sidebar() { ); + const downloadPercent = + desktopUpdateState?.status === "downloading" && + typeof desktopUpdateState.downloadPercent === "number" + ? desktopUpdateState.downloadPercent + : null; + + const updateButton = + showDesktopUpdateButton && desktopUpdateVisual ? ( + + + + + } + /> + {desktopUpdateTooltip} + + ) : null; + return ( <> {isElectron ? ( <> {wordmark} - {showDesktopUpdateButton && ( - - - - - } - /> - {desktopUpdateTooltip} - - )} +
    {updateButton}
     ) : ( - + {wordmark} + {updateButton} )} @@ -1664,7 +1668,8 @@ export default function Sidebar() { Intel build on Apple Silicon {arm64IntelBuildWarningDescription} - {desktopUpdateButtonAction !== "none" ? ( + {desktopUpdateButtonAction === "download" || + desktopUpdateButtonAction === "install" ? ( + + openExternalUrl(GITHUB_REPO_URL)} + > + + + } + /> + Open GitHub repository + + } /> + +