[v5] feat(web): Add integrated changelog system

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Added progress bar when navigating between pages. [#1204](https://github.com/sourcebot-dev/sourcebot/pull/1204)
+- Added a integrated changelog into the sidebar. [#1227](https://github.com/sourcebot-dev/sourcebot/pull/1227)
 
 ### Changed
 - Redesigned the app layout with a new collapsible sidebar navigation, replacing the previous top navigation bar. [#1097](https://github.com/sourcebot-dev/sourcebot/pull/1097)

packages/db/prisma/migrations/20260525214409_add_changelog_table/migration.sql

@@ -0,0 +1,15 @@
+-- CreateTable
+CREATE TABLE "ChangelogEntry" (
+    "slug" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "publishedAt" TIMESTAMP(3) NOT NULL,
+    "summary" TEXT NOT NULL,
+    "version" TEXT NOT NULL,
+    "bodyMarkdown" TEXT NOT NULL,
+    "fetchedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "ChangelogEntry_pkey" PRIMARY KEY ("slug")
+);
+
+-- CreateIndex
+CREATE INDEX "ChangelogEntry_publishedAt_idx" ON "ChangelogEntry"("publishedAt");

packages/db/prisma/schema.prisma

@@ -623,3 +623,19 @@ model OAuthToken {
   createdAt  DateTime    @default(now())
   lastUsedAt DateTime?
 }
+
+/// Local cache of changelog entries fetched from the public feed at
+/// `CHANGELOG_FEED_URL`. Shared across all users of an instance.
+model ChangelogEntry {
+  slug         String   @id
+  title        String
+  publishedAt  DateTime
+  summary      String
+  version      String
+  bodyMarkdown String
+
+  /// Updated each time the entry is upserted from the feed.
+  fetchedAt DateTime @default(now()) @updatedAt
+
+  @@index([publishedAt])
+}

packages/shared/src/env.server.ts

@@ -221,6 +221,10 @@ const options = {
         // Misc UI flags
         SECURITY_CARD_ENABLED: booleanSchema.default('false'),
 
+        // Changelog feed
+        CHANGELOG_ENABLED: booleanSchema.default('true'),
+        CHANGELOG_FEED_URL: z.string().url().default('https://static.sourcebot.dev/changelog/index.json'),
+
         // EE License
         SOURCEBOT_EE_LICENSE_KEY: z.string().optional(),
         SOURCEBOT_EE_AUDIT_LOGGING_ENABLED: booleanSchema.default('true'),

packages/shared/src/index.client.ts

@@ -4,4 +4,10 @@ export {
 } from "./env.client.js";
 export {
     SOURCEBOT_VERSION,
-} from "./version.js";
+} from "./version.js";
+export {
+    parseVersion,
+    formatVersion,
+    compareVersions,
+} from "./versionUtils.js";
+export type { Version } from "./versionUtils.js";

packages/shared/src/index.server.ts

@@ -67,4 +67,10 @@ export {
 } from "./smtp.js";
 export {
     SOURCEBOT_VERSION,
-} from "./version.js";
+} from "./version.js";
+export {
+    parseVersion,
+    formatVersion,
+    compareVersions,
+} from "./versionUtils.js";
+export type { Version } from "./versionUtils.js";

packages/shared/src/versionUtils.ts

@@ -0,0 +1,36 @@
+const SEMVER_REGEX = /^v(\d+)\.(\d+)\.(\d+)$/;
+
+export type Version = {
+    major: number;
+    minor: number;
+    patch: number;
+};
+
+export const parseVersion = (version: string): Version | null => {
+    const match = version.match(SEMVER_REGEX);
+    if (!match) {
+        return null;
+    }
+    return {
+        major: parseInt(match[1]),
+        minor: parseInt(match[2]),
+        patch: parseInt(match[3]),
+    };
+};
+
+export const formatVersion = (version: Version): string => {
+    return `v${version.major}.${version.minor}.${version.patch}`;
+};
+
+/**
+ * Returns < 0 if `a < b`, 0 if equal, > 0 if `a > b`.
+ */
+export const compareVersions = (a: Version, b: Version): number => {
+    if (a.major !== b.major) {
+        return a.major - b.major;
+    }
+    if (a.minor !== b.minor) {
+        return a.minor - b.minor;
+    }
+    return a.patch - b.patch;
+};

packages/web/src/app/(app)/@sidebar/components/changelogEntryDialog.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import type { ChangelogEntryDto } from "@/features/changelog/listEntriesApi";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { ArrowUpRight } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
+import { compareVersions, parseVersion, SOURCEBOT_VERSION } from "@sourcebot/shared/client";
+
+const VIDEO_EXTENSIONS_RE = /\.(mp4|webm|ogg|mov)$/i;
+const ABSOLUTE_URL_RE = /^(?:[a-z][a-z0-9+\-.]*:|\/\/|#)/i;
+
+// Allow <video> + the attributes we'll set on it. rehypeSanitize otherwise strips them.
+const SANITIZE_SCHEMA = {
+    ...defaultSchema,
+    tagNames: [...(defaultSchema.tagNames ?? []), "video", "source"],
+    attributes: {
+        ...defaultSchema.attributes,
+        video: ["src", "controls", "poster", "width", "height", "className", "preload", "loop", "muted", "playsInline"],
+        source: ["src", "type"],
+    },
+};
+
+const buildUrlTransform = (entriesBaseUrl: string) => (url: string): string => {
+    if (ABSOLUTE_URL_RE.test(url)) {
+        return url;
+    }
+    try {
+        return new URL(url, entriesBaseUrl).toString();
+    } catch {
+        return url;
+    }
+};
+
+interface ZoomableImageProps {
+    src: string;
+    alt?: string | undefined;
+}
+
+const ZoomableImage = ({ src, alt }: ZoomableImageProps) => {
+    const [zoomed, setZoomed] = useState(false);
+    const [mounted, setMounted] = useState(false);
+
+    // Portal target is only available after mount.
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    // Intercept Escape during zoom so the changelog dialog doesn't close along with the zoom.
+    useEffect(() => {
+        if (!zoomed) {
+            return;
+        }
+        const handleKey = (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                e.stopPropagation();
+                setZoomed(false);
+            }
+        };
+        document.addEventListener("keydown", handleKey, true);
+        return () => document.removeEventListener("keydown", handleKey, true);
+    }, [zoomed]);
+
+    const overlay = (
+        <div
+            className={cn(
+                "fixed inset-0 z-[100] flex items-center justify-center bg-black/80 transition-opacity duration-200",
+                zoomed ? "opacity-100 pointer-events-auto cursor-zoom-out" : "opacity-0 pointer-events-none"
+            )}
+            onClick={() => setZoomed(false)}
+        >
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+                src={src}
+                alt={alt}
+                className={cn(
+                    "max-w-[90vw] max-h-[90vh] object-contain rounded-lg transition-transform duration-200",
+                    zoomed ? "scale-100" : "scale-95"
+                )}
+            />
+        </div>
+    );
+
+    return (
+        <>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+                src={src}
+                alt={alt}
+                className="cursor-zoom-in"
+                onClick={() => setZoomed(true)}
+            />
+            {mounted && createPortal(overlay, document.body)}
+        </>
+    );
+};
+
+interface ChangelogEntryDialogProps {
+    entry: ChangelogEntryDto | null;
+    entriesBaseUrl: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+
+export function ChangelogEntryDialog({ entry, entriesBaseUrl, open, onOpenChange }: ChangelogEntryDialogProps) {
+    const urlTransform = useMemo(() => buildUrlTransform(entriesBaseUrl), [entriesBaseUrl]);
+
+    const upgradeAvailable = useMemo(() => {
+        if (!entry) {
+            return false;
+        }
+        const entryVersion = parseVersion(entry.version);
+        const currentVersion = parseVersion(SOURCEBOT_VERSION);
+        if (!entryVersion || !currentVersion) {
+            return false;
+        }
+        return compareVersions(entryVersion, currentVersion) > 0;
+    }, [entry]);
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-2xl max-h-[90vh] overflow-hidden flex flex-col gap-0 p-0 focus:outline-none">
+                {entry && (
+                    <>
+                        <DialogHeader className="px-6 pt-4 pb-4 border-b space-y-1">
+                            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                <span>{format(new Date(entry.publishedAt), "MMM d")}</span>
+                                {upgradeAvailable && (
+                                    <>
+                                        <span>·</span>
+                                        <Tooltip>
+                                            <TooltipTrigger asChild>
+                                                <a
+                                                    href={`https://github.com/sourcebot-dev/sourcebot/releases/tag/${entry.version}`}
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                >
+                                                    <Badge className="bg-purple-500/20 text-purple-400 border-purple-500/30 hover:bg-purple-500/30 gap-0.5">
+                                                        Upgrade
+                                                        <ArrowUpRight className="h-3 w-3" />
+                                                    </Badge>
+                                                </a>
+                                            </TooltipTrigger>
+                                            <TooltipContent side="bottom">
+                                                <div className="grid grid-cols-[auto_auto] gap-x-3 gap-y-1 text-sm items-center">
+                                                    <span className="text-muted-foreground">Current version</span>
+                                                    <span className="font-mono text-[11px] bg-muted rounded px-1.5 py-0.5 justify-self-start">{SOURCEBOT_VERSION}</span>
+                                                    <span className="text-muted-foreground">Required version</span>
+                                                    <span className="font-mono text-[11px] bg-muted rounded px-1.5 py-0.5 justify-self-start">{entry.version}</span>
+                                                </div>
+                                            </TooltipContent>
+                                        </Tooltip>
+                                    </>
+                                )}
+                            </div>
+                            <DialogTitle className="sr-only">{entry.title}</DialogTitle>
+                        </DialogHeader>
+                        <div className="overflow-y-auto px-6 py-5">
+                            <div
+                                className={cn(
+                                    "prose dark:prose-invert max-w-none",
+                                    "prose-p:text-foreground prose-li:text-foreground prose-headings:text-foreground",
+                                    "prose-headings:mt-6 prose-p:my-3 prose-img:rounded-md prose-img:my-4 prose-hr:my-6",
+                                    "prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-h4:text-base",
+                                    "prose-headings:font-semibold",
+                                    "prose-p:text-sm prose-li:text-sm",
+                                    "prose-p:leading-normal prose-li:leading-normal",
+                                    "prose-li:my-1 prose-ul:my-1 prose-ol:my-1 prose-li:marker:text-foreground",
+                                    "prose-a:text-link prose-a:no-underline hover:prose-a:underline",
+                                    "prose-blockquote:not-italic prose-blockquote:font-normal",
+                                    "prose-code:before:content-none prose-code:after:content-none prose-code:font-normal",
+                                    "prose-code:bg-muted prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:text-xs",
+                                    "prose-pre:bg-muted prose-pre:text-foreground prose-pre:leading-snug",
+                                    "[&_video]:rounded-md [&_video]:my-4 [&_video]:w-full",
+                                    "[&>*:first-child]:mt-0"
+                                )}
+                            >
+                                <Markdown
+                                    remarkPlugins={[remarkGfm]}
+                                    rehypePlugins={[rehypeRaw, [rehypeSanitize, SANITIZE_SCHEMA]]}
+                                    urlTransform={urlTransform}
+                                    components={{
+                                        img: ({ src, alt }) => {
+                                            if (typeof src !== "string") {
+                                                return null;
+                                            }
+                                            if (VIDEO_EXTENSIONS_RE.test(src)) {
+                                                return <video src={src} controls className="aspect-video" />;
+                                            }
+                                            return <ZoomableImage src={src} alt={alt} />;
+                                        },
+                                    }}
+                                >
+                                    {entry.bodyMarkdown}
+                                </Markdown>
+                            </div>
+                        </div>
+                    </>
+                )}
+            </DialogContent>
+        </Dialog>
+    );
+}

packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx

@@ -54,7 +54,6 @@ export async function DefaultSidebar() {
             session={session}
             collapsible="icon"
             isValidLicenseActive={licenseActive}
-            isOwner={isOwner}
             headerContent={
                 <Nav
                     isSettingsNotificationVisible={isSettingsNotificationVisible}

packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx

@@ -6,8 +6,6 @@ import { SidebarBase } from "../sidebarBase";
 import { Nav } from "./nav";
 import { SettingsSidebarHeader } from "./header";
 import { isValidLicenseActive } from "@/lib/entitlements";
-import { getAuthContext } from "@/middleware/withAuth";
-import { OrgRole } from "@prisma/client";
 
 export async function SettingsSidebar() {
     const session = await auth();
@@ -19,15 +17,11 @@ export async function SettingsSidebar() {
 
     const licenseActive = await isValidLicenseActive();
 
-    const authContext = await getAuthContext();
-    const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;
-
     return (
         <SidebarBase
             session={session}
             collapsible="none"
             isValidLicenseActive={licenseActive}
-            isOwner={isOwner}
             headerContent={<SettingsSidebarHeader />}
         >
             <Nav groups={sidebarNavGroups} />

packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx

@@ -52,10 +52,9 @@ interface SidebarBaseProps {
     headerContent: ReactNode;
     children: ReactNode;
     isValidLicenseActive: boolean;
-    isOwner: boolean;
 }
 
-export function SidebarBase({ session, collapsible = "icon", headerContent, children, isValidLicenseActive, isOwner }: SidebarBaseProps) {
+export function SidebarBase({ session, collapsible = "icon", headerContent, children, isValidLicenseActive }: SidebarBaseProps) {
     const [isScrolled, setIsScrolled] = useState(false);
     const contentRef = useRef<HTMLDivElement>(null);