Merge pull request #32 from database-playground/pan93412/dbp-35-redirect-comments-to-discord-community

pan93412 · web-flow · commit 25dd153511ad · 2025-10-22T17:44:42.000+08:00
DBP-35: redirect comments page to discord community
diff --git a/app/(app)/comments/page.tsx b/app/(app)/comments/page.tsx
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -0,0 +1,5 @@
+import NotFoundLayout from "@/components/not-found-layout";
+
+export default async function NotFoundPage() {
+  return <NotFoundLayout />;
+}
diff --git a/components/app-navbar.tsx b/components/app-navbar.tsx
@@ -27,7 +27,7 @@ function NavItem({ icon, label, active = false }: NavItemProps) {
         active && "bg-primary text-primary-foreground",
       )}
     >
-      <div className="h-4 w-4 flex-shrink-0">{icon}</div>
+      <div className="h-4 w-4 shrink-0">{icon}</div>
       <span className="whitespace-nowrap">{label}</span>
     </Button>
   );
@@ -45,7 +45,7 @@ function UserMenu() {
         >
           <AppAvatar src={user?.avatar} name={user?.name} className="h-4 w-4" />
           <span className="whitespace-nowrap">{user?.name}</span>
-          <ChevronDown className="h-4 w-4 flex-shrink-0" />
+          <ChevronDown className="h-4 w-4 shrink-0" />
         </Button>
       </DropdownMenuTrigger>
 
@@ -86,14 +86,11 @@ export default function AppNavbar({ path }: { path: string }) {
               `}
             >
               {navItems.map((item) => (
-                <Link href={item.pathPrefix} key={item.label}>
-                  <NavItem
-                    key={item.label}
-                    icon={item.icon}
-                    label={item.label}
-                    active={navItemLabel === item.label}
-                  />
-                </Link>
+                <NavItemLink
+                  key={item.label}
+                  item={item}
+                  active={navItemLabel === item.label}
+                />
               ))}
             </div>
           </div>
@@ -136,18 +133,12 @@ export default function AppNavbar({ path }: { path: string }) {
             <div className="flex flex-col space-y-1 px-6 py-4">
               {/* Mobile Navigation Items */}
               {navItems.map((item) => (
-                <Link
-                  href={item.pathPrefix}
+                <NavItemLink
                   key={item.label}
+                  item={item}
+                  active={navItemLabel === item.label}
                   onClick={() => setIsMobileMenuOpen(false)}
-                >
-                  <NavItem
-                    key={item.label}
-                    icon={item.icon}
-                    label={item.label}
-                    active={navItemLabel === item.label}
-                  />
-                </Link>
+                />
               ))}
 
               {/* Mobile User Menu */}
@@ -164,12 +155,21 @@ export default function AppNavbar({ path }: { path: string }) {
   );
 }
 
-interface NavItem {
+interface BaseNavItem {
   icon: React.ReactNode;
   label: string;
+}
+
+interface InternalNavItem extends BaseNavItem {
   pathPrefix: string;
 }
 
+interface ExternalNavItem extends BaseNavItem {
+  externalLink: string;
+}
+
+type NavItem = InternalNavItem | ExternalNavItem;
+
 const navItems: NavItem[] = [
   {
     icon: <BarChart3 className="h-full w-full" />,
@@ -181,24 +181,48 @@ const navItems: NavItem[] = [
     label: "挑戰題目",
     pathPrefix: "/challenges",
   },
-  {
-    icon: <MessageSquare className="h-full w-full" />,
-    label: "經驗分享",
-    pathPrefix: "/comments",
-  },
   {
     icon: <BookOpen className="h-full w-full" />,
     label: "補充資料",
     pathPrefix: "/materials",
   },
+  {
+    icon: <MessageSquare className="h-full w-full" />,
+    label: "意見分享",
+    externalLink: "https://community.dbplay.app/discord",
+  },
 ];
 
 function getActiveNavItemLabel(path: string): string | null {
   for (const item of navItems) {
-    if (path.startsWith(item.pathPrefix)) {
+    if ("pathPrefix" in item && path.startsWith(item.pathPrefix)) {
       return item.label;
     }
   }
 
   return null;
 }
+
+function NavItemLink({ item, active, onClick }: { item: NavItem; active?: boolean; onClick?: () => void }) {
+  if ("pathPrefix" in item) {
+    return (
+      <Link href={item.pathPrefix} onClick={onClick}>
+        <NavItem
+          icon={item.icon}
+          label={item.label}
+          active={active}
+        />
+      </Link>
+    );
+  }
+
+  return (
+    <a href={item.externalLink} target="_blank" rel="noopener noreferrer" onClick={onClick}>
+      <NavItem
+        icon={item.icon}
+        label={item.label}
+        active={active}
+      />
+    </a>
+  );
+}
diff --git a/components/not-found-layout/current-page.lazy.tsx b/components/not-found-layout/current-page.lazy.tsx
@@ -0,0 +1,8 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import CurrentPage from "./current-page";
+
+export const CurrentPageLazy = dynamic(() => Promise.resolve(CurrentPage), {
+  ssr: false,
+});
diff --git a/components/not-found-layout/current-page.tsx b/components/not-found-layout/current-page.tsx
@@ -0,0 +1,9 @@
+/**
+ * Get the current page URL.
+ *
+ * Note that this function is not SSR-friendly.
+ * You should import it with `current-page.lazy.tsx`, which disables SSR.
+ */
+export default function CurrentPage() {
+  return <p>網址：{window.location.href}</p>;
+}
diff --git a/components/not-found-layout/index.tsx b/components/not-found-layout/index.tsx
@@ -0,0 +1,55 @@
+import { Logo } from "@/components/logo";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { AlertTriangle } from "lucide-react";
+import Link from "next/link";
+import { Suspense } from "react";
+import { CurrentPageLazy } from "./current-page.lazy";
+
+export default async function NotFoundLayout() {
+  return (
+    <div
+      className={`
+        flex min-h-svh flex-col items-center justify-center gap-6
+        bg-linear-to-br from-red-50 via-white to-red-100 p-6
+        md:p-10
+      `}
+    >
+      <Link
+        href="/"
+        className={`flex items-center gap-2 self-center font-medium`}
+      >
+        <div
+          className={`
+            flex size-6 items-center justify-center rounded-md
+            text-primary-foreground
+          `}
+        >
+          <Logo />
+        </div>
+        資料庫練功坊
+      </Link>
+      <Card className="min-w-md">
+        <CardHeader className="flex w-full flex-col items-center text-center">
+          <AlertTriangle className="mb-2 size-7 text-red-500" />
+          <CardTitle className="text-xl">找不到此頁面</CardTitle>
+          <CardDescription>
+            此頁面不存在或已經被移除。<br />請確認網址是否正確，或回到首頁。
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col items-center gap-4">
+          <Button asChild variant="outline">
+            <Link href="/">回到首頁</Link>
+          </Button>
+        </CardContent>
+        <CardFooter
+          className={`justify-center text-center text-xs text-muted-foreground`}
+        >
+          <Suspense>
+            <CurrentPageLazy />
+          </Suspense>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "foxact": "^0.2.49",
     "graphql": "^16.11.0",
     "lucide-react": "^0.546.0",
-    "next": "16.0.0-canary.17",
+    "next": "16.0.0",
     "next-themes": "^0.4.6",
     "posthog-js": "1.278.0",
     "posthog-node": "^5.10.2",
@@ -81,7 +81,7 @@
     "@typescript-eslint/parser": "^8.46.2",
     "dprint": "^0.50.2",
     "eslint": "^9.38.0",
-    "eslint-config-next": "16.0.0-canary.17",
+    "eslint-config-next": "16.0.0",
     "eslint-plugin-better-tailwindcss": "^3.7.10",
     "tailwindcss": "^4.1.15",
     "tw-animate-css": "^1.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
