Improve editor UX/UI and functionality (#14)

* Add validated t3 environment

* Add missing file

* Modernise editor and asset manager

* Add syntax highlighting to markdown editor

* Add ScrollArea to asset manager

* Add search modal and make search ui better, with pagination

* Improved tagging functionality

* Fix transaction type linter error

Added cache time back for images

Author: barisgit

package.json

@@ -22,8 +22,12 @@
   "dependencies": {
     "@auth/drizzle-adapter": "^1.8.0",
     "@codemirror/lang-markdown": "^6.3.2",
+    "@codemirror/language": "^6.11.0",
+    "@codemirror/language-data": "^6.5.1",
     "@codemirror/state": "^6.5.2",
+    "@lezer/highlight": "^1.2.1",
     "@neondatabase/serverless": "^1.0.0",
+    "@radix-ui/react-dialog": "^1.1.10",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.3",
     "@radix-ui/react-popover": "^1.1.7",
@@ -44,9 +48,11 @@
     "@types/pg": "^8.11.13",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@uiw/codemirror-theme-tokyo-night-storm": "^4.23.10",
+    "@uiw/codemirror-theme-xcode": "^4.23.10",
     "@uiw/codemirror-themes": "^4.23.10",
     "@uiw/react-codemirror": "^4.23.10",
     "bcrypt": "^5.1.1",
+    "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "dotenv": "^16.5.0",
     "drizzle-orm": "^0.42.0",

pnpm-lock.yaml

@@ -38,7 +38,7 @@ export default function AssetsAdminPage() {
   );
 
   // Handle asset deletion
-  const handleDeleteAsset = (assetId: number) => {
+  const handleDeleteAsset = (assetId: string) => {
     if (confirm("Are you sure you want to delete this asset?")) {
       deleteAssetMutation.mutate({ id: assetId });
     }
@@ -191,9 +191,9 @@ export default function AssetsAdminPage() {
                     {asset.uploadedBy?.name || "Unknown"}
                   </td>
                   <td className="px-4 py-2">
-                    {asset.pageId ? (
+                    {asset.id ? (
                       <a
-                        href={`/admin/wiki/${asset.pageId}`}
+                        href={`/admin/wiki/${asset.id}`}
                         className="text-blue-600 hover:underline"
                       >
                         View Page

src/app/admin/assets/page.tsx

@@ -1,34 +1,54 @@
 import { NextResponse } from "next/server";
 import { assetService } from "~/lib/services";
+import { z } from "zod";
+
+const ParamsSchema = z.object({
+  id: z.string().uuid("Invalid asset ID format"),
+});
 
 export async function GET(
   request: Request,
-  { params }: { params: Promise<{ id: string }> }
+  context: { params: Promise<{ id: string }> }
 ) {
-  const resolvedParams = await params;
-  void resolvedParams;
   try {
-    const id = parseInt(resolvedParams.id, 10);
-    if (isNaN(id)) {
-      return NextResponse.json({ error: "Invalid asset ID" }, { status: 400 });
+    // Access params from the context
+    const params = context.params;
+    const resolvedParams = await params;
+
+    // Validate the ID format using Zod
+    const validationResult = ParamsSchema.safeParse(resolvedParams);
+    if (!validationResult.success) {
+      console.error("Zod Validation Error:", validationResult.error.format()); // Log detailed Zod error
+      return NextResponse.json(
+        { error: validationResult.error.errors[0].message },
+        { status: 400 }
+      );
     }
 
+    const { id } = validationResult.data;
+
     // Get asset from database using service
     const asset = await assetService.getById(id);
 
     if (!asset) {
       return NextResponse.json({ error: "Asset not found" }, { status: 404 });
     }
 
+    // Extract base64 data if it includes the data URI prefix
+    let base64Data = asset.data;
+    const prefixMatch = asset.data.match(/^data:.*;base64,/);
+    if (prefixMatch) {
+      base64Data = asset.data.substring(prefixMatch[0].length);
+    }
+
     // Decode base64 data
-    const buffer = Buffer.from(asset.data, "base64");
+    const buffer = Buffer.from(base64Data, "base64");
 
-    // Create response with appropriate Content-Type
+    // Create response with appropriate Content-Type and Cache-Control
     return new NextResponse(buffer, {
       headers: {
         "Content-Type": asset.fileType,
         "Content-Disposition": `inline; filename="${asset.fileName}"`,
-        "Cache-Control": "public, max-age=31536000", // Cache for 1 year
       },
     });
   } catch (error) {

src/app/api/assets/[id]/route.ts

@@ -10,7 +10,7 @@ import {
 } from "~/components/ui/card";
 import { WikiBrowser } from "~/components/wiki/WikiBrowser";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
-import { WikiPageList } from "~/components/wiki/WikiPageList";
+import { AllPagesList } from "~/components/wiki/AllPagesList";
 
 export default async function Home() {
   // Server-side data fetching - using our centralized service
@@ -49,7 +49,7 @@ export default async function Home() {
             </TabsContent>
 
             <TabsContent value="all">
-              <WikiPageList initialSortBy="title" initialSortOrder="asc" />
+              <AllPagesList />
             </TabsContent>
           </Tabs>
 

src/app/page.tsx

@@ -12,9 +12,33 @@ export default async function TagPage({
 
   const filteredPages = await dbService.tags.getPagesByTagName(tag);
 
+  // Extract the actual page data from the relations
+  // Need to ensure the shape matches WikiPageListItem (dates might need conversion if inconsistent)
+  const pagesToDisplay =
+    filteredPages?.pages
+      .map((relation) => relation.page)
+      .filter(Boolean) // Filter out any potentially null pages
+      .map((page) => ({
+        ...page,
+        // Convert Date objects to ISO strings to match the expected type
+        createdAt: page.createdAt?.toISOString() || null,
+        updatedAt: page.updatedAt?.toISOString() || null,
+        lockedAt: page.lockedAt?.toISOString() || null, // Add conversion for lockedAt
+        lockExpiresAt: page.lockExpiresAt?.toISOString() || null, // Add conversion for lockExpiresAt
+        // Convert dates within the nested tags array
+        tags:
+          page.tags?.map((tagRelation) => ({
+            ...tagRelation,
+            tag: {
+              ...tagRelation.tag,
+              createdAt: tagRelation.tag.createdAt?.toISOString() || null,
+            },
+          })) || [],
+      })) || [];
+
   return (
     <MainLayout>
-      <div className="space-y-6">
+      <div className="p-4 space-y-6">
         <div className="flex items-center justify-between">
           <div>
             <h1 className="flex items-center text-2xl font-bold">
@@ -31,7 +55,7 @@ export default async function TagPage({
           </div>
         </div>
 
-        <WikiPageList />
+        <WikiPageList pages={pagesToDisplay} isLoading={false} />
       </div>
     </MainLayout>
   );

src/app/tags/[tag]/page.tsx

@@ -1,5 +1,4 @@
 import { UserMenu } from "../auth/UserMenu";
-import { SearchBar } from "~/components/layout/SearchBar";
 import { Suspense } from "react";
 import { ThemeToggle } from "~/components/layout/theme-toggle";
 import { AdminButton } from "~/components/layout/AdminButton";
@@ -8,9 +7,7 @@ export function Header() {
   return (
     <header className="flex items-center justify-between h-16 px-4 border-b shadow-sm border-border-default bg-background-paper">
       <div className="flex items-center flex-1 max-w-xl">
-        <Suspense fallback={<div>Loading search bar...</div>}>
-          <SearchBar />
-        </Suspense>
+        <Suspense fallback={<div>Loading search bar...</div>}></Suspense>
       </div>
 
       <div className="flex items-center space-x-4">