Added release notes support

Author: dr-nyt

package.json

@@ -38,6 +38,7 @@
 		"lucide-react": "^0.460.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-markdown": "^10.1.0",
 		"tailwind-merge": "^2.5.4",
 		"tailwindcss-animate": "^1.0.7"
 	},

pnpm-lock.yaml

@@ -1,38 +1,34 @@
 import {
-	Sidebar,
-	SidebarContent,
-	SidebarFooter,
-	SidebarGroup,
-	SidebarGroupContent,
-	SidebarHeader,
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	useSidebar,
+	Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar,
 } from "@/components/ui/sidebar"
-import { ChevronDoubleRight, CircleNotch, DownloadSolid, SquareSolid } from "@mynaui/icons-react";
-import { LargeP, P, TinyP } from "./typography";
+import { ChevronDoubleRight, CircleNotch, DownloadSolid, FileTextSolid, SquareSolid } from "@mynaui/icons-react";
+import { LargeP, P, SmallP, TinyP } from "./typography";
 import { Button } from "./ui/button";
 import { Link, useRouterState } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
 import { app } from "@tauri-apps/api";
-import { useSetAtom } from "jotai/react";
+import { useAtom, useSetAtom } from "jotai/react";
 import { appStateAtom } from "@/lib/store";
 import { routes } from "@/lib/routes";
 import { invoke } from "@tauri-apps/api/core";
 import { logEvent } from "firebase/analytics";
 import { getFirebaseAnalytics } from "@/lib/firebase";
+import { fetchGithubRelease } from "@/lib/utils";
+import DialogUI from "./dialog";
+import Markdown from 'react-markdown'
 
 const analytics = getFirebaseAnalytics();
 
 export function AppSidebar() {
 	const { resolvedLocation } = useRouterState();
-	const setAppState = useSetAtom(appStateAtom);
+	const [appState, setAppState] = useAtom(appStateAtom);
 
 	const { toggleSidebar, open } = useSidebar();
 	const [version, setVersion] = useState("");
+	const [releaseNotes, setReleaseNotes] = useState("");
 	const [newVersion, setNewVersion] = useState("");
 	const [isUpdating, setIsUpdating] = useState(false);
+	const [viewedNotes, setViewedNotes] = useState(true);
 
 	useEffect(() => {
 		app.getVersion().then(v => setVersion(v));
@@ -41,6 +37,7 @@ export function AppSidebar() {
 
 	useEffect(() => {
 		logEvent(analytics, "started_app", { version });
+		getReleaseNotes(version);
 	}, [version]);
 
 	useEffect(() => {
@@ -72,6 +69,22 @@ export function AppSidebar() {
 		setIsUpdating(false);
 	}
 
+	const getReleaseNotes = async (tag: string) => {
+		const release = await fetchGithubRelease(`v${tag}`);
+		if (release) {
+			const body = release.body as string;
+			const notes = body.replace(/^(.|\n|\r)*### Release Notes\r\n/g, "");
+			setReleaseNotes(notes);
+		}
+	}
+
+	const handleSetReleaseNotesAsViewed = (isOpen: boolean) => {
+		if (appState.viewedNotesForVersion === version) return;
+		setAppState(state => {
+			state.viewedNotesForVersion = version;
+		});
+	}
+
 	return (
 		<Sidebar collapsible="icon">
 			<SidebarHeader>
@@ -111,8 +124,28 @@ export function AppSidebar() {
 				</SidebarGroup>
 			</SidebarContent>
 			<SidebarFooter className="flex flex-col items-end gap-4">
-				{newVersion &&
-					<SidebarMenu>
+				<SidebarMenu className="flex flex-col gap-2">
+					{(version && releaseNotes) &&
+						<SidebarMenuItem className="flex gap-2 justify-center items-center shadow-lg">
+							<DialogUI
+								title={`Release Notes (v${version})`}
+								trigger={
+									<SidebarMenuButton size="lg" className="!bg-card border">
+										<FileTextSolid className={`transition-all ml-[0.41rem] ${open && "!size-7 ml-0"}`} />
+										<div className="flex-1 text-sm leading-tight flex-col gap-1">
+											<P className="truncate">Release Notes</P>
+											<TinyP className="truncate">v{version}</TinyP>
+										</div>
+									</SidebarMenuButton>
+								}
+								defaultOpen={appState.viewedNotesForVersion !== version}
+								onOpenChange={handleSetReleaseNotesAsViewed}
+							>
+								<Markdown>{releaseNotes}</Markdown>
+							</DialogUI>
+						</SidebarMenuItem>
+					}
+					{newVersion &&
 						<SidebarMenuItem className="flex gap-2 justify-center items-center shadow-lg shadow-green-600 animate-pulse">
 							<SidebarMenuButton size="lg" className="!bg-card border border-green-900" onClick={handleInstallUpdate} disabled={isUpdating}>
 								{isUpdating
@@ -125,8 +158,8 @@ export function AppSidebar() {
 								</div>
 							</SidebarMenuButton>
 						</SidebarMenuItem>
-					</SidebarMenu>
-				}
+					}
+				</SidebarMenu>
 				<Button className="size-8" variant="outline" size="icon" onClick={toggleSidebar}>
 					<ChevronDoubleRight className={`transition-transform ${open ? "rotate-180" : ""}`} />
 				</Button>

src/components/app-sidebar.tsx

@@ -8,11 +8,13 @@ type DialogUIProps = {
     description?: string;
     footer?: ReactNode;
     className?: string;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
 }
-export default function DialogUI({ children, trigger, title, description, footer, className = "" }: DialogUIProps) {
+export default function DialogUI({ children, trigger, title, description, footer, className = "", defaultOpen = false, onOpenChange }: DialogUIProps) {
 
     return (
-        <Dialog>
+        <Dialog defaultOpen={defaultOpen} onOpenChange={(isOpen) => onOpenChange && onOpenChange(isOpen)}>
             <DialogTrigger asChild>
                 {trigger}
             </DialogTrigger>

src/components/dialog.tsx

@@ -17,6 +17,7 @@ export const sourceDownloadOptions = Object.fromEntries(Object.keys(SOURCES).map
 export type AppStateT = {
 	key: string;
 	version: number;
+	viewedNotesForVersion?: string;
 	isSidePanelOpen: boolean;
 	libraryRootPath: string;
 	sourceDownloadOptions: {
@@ -26,6 +27,7 @@ export type AppStateT = {
 export const appStateAtom = atomWithImmer<AppStateT>({
 	key: 'appState',
 	version: 2,
+	viewedNotesForVersion: undefined,
 	isSidePanelOpen: true,
 	libraryRootPath: "",
 	sourceDownloadOptions: sourceDownloadOptions

src/lib/store.ts

@@ -19,3 +19,12 @@ export const hashString = (str: string, seed = 0) => {
 
 	return (4294967296 * (2097151 & h2) + (h1 >>> 0)).toString(16);
 };
+
+export const fetchGithubRelease = async (tag: string) => {
+	try {
+		const res = await fetch(`https://api.github.com/repos/hanadigital/novelscraper/releases/tags/${tag}`);
+		return (await res.json()) as { [key: string]: any };
+	} catch (err) {
+		console.error(err);
+	}
+}

src/lib/utils.ts

@@ -91,6 +91,7 @@ function RootComponent() {
 			if (app.version === 1) {
 				delete (app as AppStateV1T).downloadBatchSize;
 				delete (app as AppStateV1T).downloadBatchDelay;
+				app.viewedNotesForVersion
 				app.sourceDownloadOptions = sourceDownloadOptions;
 				app.version = 2;
 			}

src/routes/__root.tsx

@@ -97,7 +97,7 @@ function RouteComponent() {
 					<TabsList>
 						{Object.entries(SOURCES).map(([id, v]) => <TabsTrigger key={id} value={id}>{v.name}</TabsTrigger>)}
 					</TabsList>
-					{Object.entries(SOURCES).map(([id, v]) => <TabsContent value={id} className="flex flex-col gap-4 mt-4">
+					{Object.entries(SOURCES).map(([id, v]) => <TabsContent key={id} value={id} className="flex flex-col gap-4 mt-4">
 						<CounterUI
 							title="Batch Size"
 							count={appState.sourceDownloadOptions[id as SourceIDsT].downloadBatchSize}