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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brendan-kellam merged 5 commits into from
May 25, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
602fae8
changelog impl
brendan-kellam May 25, 2026
57b2b06
changelog
brendan-kellam May 25, 2026
75ef75f
add version field & further polish
brendan-kellam May 25, 2026
cbb74f3
Merge branch 'v5' into bkellam/changelog
brendan-kellam May 25, 2026
1b4802b
improve tooltip
brendan-kellam May 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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)
Expand Down
15 changes: 15 additions & 0 deletions packages/db/prisma/migrations/20260525214409_add_changelog_table/migration.sql
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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");
16 changes: 16 additions & 0 deletions packages/db/prisma/schema.prisma
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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])
}
4 changes: 4 additions & 0 deletions packages/shared/src/env.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),
Expand Down
8 changes: 7 additions & 1 deletion packages/shared/src/index.client.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
8 changes: 7 additions & 1 deletion packages/shared/src/index.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
36 changes: 36 additions & 0 deletions packages/shared/src/versionUtils.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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;
};
211 changes: 211 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/changelogEntryDialog.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
);
}
1 change: 0 additions & 1 deletion packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,6 @@ export async function DefaultSidebar() {
session={session}
collapsible="icon"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={
<Nav
isSettingsNotificationVisible={isSettingsNotificationVisible}
Expand Down
6 changes: 0 additions & 6 deletions packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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();
Expand All@@ -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} />
Expand Down
3 changes: 1 addition & 2 deletions packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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);

Expand Down
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
[v5] feat(web): Add integrated changelog system#1227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

brendan-kellam
merged 5 commits into

from

May 25, 2026
 Merged


[v5] feat(web): Add integrated changelog system
#1227
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
602fae8

changelog impl


brendan-kellam May 25, 2026
57b2b06

changelog


brendan-kellam May 25, 2026
75ef75f

add version field & further polish


brendan-kellam May 25, 2026
cbb74f3

Merge branch 'v5' into bkellam/changelog


brendan-kellam May 25, 2026
1b4802b

improve tooltip


brendan-kellam May 25, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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)
Expand Down

15 changes: 15 additions & 0 deletions
packages/db/prisma/migrations/20260525214409_add_changelog_table/migration.sql

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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");

16 changes: 16 additions & 0 deletions
packages/db/prisma/schema.prisma

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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])
}

4 changes: 4 additions & 0 deletions
packages/shared/src/env.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),
Expand Down

8 changes: 7 additions & 1 deletion
packages/shared/src/index.client.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";

8 changes: 7 additions & 1 deletion
packages/shared/src/index.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";

36 changes: 36 additions & 0 deletions
packages/shared/src/versionUtils.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;
};

211 changes: 211 additions & 0 deletions
packages/web/src/app/(app)/@sidebar/components/changelogEntryDialog.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

1 change: 0 additions & 1 deletion
packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,6 @@ export async function DefaultSidebar() {
 session={session}
 collapsible="icon"
 isValidLicenseActive={licenseActive}
 isOwner={isOwner}
 headerContent={
 <Nav
 isSettingsNotificationVisible={isSettingsNotificationVisible}
Expand Down

6 changes: 0 additions & 6 deletions
packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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();
Expand All@@ -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} />
Expand Down

3 changes: 1 addition & 2 deletions
packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);

Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
[v5] feat(web): Add integrated changelog system#1227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

brendan-kellam
merged 5 commits into

from

May 25, 2026
 Merged


[v5] feat(web): Add integrated changelog system
#1227
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
602fae8

changelog impl


brendan-kellam May 25, 2026
57b2b06

changelog


brendan-kellam May 25, 2026
75ef75f

add version field & further polish


brendan-kellam May 25, 2026
cbb74f3

Merge branch 'v5' into bkellam/changelog


brendan-kellam May 25, 2026
1b4802b

improve tooltip


brendan-kellam May 25, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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)
Expand Down

15 changes: 15 additions & 0 deletions
packages/db/prisma/migrations/20260525214409_add_changelog_table/migration.sql

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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");

16 changes: 16 additions & 0 deletions
packages/db/prisma/schema.prisma

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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])
}

4 changes: 4 additions & 0 deletions
packages/shared/src/env.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),
Expand Down

8 changes: 7 additions & 1 deletion
packages/shared/src/index.client.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";

8 changes: 7 additions & 1 deletion
packages/shared/src/index.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";

36 changes: 36 additions & 0 deletions
packages/shared/src/versionUtils.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;
};

211 changes: 211 additions & 0 deletions
packages/web/src/app/(app)/@sidebar/components/changelogEntryDialog.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

1 change: 0 additions & 1 deletion
packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,6 @@ export async function DefaultSidebar() {
 session={session}
 collapsible="icon"
 isValidLicenseActive={licenseActive}
 isOwner={isOwner}
 headerContent={
 <Nav
 isSettingsNotificationVisible={isSettingsNotificationVisible}
Expand Down

6 changes: 0 additions & 6 deletions
packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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();
Expand All@@ -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} />
Expand Down

3 changes: 1 addition & 2 deletions
packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);

Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
[v5] feat(web): Add integrated changelog system#1227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

brendan-kellam
merged 5 commits into

from

May 25, 2026
 Merged


[v5] feat(web): Add integrated changelog system
#1227
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
602fae8

changelog impl


brendan-kellam May 25, 2026
57b2b06

changelog


brendan-kellam May 25, 2026
75ef75f

add version field & further polish


brendan-kellam May 25, 2026
cbb74f3

Merge branch 'v5' into bkellam/changelog


brendan-kellam May 25, 2026
1b4802b

improve tooltip


brendan-kellam May 25, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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)
Expand Down

15 changes: 15 additions & 0 deletions
packages/db/prisma/migrations/20260525214409_add_changelog_table/migration.sql

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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");

16 changes: 16 additions & 0 deletions
packages/db/prisma/schema.prisma

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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])
}

4 changes: 4 additions & 0 deletions
packages/shared/src/env.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),
Expand Down

8 changes: 7 additions & 1 deletion
packages/shared/src/index.client.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";

8 changes: 7 additions & 1 deletion
packages/shared/src/index.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";

36 changes: 36 additions & 0 deletions
packages/shared/src/versionUtils.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;
};

211 changes: 211 additions & 0 deletions
packages/web/src/app/(app)/@sidebar/components/changelogEntryDialog.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

1 change: 0 additions & 1 deletion
packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,6 @@ export async function DefaultSidebar() {
 session={session}
 collapsible="icon"
 isValidLicenseActive={licenseActive}
 isOwner={isOwner}
 headerContent={
 <Nav
 isSettingsNotificationVisible={isSettingsNotificationVisible}
Expand Down

6 changes: 0 additions & 6 deletions
packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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();
Expand All@@ -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} />
Expand Down

3 changes: 1 addition & 2 deletions
packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);

Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
[v5] feat(web): Add integrated changelog system#1227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

brendan-kellam
merged 5 commits into

from

May 25, 2026
 Merged


[v5] feat(web): Add integrated changelog system
#1227
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
602fae8

changelog impl


brendan-kellam May 25, 2026
57b2b06

changelog


brendan-kellam May 25, 2026
75ef75f

add version field & further polish


brendan-kellam May 25, 2026
cbb74f3

Merge branch 'v5' into bkellam/changelog


brendan-kellam May 25, 2026
1b4802b

improve tooltip


brendan-kellam May 25, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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)
Expand Down

15 changes: 15 additions & 0 deletions
packages/db/prisma/migrations/20260525214409_add_changelog_table/migration.sql

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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");

16 changes: 16 additions & 0 deletions
packages/db/prisma/schema.prisma

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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])
}

4 changes: 4 additions & 0 deletions
packages/shared/src/env.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),
Expand Down

8 changes: 7 additions & 1 deletion
packages/shared/src/index.client.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";

8 changes: 7 additions & 1 deletion
packages/shared/src/index.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";

36 changes: 36 additions & 0 deletions
packages/shared/src/versionUtils.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;
};

211 changes: 211 additions & 0 deletions
packages/web/src/app/(app)/@sidebar/components/changelogEntryDialog.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

1 change: 0 additions & 1 deletion
packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,6 @@ export async function DefaultSidebar() {
 session={session}
 collapsible="icon"
 isValidLicenseActive={licenseActive}
 isOwner={isOwner}
 headerContent={
 <Nav
 isSettingsNotificationVisible={isSettingsNotificationVisible}
Expand Down

6 changes: 0 additions & 6 deletions
packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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();
Expand All@@ -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} />
Expand Down

3 changes: 1 addition & 2 deletions
packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);

Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
[v5] feat(web): Add integrated changelog system#1227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

brendan-kellam
merged 5 commits into

from

May 25, 2026
 Merged


[v5] feat(web): Add integrated changelog system
#1227
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
602fae8

changelog impl


brendan-kellam May 25, 2026
57b2b06

changelog


brendan-kellam May 25, 2026
75ef75f

add version field & further polish


brendan-kellam May 25, 2026
cbb74f3

Merge branch 'v5' into bkellam/changelog


brendan-kellam May 25, 2026
1b4802b

improve tooltip


brendan-kellam May 25, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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)
Expand Down

15 changes: 15 additions & 0 deletions
packages/db/prisma/migrations/20260525214409_add_changelog_table/migration.sql

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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");

16 changes: 16 additions & 0 deletions
packages/db/prisma/schema.prisma

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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])
}

4 changes: 4 additions & 0 deletions
packages/shared/src/env.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),
Expand Down

8 changes: 7 additions & 1 deletion
packages/shared/src/index.client.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";

8 changes: 7 additions & 1 deletion
packages/shared/src/index.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";

36 changes: 36 additions & 0 deletions
packages/shared/src/versionUtils.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;
};

211 changes: 211 additions & 0 deletions
packages/web/src/app/(app)/@sidebar/components/changelogEntryDialog.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

1 change: 0 additions & 1 deletion
packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,6 @@ export async function DefaultSidebar() {
 session={session}
 collapsible="icon"
 isValidLicenseActive={licenseActive}
 isOwner={isOwner}
 headerContent={
 <Nav
 isSettingsNotificationVisible={isSettingsNotificationVisible}
Expand Down

6 changes: 0 additions & 6 deletions
packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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();
Expand All@@ -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} />
Expand Down

3 changes: 1 addition & 2 deletions
packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);

Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
[v5] feat(web): Add integrated changelog system#1227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

brendan-kellam
merged 5 commits into

from

May 25, 2026
 Merged


[v5] feat(web): Add integrated changelog system
#1227
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
602fae8

changelog impl


brendan-kellam May 25, 2026
57b2b06

changelog


brendan-kellam May 25, 2026
75ef75f

add version field & further polish


brendan-kellam May 25, 2026
cbb74f3

Merge branch 'v5' into bkellam/changelog


brendan-kellam May 25, 2026
1b4802b

improve tooltip


brendan-kellam May 25, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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)
Expand Down

15 changes: 15 additions & 0 deletions
packages/db/prisma/migrations/20260525214409_add_changelog_table/migration.sql

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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");

16 changes: 16 additions & 0 deletions
packages/db/prisma/schema.prisma

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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])
}

4 changes: 4 additions & 0 deletions
packages/shared/src/env.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),
Expand Down

8 changes: 7 additions & 1 deletion
packages/shared/src/index.client.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";

8 changes: 7 additions & 1 deletion
packages/shared/src/index.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";

36 changes: 36 additions & 0 deletions
packages/shared/src/versionUtils.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;
};

211 changes: 211 additions & 0 deletions
packages/web/src/app/(app)/@sidebar/components/changelogEntryDialog.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

1 change: 0 additions & 1 deletion
packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,6 @@ export async function DefaultSidebar() {
 session={session}
 collapsible="icon"
 isValidLicenseActive={licenseActive}
 isOwner={isOwner}
 headerContent={
 <Nav
 isSettingsNotificationVisible={isSettingsNotificationVisible}
Expand Down

6 changes: 0 additions & 6 deletions
packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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();
Expand All@@ -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} />
Expand Down

3 changes: 1 addition & 2 deletions
packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);

Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
[v5] feat(web): Add integrated changelog system#1227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

brendan-kellam
merged 5 commits into

from

May 25, 2026
 Merged


[v5] feat(web): Add integrated changelog system
#1227
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
602fae8

changelog impl


brendan-kellam May 25, 2026
57b2b06

changelog


brendan-kellam May 25, 2026
75ef75f

add version field & further polish


brendan-kellam May 25, 2026
cbb74f3

Merge branch 'v5' into bkellam/changelog


brendan-kellam May 25, 2026
1b4802b

improve tooltip


brendan-kellam May 25, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


1 change: 1 addition & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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)
Expand Down

15 changes: 15 additions & 0 deletions
packages/db/prisma/migrations/20260525214409_add_changelog_table/migration.sql

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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");

16 changes: 16 additions & 0 deletions
packages/db/prisma/schema.prisma

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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])
}

4 changes: 4 additions & 0 deletions
packages/shared/src/env.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),
Expand Down

8 changes: 7 additions & 1 deletion
packages/shared/src/index.client.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";

8 changes: 7 additions & 1 deletion
packages/shared/src/index.server.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";

36 changes: 36 additions & 0 deletions
packages/shared/src/versionUtils.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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;
};

211 changes: 211 additions & 0 deletions
packages/web/src/app/(app)/@sidebar/components/changelogEntryDialog.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

1 change: 0 additions & 1 deletion
packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,6 @@ export async function DefaultSidebar() {
 session={session}
 collapsible="icon"
 isValidLicenseActive={licenseActive}
 isOwner={isOwner}
 headerContent={
 <Nav
 isSettingsNotificationVisible={isSettingsNotificationVisible}
Expand Down

6 changes: 0 additions & 6 deletions
packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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();
Expand All@@ -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} />
Expand Down

3 changes: 1 addition & 2 deletions
packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);

Expand Down
Loading
Loading