Improve offline download UX and localize IBM Plex Mono (#579)

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: kentcdodds

packages/workshop-app/app/components/epic-video.tsx

@@ -702,8 +702,14 @@ function EpicVideo({
 	}, [offlineVideoFetcher.state, offlineVideoFetcher.data, revalidator])
 
 	const handleDownload = React.useCallback(() => {
-		toast.success(
-			`Download of ${title} has started (${downloadResolutionLabel} quality).`,
+		if (!isOnline) {
+			toast.error('Cannot download while offline', {
+				description: 'Reconnect to the internet and try again.',
+			})
+			return
+		}
+		toast.info(
+			`Starting download for ${title} (${downloadResolutionLabel} quality).`,
 			{
 				description: (
 					<span>
@@ -731,6 +737,7 @@ function EpicVideo({
 		title,
 		urlString,
 		downloadResolutionLabel,
+		isOnline,
 	])
 
 	const handleDelete = React.useCallback(() => {
@@ -754,6 +761,7 @@ function EpicVideo({
 	const offlineActions = showOfflineActions ? (
 		<OfflineVideoActionButtons
 			isAvailable={offlineVideoAvailable}
+			isDownloadAvailable={isOnline}
 			isBusy={isOfflineActionBusy}
 			downloadProgress={downloadProgress}
 			downloadSizeBytes={downloadSizeBytes}

packages/workshop-app/app/components/offline-video-actions.tsx

@@ -44,6 +44,7 @@ function DeleteIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 
 export type OfflineVideoActionButtonsProps = {
 	isAvailable: boolean
+	isDownloadAvailable?: boolean
 	isBusy?: boolean
 	downloadSizeBytes?: number | null
 	/**
@@ -57,12 +58,14 @@ export type OfflineVideoActionButtonsProps = {
 
 export function OfflineVideoActionButtons({
 	isAvailable,
+	isDownloadAvailable = true,
 	isBusy = false,
 	downloadSizeBytes,
 	downloadProgress,
 	onDownload,
 	onDelete,
 }: OfflineVideoActionButtonsProps) {
+	const isDownloadUnavailable = !isAvailable && !isDownloadAvailable
 	const isDownloading = isBusy && !isAvailable
 	const showProgressIndicator = isDownloading
 	const downloadSizeLabel =
@@ -75,18 +78,23 @@ export function OfflineVideoActionButtons({
 			? downloadProgress !== undefined
 				? `Downloading: ${Math.round(downloadProgress)}%`
 				: 'Downloading...'
-			: `Download offline video${downloadSizeLabel}`
+			: isDownloadUnavailable
+				? 'Reconnect to download offline video'
+				: `Download offline video${downloadSizeLabel}`
 	const onClick = isAvailable ? onDelete : onDownload
 	const className = isAvailable
 		? 'text-foreground-destructive hover:bg-foreground-destructive/10'
-		: 'text-foreground hover:bg-muted'
+		: isDownloadUnavailable
+			? 'text-muted-foreground'
+			: 'text-foreground hover:bg-muted'
+	const isDisabled = isBusy || isDownloadUnavailable
 
 	return (
 		<SimpleTooltip content={label}>
 			<button
 				type="button"
 				onClick={onClick}
-				disabled={isBusy}
+				disabled={isDisabled}
 				className={`${className} inline-flex h-7 w-7 items-center justify-center rounded disabled:cursor-not-allowed disabled:opacity-50`}
 				aria-label={label}
 			>

packages/workshop-app/app/root.tsx

@@ -67,10 +67,7 @@ import { getToast } from './utils/toast.server'
 export const links: LinksFunction = () => {
 	return [
 		{ rel: 'stylesheet', href: '/neogrotesk-font.css' },
-		{
-			rel: 'stylesheet',
-			href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,200;0,300;0,400;0,500;0,600;1,700&display=swap',
-		},
+		{ rel: 'stylesheet', href: '/ibm-plex-mono-font.css' },
 		{ rel: 'stylesheet', href: tailwindStylesheetUrl },
 		{ rel: 'stylesheet', href: appStylesheetUrl },
 		{

packages/workshop-app/public/app-default.css

@@ -1,6 +1,7 @@
 /* This is used by default for non-server apps */
 
 @import ('/neogrotesk-font.css');
+@import ('/ibm-plex-mono-font.css');
 
 html {
 	font-family: