feat: add NotificationCenter and SystemStatus components for improved user notifications and system updates

frontend/src/components/SystemStatus.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { checkUpdates } from '../api/system';
+import { ExternalLink, CheckCircle, AlertCircle } from 'lucide-react';
+
+const SystemStatus: React.FC = () => {
+  const { data: updateInfo, isLoading } = useQuery({
+    queryKey: ['system-updates'],
+    queryFn: checkUpdates,
+    staleTime: 1000 * 60 * 60, // 1 hour
+  });
+
+  if (isLoading) return null;
+
+  if (!updateInfo?.available) {
+    return (
+      <div className="flex items-center text-sm text-green-500">
+        <CheckCircle className="w-4 h-4 mr-1" />
+        <span className="hidden sm:inline">Up to date</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center text-sm text-yellow-500 bg-yellow-50 dark:bg-yellow-900/20 px-3 py-1 rounded-full">
+      <AlertCircle className="w-4 h-4 mr-2" />
+      <span className="mr-2 hidden sm:inline">Update available: {updateInfo.latest_version}</span>
+      <a
+        href={updateInfo.changelog_url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex items-center underline hover:text-yellow-600"
+      >
+        <span className="hidden sm:inline">Changelog</span> <ExternalLink className="w-3 h-3 ml-1" />
+      </a>
+    </div>
+  );
+};
+
+export default SystemStatus;