feature: Add about page to Settings

Dockerfile

@@ -115,6 +115,7 @@ RUN corepack install && \
     # This is required for docker user directive to work
     chmod 777 /opt && \
     chmod 777 /opt/app/start.sh && \
+    chmod 777 -R /opt/app/ui && \
     mkdir -m 777 /.cache  && \
     mkdir -pm 777 /opt/app/ui/.next/cache && \
     chown -R node:node /opt/app/ui/.next/cache

package.json

@@ -32,16 +32,16 @@
     "migration:generate": "ts-node node_modules/typeorm/cli.js migration:generate --dataSource ./datasource-config.ts -p"
   },
   "dependencies": {
-    "@headlessui/react": "2.1.9",
+    "@headlessui/react": "2.2.0",
     "@heroicons/react": "^1.0.6",
     "@monaco-editor/react": "^4.6.0",
     "@nestjs/cli": "^10.4.7",
-    "@nestjs/common": "^10.4.4",
+    "@nestjs/common": "^10.4.9",
     "@nestjs/core": "^10.4.7",
-    "@nestjs/platform-express": "^10.4.5",
+    "@nestjs/platform-express": "^10.4.9",
     "@nestjs/schedule": "^4.1.1",
     "@nestjs/typeorm": "^10.0.2",
-    "@types/node": "^22.9.0",
+    "@types/node": "^22.9.4",
     "axios": "^1.7.7",
     "bowser": "^2.11.0",
     "chalk": "^4.1.2",
@@ -56,6 +56,7 @@
     "plex-api": "^5.3.2",
     "react": "18.2.0",
     "react-dom": "18.3.1",
+    "react-markdown": "^9.0.1",
     "react-select": "^5.8.0",
     "react-toast-notifications": "^2.5.1",
     "react-transition-group": "^4.4.5",
@@ -77,7 +78,7 @@
     "@eslint/js": "^9.13.0",
     "@nestjs/cli": "^10.4.7",
     "@nestjs/schematics": "^10.2.3",
-    "@nestjs/testing": "^10.4.7",
+    "@nestjs/testing": "^10.4.9",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.0",
     "@semantic-release/exec": "^6.0.3",
@@ -88,7 +89,7 @@
     "@tailwindcss/typography": "^0.5.15",
     "@types/express": "^5.0.0",
     "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.7",
+    "@types/lodash": "^4.17.13",
     "@types/react": "^18.2.73",
     "@types/react-dom": "^18.3.0",
     "@types/react-transition-group": "^4.4.11",
@@ -103,7 +104,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "jest": "^29.7.0",
     "monaco-editor": "0.52.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "semantic-release": "^24.2.0",

ui/src/components/Settings/About/Releases/index.tsx

@@ -0,0 +1,168 @@
+import Badge from '../../../Common/Badge'
+import Button from '../../../Common/Button'
+import LoadingSpinner from '../../../Common/LoadingSpinner'
+import Modal from '../../../Common/Modal'
+import dynamic from 'next/dynamic'
+import { useEffect, useState } from 'react'
+
+// Dynamic import for markdown
+const ReactMarkdown = dynamic(() => import('react-markdown'), {
+  ssr: false,
+})
+
+const messages = {
+  releases: 'Releases',
+  releasedataMissing: 'Release data is currently unavailable.',
+  versionChangelog: '{version} Changelog',
+  viewongithub: 'View on GitHub',
+  latestversion: 'Latest',
+  currentversion: 'Current',
+  viewchangelog: 'View Changelog',
+  close: 'Close',
+}
+
+const REPO_RELEASE_API =
+  'https://api.github.com/repos/jorenn92/maintainerr/releases?per_page=10'
+
+interface GitHubRelease {
+  url: string
+  assets_url: string
+  upload_url: string
+  html_url: string
+  id: number
+  node_id: string
+  tag_name: string
+  target_commitish: string
+  name: string
+  draft: boolean
+  prerelease: boolean
+  created_at: string
+  published_at: string
+  tarball_url: string
+  zipball_url: string
+  body: string
+}
+interface ReleaseProps {
+  release: GitHubRelease
+  isLatest: boolean
+  currentVersion: string
+}
+interface ModalProps {
+  title: string
+  children: React.ReactNode
+  isOpen: boolean
+  onCancel: () => void
+  onOk?: () => void
+  cancelText?: string
+  okText?: string
+}
+
+const calculateRelativeTime = (dateString: string): string => {
+  const secondsAgo = Math.floor(
+    (Date.now() - new Date(dateString).getTime()) / 1000,
+  )
+  const minutesAgo = Math.floor(secondsAgo / 60)
+  const hoursAgo = Math.floor(minutesAgo / 60)
+  const daysAgo = Math.floor(hoursAgo / 24)
+
+  if (secondsAgo < 60) return `${secondsAgo} seconds ago`
+  if (minutesAgo < 60) return `${minutesAgo} minutes ago`
+  if (hoursAgo < 24) return `${hoursAgo} hours ago`
+  return `${daysAgo} days ago`
+}
+
+const Release = ({ currentVersion, release, isLatest }: ReleaseProps) => {
+  const [isModalOpen, setModalOpen] = useState(false)
+
+  return (
+    <div className="flex w-full flex-col space-y-3 rounded-md bg-zinc-700 px-4 py-2 shadow-md ring-1 ring-gray-700 sm:flex-row sm:space-y-0 sm:space-x-3">
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <Modal
+            onCancel={() => setModalOpen(false)}
+            title={messages.versionChangelog.replace('{version}', release.name)}
+            cancelText={messages.close}
+            okText={messages.viewongithub}
+            onOk={() => {
+              window.open(release.html_url, '_blank')
+            }}
+          >
+            <div className="prose prose:sm">
+              <ReactMarkdown>{release.body}</ReactMarkdown>
+            </div>
+          </Modal>
+        </div>
+      )}
+      <div className="flex w-full flex-grow items-center justify-center space-x-2 truncate sm:justify-start">
+        <span className="truncate text-lg font-bold">
+          <span className="mr-2 whitespace-nowrap text-xs font-normal">
+            {calculateRelativeTime(release.created_at)}
+          </span>
+          {release.name}
+        </span>
+        {isLatest && (
+          <Badge badgeType="success">{messages.latestversion}</Badge>
+        )}
+        {release.name.includes(currentVersion) && (
+          <Badge badgeType="primary">{messages.currentversion}</Badge>
+        )}
+      </div>
+      <Button buttonType="primary" onClick={() => setModalOpen(true)}>
+        <span>{messages.viewchangelog}</span>
+      </Button>
+    </div>
+  )
+}
+
+interface ReleasesProps {
+  currentVersion: string
+}
+
+const Releases = ({ currentVersion }: ReleasesProps) => {
+  const [data, setData] = useState<GitHubRelease[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchReleases = async () => {
+      try {
+        const response = await fetch(REPO_RELEASE_API)
+        if (!response.ok) {
+          throw new Error(`Error: ${response.status}`)
+        }
+        const releases = await response.json()
+        setData(releases)
+      } catch (err) {
+        setError(err.message || 'Failed to fetch releases')
+      }
+    }
+
+    fetchReleases()
+  }, [])
+
+  if (!data && !error) {
+    return <LoadingSpinner />
+  }
+
+  if (error) {
+    return <div className="text-gray-300">{messages.releasedataMissing}</div>
+  }
+
+  return (
+    <div>
+      <h3 className="heading">{messages.releases}</h3>
+      <div className="section space-y-3">
+        {data?.map((release, index) => (
+          <div key={`release-${release.id}`}>
+            <Release
+              release={release}
+              currentVersion={currentVersion}
+              isLatest={index === 0}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Releases