Add issue tracking page for displaying and managing current known issues

app/known-issues/issues.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+type Severity = "low" | "medium" | "high" | "critical";
+
+export type IssueEntry = {
+  date: string;
+  title: string;
+  description: React.ReactNode;
+  repositoryId: string;
+  issueLink: string;
+  severity?: Severity;
+  screenshot?: {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+  };
+};
+
+const issues: IssueEntry[] = [
+  {
+    date: "",
+    title: "Remote SSH not supported",
+    description: (
+      <>
+        <p>
+          Currently PearAI does not support remote SSH. We plan on supporting
+          this in the near future.
+        </p>
+      </>
+    ),
+    repositoryId: "pearai-app",
+    issueLink: "",
+  },
+  {
+    date: "",
+    title: "Liveshare not supported",
+    description: (
+      <>
+        <p>
+          Currently PearAI does not support Liveshare extension. We plan on
+          supporting this in the near future.
+        </p>
+      </>
+    ),
+    repositoryId: "pearai-app",
+    issueLink: "",
+  },
+];
+
+export default issues;

app/known-issues/issuesList.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+import { getTimePassed } from "@/utils/dateUtils";
+import { Info, AlertCircle, AlertTriangle, XCircle } from "lucide-react";
+
+type Severity = "low" | "medium" | "high" | "critical";
+
+type IssueItemProps = {
+  date: string;
+  title: string;
+  description: React.ReactNode;
+  issueLink: string;
+  severity?: Severity;
+  screenshot?: {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+  };
+};
+
+export const IssueList: React.FC<IssueItemProps> = ({
+  date,
+  title,
+  description,
+  severity,
+  screenshot,
+}) => {
+  const getSeverityIcon = () => {
+    if (!severity) return null;
+    switch (severity) {
+      case "low":
+        return <Info className="h-6 w-6 text-blue-500" />;
+      case "medium":
+        return <AlertCircle className="h-6 w-6 text-yellow-500" />;
+      case "high":
+        return <AlertTriangle className="h-6 w-6 text-orange-500" />;
+      case "critical":
+        return <XCircle className="h-6 w-6 text-red-600" />;
+      default:
+        return <Info className="h-6 w-6 text-gray-500" />;
+    }
+  };
+
+  const getSeverityLabel = () => {
+    if (!severity) return "Severity Unknown";
+    switch (severity) {
+      case "low":
+        return "Low Severity";
+      case "medium":
+        return "Medium Severity";
+      case "high":
+        return "High Severity";
+      case "critical":
+        return "Critical Severity";
+      default:
+        return "Severity Unknown";
+    }
+  };
+
+  return (
+    <article className="mb-8 w-full max-w-full">
+      <div className="bg-white flex flex-col rounded-lg border border-gray-200 p-6 shadow-sm transition-shadow duration-300 hover:shadow-md">
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between">
+          {/* Icon and Title */}
+          <div className="flex items-center">
+            {/* Icon */}
+            {severity && <div className="mr-3">{getSeverityIcon()}</div>}
+            {/* Issue Title */}
+            <h3 className="text-xl font-bold text-gray-900">
+              <p>{title}</p>
+            </h3>
+          </div>
+
+          {/* Date */}
+          {date && (
+            <div className="mt-2 text-sm text-gray-500 sm:mt-0">
+              <time dateTime={date}>{date}</time>
+              <span className="ml-2">({getTimePassed(date)})</span>
+            </div>
+          )}
+        </div>
+        {/* Severity Label */}
+        {severity && (
+          <div className="mt-2">
+            <span
+              className={cn(
+                "inline-block rounded-full px-3 py-1 text-sm font-semibold",
+                severity === "low" && "bg-blue-100 text-blue-800",
+                severity === "medium" && "bg-yellow-100 text-yellow-800",
+                severity === "high" && "bg-orange-100 text-orange-800",
+                severity === "critical" && "bg-red-100 text-red-800",
+              )}
+            >
+              {getSeverityLabel()}
+            </span>
+          </div>
+        )}
+        {/* Description */}
+        <div className="mt-4 text-gray-700">{description}</div>
+        {/* Screenshot */}
+        {screenshot && (
+          <div className="mt-4">
+            <Image
+              src={screenshot.src}
+              alt={screenshot.alt}
+              width={screenshot.width}
+              height={screenshot.height}
+              className="h-auto w-full rounded-md border"
+            />
+          </div>
+        )}
+      </div>
+    </article>
+  );
+};

app/known-issues/page.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import issues from "./issues";
+import { IssueList } from "./issuesList";
+import { Metadata } from "next";
+import { constructMetadata } from "@/lib/utils";
+
+export const metadata: Metadata = constructMetadata({
+  title: "Issues",
+  description: "This page lists all current known issues and their status.",
+  canonical: "/known-issues",
+});
+
+const CurrentKnownIssues: React.FC = () => {
+  return (
+    <div className="mx-auto mb-32 mt-36 min-h-screen w-full max-w-3xl overflow-hidden px-10">
+      <h1 className="mb-12 text-center text-4xl font-extrabold text-primary-700">
+        Current Known Issues
+      </h1>
+      <main>
+        {issues.map((issue, index) => {
+          return <IssueList key={index} {...issue} />;
+        })}
+      </main>
+    </div>
+  );
+};
+
+export default CurrentKnownIssues;

components/faq.tsx

@@ -125,12 +125,12 @@ export default FAQComponent;
 const faqData: FAQItem[] = [
   {
     id: "name",
-    question: "0. Why is it called PearAI?!",
+    question: "0. Why is it called PearAI?",
     answer: <p>Pair programming... Pear Programming... PearAI! 🍐💡</p>,
   },
   {
     id: "competitors",
-    question: "1. Why PearAI over competitors?!",
+    question: "1. Why PearAI over competitors?",
     answer: (
       <div>
         <p>Over using vanilla LLM’s:</p>
@@ -191,7 +191,7 @@ const faqData: FAQItem[] = [
   },
   {
     id: "privacy",
-    question: "2. Does PearAI store my code?!",
+    question: "2. Does PearAI store my code?",
     answer: (
       <p>
         No. All codebase indexing occurs and remains strictly local on your
@@ -211,7 +211,7 @@ const faqData: FAQItem[] = [
   },
   {
     id: "contribute",
-    question: "3. How can I contribute to PearAI?!",
+    question: "3. How can I contribute to PearAI?",
     answer: (
       <p>
         See the contributor&apos;s section:{" "}
@@ -222,4 +222,17 @@ const faqData: FAQItem[] = [
       </p>
     ),
   },
+  {
+    id: "known-issues",
+    question: "4. What are current known issues?",
+    answer: (
+      <p>
+        See the{" "}
+        <Link className="underline" href="/known-issues">
+          known issues section
+        </Link>
+        .
+      </p>
+    ),
+  },
 ];