Merge pull request #5 from eWloYW8/master

feat: links, better log viewer, footer

Author: eWloYW8

app/(main)/layout.tsx

@@ -10,14 +10,35 @@ function MainLayout({ children }: { children: React.ReactNode }) {
         <MainNav />
         <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
           <div className="ml-auto flex-1 sm:flex-initial">
-             {/* Future search bar can go here */}
           </div>
           <UserNav />
         </div>
       </header>
       <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
         {children}
       </main>
+      <footer className="mt-auto border-t py-4">
+        <div className="container mx-auto text-center text-sm text-muted-foreground">
+          Powered by{" "}
+          <a
+            href="https://github.com/ZJUSCT/CSOJ"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-medium text-primary underline-offset-4 hover:underline"
+          >
+            ZJUSCT/CSOJ
+          </a>{" "}
+          &{" "}
+          <a
+            href="https://github.com/ZJUSCT/CSOJ-WebUI"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-medium text-primary underline-offset-4 hover:underline"
+          >
+            ZJUSCT/CSOJ-WebUI
+          </a>
+        </div>
+      </footer>
     </div>
   );
 }

components/layout/main-nav.tsx

@@ -1,36 +1,67 @@
 "use client";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import useSWR from 'swr';
 import { cn } from "@/lib/utils";
 import { CodeXml } from "lucide-react";
+import api from '@/lib/api';
+import { LinkItem } from '@/lib/types';
+
+const fetcher = (url: string) => api.get(url).then(res => res.data.data);
 
 export function MainNav({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
   const pathname = usePathname();
+  const { data: dynamicLinks } = useSWR<LinkItem[]>('/links', fetcher, {
+    revalidateOnFocus: false,
+  });
 
-  const routes = [
+  const allRoutes = [
     { href: "/contests", label: "Contests" },
     { href: "/submissions", label: "Submissions" },
     { href: "/profile", label: "Profile" },
+    ...(dynamicLinks?.map(link => ({ href: link.url, label: link.name })) || []),
   ];
 
   return (
     <nav className={cn("flex items-center space-x-4 lg:space-x-6", className)} {...props}>
-       <Link href="/contests" className="flex items-center gap-2 font-semibold">
+      <Link href="/contests" className="flex items-center gap-2 font-semibold">
         <CodeXml className="h-6 w-6" />
         <span className="">CSOJ</span>
       </Link>
-      {routes.map((route) => (
-        <Link
-          key={route.href}
-          href={route.href}
-          className={cn(
-            "text-sm font-medium transition-colors hover:text-primary",
-            pathname.startsWith(route.href) ? "text-primary" : "text-muted-foreground"
-          )}
-        >
-          {route.label}
-        </Link>
-      ))}
+      {allRoutes.map((route) => {
+        const isExternal = route.href.startsWith("http");
+        const isActive = !isExternal && pathname.startsWith(route.href);
+
+        if (isExternal) {
+          return (
+            <a
+              key={route.href}
+              href={route.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={cn(
+                "text-sm font-medium transition-colors hover:text-primary",
+                "text-muted-foreground"
+              )}
+            >
+              {route.label}
+            </a>
+          );
+        }
+
+        return (
+          <Link
+            key={route.href}
+            href={route.href}
+            className={cn(
+              "text-sm font-medium transition-colors hover:text-primary",
+              isActive ? "text-primary" : "text-muted-foreground"
+            )}
+          >
+            {route.label}
+          </Link>
+        );
+      })}
     </nav>
   );
 }

components/submissions/submission-log-viewer.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import useWebSocket, { ReadyState } from 'react-use-websocket';
 import { useAuth } from '@/hooks/use-auth';
 import { Problem, Submission, Container } from '@/lib/types';
@@ -8,25 +8,41 @@ import useSWR from 'swr';
 import api from '@/lib/api';
 import { Skeleton } from '../ui/skeleton';
 
+interface LogMessage {
+    stream: 'stdout' | 'stderr' | 'info' | 'error';
+    data: string;
+}
+
 // --- Sub-component for displaying static logs of finished containers ---
 const StaticLogViewer = ({ submissionId, containerId }: { submissionId: string, containerId: string }) => {
-    // A simple text fetcher for SWR, as the log API returns plain text.
     const textFetcher = (url: string) => api.get(url, { responseType: 'text' }).then(res => res.data);
-    
     const { data: logText, error, isLoading } = useSWR(`/submissions/${submissionId}/containers/${containerId}/log`, textFetcher);
-
     const logContainerRef = useRef<HTMLDivElement>(null);
 
-    // Scroll to bottom on initial load
+    const messages: LogMessage[] = useMemo(() => {
+        if (!logText) return [];
+        return logText
+            .split('\n')
+            .filter((line: string) => line.trim() !== '')
+            .map((line: string) => {
+                try {
+                    return JSON.parse(line) as LogMessage;
+                } catch (e) {
+                    console.error("Failed to parse log line as JSON:", line);
+                    return { stream: 'stdout', data: line };
+                }
+            });
+    }, [logText]);
+
     useEffect(() => {
         if (logContainerRef.current) {
             logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
         }
-    }, [logText]);
+    }, [messages]);
 
     return (
         <div className="relative">
-            <div className="absolute top-2 right-2 text-xs font-semibold flex items-center gap-2 z-10">
+            <div className="absolute top-2 right-6 text-xs font-semibold flex items-center gap-2 z-10">
                 <span className="h-2 w-2 rounded-full bg-gray-400"></span>
                 Finished
             </div>
@@ -36,18 +52,24 @@ const StaticLogViewer = ({ submissionId, containerId }: { submissionId: string,
             >
                 {isLoading && <Skeleton className="h-full w-full" />}
                 {error && <p className="text-red-400">Failed to load log.</p>}
-                {logText && <pre className="whitespace-pre-wrap break-all">{logText}</pre>}
+                {messages.length > 0 && messages.map((msg, index) => (
+                    <span key={index} className="whitespace-pre-wrap break-all">
+                        {msg.stream === 'stderr' || msg.stream === 'error' ? (
+                            <span className="text-red-400">{msg.data}</span>
+                        ) : msg.stream === 'info' ? (
+                            <span className="text-blue-400">{msg.data}</span>
+                        ) : (
+                            <span className="text-foreground">{msg.data}</span>
+                        )}
+                    </span>
+                ))}
             </div>
         </div>
     );
 };
 
-// --- Sub-component for streaming real-time logs via WebSocket ---
-interface LogMessage {
-    stream: 'stdout' | 'stderr' | 'info' | 'error';
-    data: string;
-}
 
+// --- Sub-component for streaming real-time logs via WebSocket ---
 const RealtimeLogViewer = ({ wsUrl, onStatusUpdate }: { wsUrl: string | null, onStatusUpdate: () => void }) => {
     const [messages, setMessages] = useState<LogMessage[]>([]);
     const logContainerRef = useRef<HTMLDivElement>(null);
@@ -92,7 +114,7 @@ const RealtimeLogViewer = ({ wsUrl, onStatusUpdate }: { wsUrl: string | null, on
 
     return (
         <div className="relative">
-            <div className="absolute top-2 right-2 text-xs font-semibold flex items-center gap-2 z-10">
+            <div className="absolute top-2 right-6 text-xs font-semibold flex items-center gap-2 z-10">
                 <span className={`h-2 w-2 rounded-full ${connectionStatus.color}`}></span>
                 {connectionStatus.text}
             </div>
@@ -102,15 +124,15 @@ const RealtimeLogViewer = ({ wsUrl, onStatusUpdate }: { wsUrl: string | null, on
             >
                 {messages.length === 0 && <p className="text-muted-foreground">Waiting for judge output...</p>}
                 {messages.map((msg, index) => (
-                    <div key={index} className="whitespace-pre-wrap break-all">
+                    <span key={index} className="whitespace-pre-wrap break-all">
                         {msg.stream === 'stderr' || msg.stream === 'error' ? (
                             <span className="text-red-400">{msg.data}</span>
                         ) : msg.stream === 'info' ? (
                             <span className="text-blue-400">{msg.data}</span>
                         ) : (
                             <span className="text-foreground">{msg.data}</span>
                         )}
-                    </div>
+                    </span>
                 ))}
             </div>
         </div>