+
+
+
-
+
+
- ←
- Back to changelog
-
-
-
- ();
+
+ for (const changelog of changelogs) {
+ const version = semver.parse(changelog.version);
+ if (version) {
+ const baseVersion = `${version.major}.${version.minor}.${version.patch}`;
+ if (!groups.has(baseVersion)) {
+ groups.set(baseVersion, []);
+ }
+ groups.get(baseVersion)!.push(changelog);
+ }
+ }
+
+ return Array.from(groups.entries())
+ .map(([baseVersion, versions]) => ({
+ baseVersion,
+ versions,
+ }))
+ .sort((a, b) => semver.rcompare(a.baseVersion, b.baseVersion));
+}
+
function Component() {
const { changelogs } = Route.useLoaderData();
+ const groups = groupBySemanticVersion(changelogs);
return (
-
-
+
+
+
+
+
+ );
+}
+
+function groupVersions(changelogs: ChangelogWithMeta[]): VersionGroup[] {
+ const groups = new Map();
+
+ for (const changelog of changelogs) {
+ const version = semver.parse(changelog.version);
+ if (version) {
+ const baseVersion = `${version.major}.${version.minor}.${version.patch}`;
+ if (!groups.has(baseVersion)) {
+ groups.set(baseVersion, []);
+ }
+ groups.get(baseVersion)!.push(changelog);
+ }
+ }
+
+ return Array.from(groups.entries())
+ .map(([baseVersion, versions]) => ({
+ baseVersion,
+ versions,
+ }))
+ .sort((a, b) => semver.rcompare(a.baseVersion, b.baseVersion));
+}
+
+function ChangelogSidebar({
+ changelog,
+ allChangelogs,
+}: {
+ changelog: ChangelogWithMeta;
+ allChangelogs: ChangelogWithMeta[];
+}) {
+ const [currentPage, setCurrentPage] = useState(0);
+
+ const versionGroups = groupVersions(allChangelogs);
+ const totalPages = Math.ceil(versionGroups.length / ITEMS_PER_PAGE);
+ const startIndex = currentPage * ITEMS_PER_PAGE;
+ const endIndex = startIndex + ITEMS_PER_PAGE;
+ const paginatedGroups = versionGroups.slice(startIndex, endIndex);
+
+ const goToNextPage = () => {
+ if (currentPage < totalPages - 1) {
+ setCurrentPage(currentPage + 1);
+ }
+ };
+
+ const goToPrevPage = () => {
+ if (currentPage > 0) {
+ setCurrentPage(currentPage - 1);
+ }
+ };
+
+ return (
+
+ return (
+
-
+
+ );
+}
+
+function ChangelogSplitView({
+ changelog,
+ allChangelogs,
+}: {
+ changelog: ChangelogWithMeta;
+ allChangelogs: ChangelogWithMeta[];
+}) {
+ return (
+
+
+
+
+ );
+}
+
+function ChangelogContent({ changelog }: { changelog: ChangelogWithMeta }) {
+ const { diffUrl } = Route.useLoaderData();
+ const currentVersion = semver.parse(changelog.version);
+ const isPrerelease = currentVersion && currentVersion.prerelease.length > 0;
+ const isLatest = changelog.newerSlug === null;
+
+ // Parse prerelease info
+ let prereleaseType = "";
+ let buildNumber = "";
+ if (isPrerelease && currentVersion && currentVersion.prerelease.length > 0) {
+ prereleaseType = currentVersion.prerelease[0]?.toString() || "";
+ buildNumber = currentVersion.prerelease[1]?.toString() || "";
+ }
-
+
+
+ {/* Pagination Controls */}
+ {totalPages > 1 && (
+
+ {paginatedGroups.map((group) => (
+
+
+
- {isLatest && (
-
-
+ Version {group.baseVersion}
+
+
+ {group.versions.map((version) => {
+ const v = semver.parse(version.version);
+ const isPrerelease = v && v.prerelease.length > 0;
+ const iconUrl = isPrerelease
+ ? "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/icons/nightly-icon.png"
+ : "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/icons/stable-icon.png";
+
+ return (
+
+
+ 
+
+
+
+
+ );
+ })}
+ + v{version.version} +
++ {isPrerelease ? "Nightly" : "Stable"} +
+
+
+ )}
+
+
+
+
+ Page {currentPage + 1} of {totalPages}
+
+
+
+ - v{changelog.version} -
+ const baseVersion = currentVersion + ? `v${currentVersion.major}.${currentVersion.minor}.${currentVersion.patch}` + : `v${changelog.version}`; - + return ( +
+
+
+ );
+}
-
-
+
-
+
+ {baseVersion}
+ {isLatest && ( + +
{diffUrl && (
-
+
+
+
+
+ Viewing v{changelog.version} • {allChangelogs.length} total versions
+
);
}
diff --git a/apps/web/src/routes/_view/changelog/index.tsx b/apps/web/src/routes/_view/changelog/index.tsx
index d7fa60f343..b6ca06f55e 100644
--- a/apps/web/src/routes/_view/changelog/index.tsx
+++ b/apps/web/src/routes/_view/changelog/index.tsx
@@ -1,117 +1,188 @@
import { Icon } from "@iconify-icon/react";
import { createFileRoute, Link } from "@tanstack/react-router";
+import semver from "semver";
import { type ChangelogWithMeta, getChangelogList } from "@/changelog";
+import { MockWindow } from "@/components/mock-window";
export const Route = createFileRoute("/_view/changelog/")({
component: Component,
loader: async () => {
const changelogs = getChangelogList();
-
return { changelogs };
},
});
+type SemanticVersionGroup = {
+ baseVersion: string;
+ versions: ChangelogWithMeta[];
+};
+
+function groupBySemanticVersion(
+ changelogs: ChangelogWithMeta[],
+): SemanticVersionGroup[] {
+ const groups = new Map
-
-
-
-
- {changelogs.length === 0 ? (
-
-
- - Changelog -
-- Track every update, improvement, and fix to Hyprnote -
-
-
- ) : (
-
-
- No releases yet. Stay tuned!
-
-
-
-
+
+ );
+}
+
+function ChangelogGridView({ groups }: { groups: SemanticVersionGroup[] }) {
+ if (groups.length === 0) {
+ return (
+
-
-
+ return (
+
- {changelogs.map((changelog, index) => (
-
+
+
+ );
+}
+
+function HeroSection() {
+ return (
+
+
+
+
+ );
+}
+
+function ChangelogContentSection({
+ groups,
+}: {
+ groups: SemanticVersionGroup[];
+}) {
+ return (
+
+
+ + Changelog +
++ Track every update, improvement, and fix to Hyprnote +
+
+
+
+
+
+
- )}
+
+
+ );
+ }
+
+ return (
+
+
+ No releases yet. Stay tuned!
+ {groups.map((group, index) => (
+
);
}
-function ChangelogCard({
- changelog,
+function VersionGroup({
+ group,
isFirst,
}: {
- changelog: ChangelogWithMeta;
+ group: SemanticVersionGroup;
isFirst: boolean;
}) {
+ return (
+
+
+ );
+}
+
+function VersionIcon({ changelog }: { changelog: ChangelogWithMeta }) {
+ const version = semver.parse(changelog.version);
+ const isPrerelease = version && version.prerelease.length > 0;
+ const iconUrl = isPrerelease
+ ? "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/icons/nightly-icon.png"
+ : "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/icons/stable-icon.png";
+
return (
-
+ Version {group.baseVersion}
+
+
+ {group.versions.map((changelog) => (
+
+
-
+
-
-
+
+
+
+ v{changelog.version}
+
+
+ );
+}
-
-
-
-
+function ChangelogStatusBar({ groups }: { groups: SemanticVersionGroup[] }) {
+ const totalVersions = groups.reduce(
+ (sum, group) => sum + group.versions.length,
+ 0,
+ );
-
-
-
-
-
- - v{changelog.version} -
- {isFirst && ( - -
-
- View release notes →
-
-
-
+
+ {totalVersions} {totalVersions === 1 ? "version" : "versions"},{" "}
+ {groups.length} {groups.length === 1 ? "group" : "groups"}
+
+
);
}