feat: beta/stable release channels with update notifications and bug fixes (#98)

feat: beta/stable release channels with update notifications and bug fixes

frontend/src/components/admin/UpdateNotification.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { ArrowUpCircle, X, ExternalLink } from 'lucide-react';
+import { api } from '../../config/api';
+
+interface UpdateInfo {
+  enabled: boolean;
+  current: string;
+  channel: 'stable' | 'beta';
+  latest: {
+    stable: string;
+    beta: string;
+    forChannel: string;
+  };
+  updateAvailable: boolean;
+  newerBetaAvailable?: boolean;
+  lastChecked: string;
+  error?: string;
+  message?: string;
+}
+
+async function fetchUpdateInfo(): Promise<UpdateInfo> {
+  const response = await api.get<UpdateInfo>('/admin/system/updates');
+  return response.data;
+}
+
+interface UpdateNotificationProps {
+  onDismiss?: () => void;
+}
+
+export const UpdateNotification: React.FC<UpdateNotificationProps> = ({ onDismiss }) => {
+  const { t } = useTranslation();
+  const [dismissed, setDismissed] = useState(false);
+
+  const { data: updateInfo } = useQuery({
+    queryKey: ['update-check'],
+    queryFn: fetchUpdateInfo,
+    staleTime: 60 * 60 * 1000, // 1 hour
+    retry: false,
+    refetchOnWindowFocus: false
+  });
+
+  // Don't render if no update available, not enabled, or dismissed
+  if (!updateInfo?.enabled || !updateInfo?.updateAvailable || dismissed) {
+    return null;
+  }
+
+  const handleDismiss = () => {
+    setDismissed(true);
+    onDismiss?.();
+  };
+
+  const channelLabel = updateInfo.channel === 'beta'
+    ? t('admin.updates.channelBeta', 'Beta')
+    : t('admin.updates.channelStable', 'Stable');
+
+  return (
+    <div className="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4 rounded-r-lg">
+      <div className="flex items-start justify-between">
+        <div className="flex items-start">
+          <ArrowUpCircle className="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" />
+          <div>
+            <h4 className="text-sm font-semibold text-blue-800">
+              {t('admin.updates.available', 'Update Available')}
+            </h4>
+            <p className="text-sm text-blue-700 mt-1">
+              {t('admin.updates.newVersion', 'Version {{version}} is available', {
+                version: updateInfo.latest.forChannel
+              })}
+              <span className="text-blue-500 ml-2">
+                ({t('admin.updates.currentVersion', 'Current: {{version}}', {
+                  version: updateInfo.current
+                })})
+              </span>
+            </p>
+            <p className="text-xs text-blue-600 mt-1">
+              {t('admin.updates.channel', 'Channel: {{channel}}', {
+                channel: channelLabel
+              })}
+            </p>
+            <a
+              href="https://github.com/the-luap/picpeak/releases"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center text-xs text-blue-600 hover:text-blue-800 mt-2"
+            >
+              {t('admin.updates.viewReleaseNotes', 'View Release Notes')}
+              <ExternalLink className="w-3 h-3 ml-1" />
+            </a>
+          </div>
+        </div>
+        <button
+          onClick={handleDismiss}
+          className="text-blue-400 hover:text-blue-600 p-1"
+          aria-label={t('common.close', 'Close')}
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  );
+};

frontend/src/components/admin/VersionInfo.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import { Info } from 'lucide-react';
+import { Info, ArrowUpCircle } from 'lucide-react';
 import { api } from '../../config/api';
 import packageJson from '../../../package.json';
 
@@ -13,6 +13,15 @@ interface SystemVersion {
   frontend: string;
   node: string;
   environment: string;
+  channel?: 'stable' | 'beta';
+}
+
+interface UpdateInfo {
+  enabled: boolean;
+  updateAvailable: boolean;
+  latest?: {
+    forChannel: string;
+  };
 }
 
 async function fetchSystemVersion(): Promise<SystemVersion> {
@@ -20,6 +29,11 @@ async function fetchSystemVersion(): Promise<SystemVersion> {
   return response.data;
 }
 
+async function fetchUpdateInfo(): Promise<UpdateInfo> {
+  const response = await api.get<UpdateInfo>('/admin/system/updates');
+  return response.data;
+}
+
 export const VersionInfo: React.FC = () => {
   const { t } = useTranslation();
   const { data: versionInfo } = useQuery({
@@ -28,11 +42,25 @@ export const VersionInfo: React.FC = () => {
     staleTime: 5 * 60 * 1000, // Cache for 5 minutes
   });
 
+  const { data: updateInfo } = useQuery({
+    queryKey: ['update-check'],
+    queryFn: fetchUpdateInfo,
+    staleTime: 60 * 60 * 1000, // 1 hour
+    retry: false
+  });
+
+  const channelBadge = versionInfo?.channel === 'beta' ? (
+    <span className="ml-1 px-1.5 py-0.5 text-xs bg-amber-100 text-amber-700 rounded">
+      {t('admin.updates.beta', 'BETA')}
+    </span>
+  ) : null;
+
   return (
     <div className="px-4 py-3 border-t border-neutral-200">
       <div className="flex items-center gap-2 text-xs text-neutral-600">
         <Info className="w-3 h-3" />
         <span className="font-medium">{t('admin.version')}</span>
+        {channelBadge}
       </div>
       <div className="mt-1 space-y-0.5 text-xs text-neutral-500">
         <div>Frontend: v{FRONTEND_VERSION}</div>
@@ -40,6 +68,16 @@ export const VersionInfo: React.FC = () => {
           <div>Backend: v{versionInfo.backend}</div>
         )}
       </div>
+      {updateInfo?.enabled && updateInfo?.updateAvailable && (
+        <div className="mt-2 flex items-center gap-1 text-xs text-blue-600">
+          <ArrowUpCircle className="w-3 h-3" />
+          <span>
+            {t('admin.updates.updateAvailableShort', 'v{{version}} available', {
+              version: updateInfo.latest?.forChannel
+            })}
+          </span>
+        </div>
+      )}
     </div>
   );
 };

frontend/src/i18n/locales/de.json

@@ -1232,6 +1232,20 @@
       "error": "Fehler",
       "checking": "Prüfe..."
     },
+    "updates": {
+      "available": "Update verfügbar",
+      "newVersion": "Version {{version}} ist verfügbar",
+      "currentVersion": "Aktuell: {{version}}",
+      "channel": "Kanal: {{channel}}",
+      "channelStable": "Stabil",
+      "channelBeta": "Beta",
+      "beta": "BETA",
+      "viewReleaseNotes": "Versionshinweise anzeigen",
+      "updateAvailableShort": "v{{version}} verfügbar",
+      "checkForUpdates": "Nach Updates suchen",
+      "upToDate": "Alles aktuell",
+      "lastChecked": "Zuletzt geprüft: {{time}}"
+    },
     "notifications": "Benachrichtigungen",
     "viewAllNotifications": "Alle Benachrichtigungen anzeigen",
     "noNotifications": "Keine neuen Benachrichtigungen",

frontend/src/i18n/locales/en.json

@@ -1037,6 +1037,20 @@
       "error": "Error",
       "checking": "Checking..."
     },
+    "updates": {
+      "available": "Update Available",
+      "newVersion": "Version {{version}} is available",
+      "currentVersion": "Current: {{version}}",
+      "channel": "Channel: {{channel}}",
+      "channelStable": "Stable",
+      "channelBeta": "Beta",
+      "beta": "BETA",
+      "viewReleaseNotes": "View Release Notes",
+      "updateAvailableShort": "v{{version}} available",
+      "checkForUpdates": "Check for Updates",
+      "upToDate": "You're up to date",
+      "lastChecked": "Last checked: {{time}}"
+    },
     "notifications": "Notifications",
     "viewAllNotifications": "View all notifications",
     "noNotifications": "No new notifications",

frontend/src/pages/admin/AdminDashboard.tsx

@@ -17,6 +17,7 @@ import { useTranslation } from 'react-i18next';
 import { useLocalizedDate } from '../../hooks/useLocalizedDate';
 
 import { Button, Card, Loading } from '../../components/common';
+import { UpdateNotification } from '../../components/admin/UpdateNotification';
 import { useQuery } from '@tanstack/react-query';
 import { eventsService } from '../../services/events.service';
 import { adminService } from '../../services/admin.service';
@@ -140,6 +141,9 @@ export const AdminDashboard: React.FC = () => {
 
   return (
     <div>
+      {/* Update Notification */}
+      <UpdateNotification />
+
       {/* Page Header */}
       <div className="flex justify-between items-center mb-8">
         <div>