Feature/note detail page

src/app/notes/[id]/page.tsx

@@ -1,6 +1,7 @@
 import { notFound } from 'next/navigation';
+import { BaseCard } from '@src/components/common/BaseCard';
 import Header from '@src/components/header/Header';
-import RatingWidget from '@src/components/sections/RatingWidget';
+import NoteInfoPanel from '@src/components/sections/NoteInfoPanel';
 import { api } from '@src/trpc/server';
 
 type NotePageProps = {
@@ -13,54 +14,21 @@ export default async function NotePage({ params }: NotePageProps) {
   if (!file) notFound();
 
   return (
-    <>
+    <div className="flex flex-col h-full">
       <Header />
-      <main>
-        <h1>{file.name}</h1>
-        <p>{file.description || 'No provided description.'}</p>
+      <main className="p-4 pt-0 flex w-full h-full flex-col items-center gap-4">
+        {/* Info panel pinned to the top, floats over the PDF */}
+        <NoteInfoPanel file={file} />
 
-        <section>
-          <p>
-            <strong>Course:</strong> {file.section?.prefix}{' '}
-            {file.section?.number}
-          </p>
-          <p>
-            <strong>Section: </strong> {file.section?.sectionCode}
-          </p>
-          <p>
-            <strong>Professor:</strong> {file.section?.profFirst}{' '}
-            {file.section?.profLast}
-          </p>
-          <p>
-            <strong>Author:</strong>{' '}
-            {file.author
-              ? `${file.author.firstName} ${file.author.lastName}`
-              : 'Unknown'}
-          </p>
-          <p>
-            <strong>Last Updated:</strong>{' '}
-            {file.updatedAt?.toLocaleDateString()}
-          </p>
-        </section>
-
-        <section>
-          <RatingWidget fileId={id} />
-        </section>
-
-        <section>
-          <h2>PDF</h2>
-          {file.publicUrl ? (
-            <iframe
-              src={file.publicUrl}
-              title={file.name}
-              width="100%"
-              height="800px"
-            />
-          ) : (
-            <p>PDF not available yet.</p>
-          )}
-        </section>
+        {/* Scrollable area with white card background for the PDF */}
+        <BaseCard className="h-full min-h-[50vh] w-full overflow-hidden max-w-6xl">
+          <iframe
+            src={file.publicUrl}
+            title={file.name}
+            className="h-full w-full border-0"
+          />
+        </BaseCard>
       </main>
-    </>
+    </div>
   );
 }

src/components/sections/FileCard.tsx

@@ -80,12 +80,7 @@ export default function FileCard({ file }: FileCardProps) {
 
   return (
     <BaseCard variant="interactive" className="flex h-full flex-col">
-      <Link
-        href={file.publicUrl}
-        target="_blank"
-        rel="noreferrer"
-        className="flex grow flex-col"
-      >
+      <Link href={`/notes/${file.id}`} className="flex grow flex-col">
         <div className="overflow-hidden rounded-t-lg border-b border-neutral-200 bg-white dark:border-neutral-600 dark:bg-neutral-700">
           {thumbData ? (
             <div className="relative aspect-[3/4] w-full">
@@ -136,7 +131,7 @@ export default function FileCard({ file }: FileCardProps) {
       </div>
 
       <p className="px-4 pb-2 text-xs font-medium text-slate-600 dark:text-slate-400">
-        Uploaded by{' '}
+        By{' '}
         {file.author?.username ? (
           <Link
             href={`/profile/${file.author.username}`}

src/components/sections/NoteInfoPanel.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { Collapse, IconButton, Typography } from '@mui/material';
+import Link from 'next/link'; // To link back to specific profiles
+import { useState } from 'react';
+import Panel from '@src/components/common/Panel';
+import NoteDeleteButton from '@src/components/sections/NoteDeleteButton';
+import NoteEditButton from '@src/components/sections/NoteEditButton';
+import RatingWidget from '@src/components/sections/RatingWidget';
+import ReportButton from '@src/components/sections/ReportButton';
+import SaveButton from '@src/components/sections/SaveButton';
+import type { SelectFileWithUserMetadataAndSection } from '@src/server/db/models';
+import { authClient } from '@src/utils/auth-client';
+
+type NoteInfoPanelProps = {
+  file: SelectFileWithUserMetadataAndSection;
+};
+
+export default function NoteInfoPanel({ file }: NoteInfoPanelProps) {
+  const [expanded, setExpanded] = useState(true);
+  const { data: session } = authClient.useSession();
+  const isAuthor = session?.user?.id === file.authorId;
+
+  return (
+    <Panel
+      className="w-full py-2 border-l-4 border-royal dark:border-cornflower-300 rounded-t-none gap-0"
+      smallPadding
+    >
+      <div className="flex flex-col">
+        {/* Top piece, always visible, has the name and buttons */}
+        <div className="flex flex-wrap items-center gap-2">
+          <div className="flex items-center w-full md:w-auto flex-grow gap-2">
+            <IconButton
+              onClick={() => setExpanded((v) => !v)}
+              aria-label={
+                expanded ? 'Collapse info panel' : 'Expand info panel'
+              }
+              size="large"
+            >
+              <KeyboardArrowUpIcon
+                fontSize="inherit"
+                className={`transition ${expanded ? 'rotate-180' : 'rotate-90'}`}
+              />
+            </IconButton>
+            <Typography variant="h2" className="text-xl font-bold">
+              {file.name}
+            </Typography>
+          </div>
+          <div className="w-full md:w-auto flex-shrink-0 flex md:ml-auto justify-end flex-wrap items-center gap-3">
+            <RatingWidget fileId={file.id} />
+            {isAuthor && <NoteEditButton fileId={file.id} />}
+            {isAuthor && <NoteDeleteButton fileId={file.id} />}
+            {!isAuthor && <ReportButton fileId={file.id} />}
+            <SaveButton fileId={file.id} />
+            <IconButton
+              LinkComponent={Link}
+              href={file.publicUrl}
+              target="_blank"
+              size="small"
+            >
+              <OpenInNewIcon fontSize="small" />
+            </IconButton>
+          </div>
+        </div>
+
+        {/* Bottom piece, collapsible, has author, professor, description, and last modified date */}
+        <Collapse in={expanded}>
+          <div className="pb-2 px-3 flex flex-col gap-1">
+            <p className="text-sm font-medium text-slate-800 dark:text-slate-200">
+              By{' '}
+              {
+                file.author.username ? (
+                  <Link
+                    href={`/profile/${file.author.username}`}
+                    className="underline hover:text-slate-900 dark:hover:text-slate-200"
+                  >
+                    {file.author.username}
+                  </Link>
+                ) : (
+                  `${file.author.firstName} ${file.author.lastName}`
+                ) // Render as plain text if no username to link to
+              }
+            </p>
+            {file.section && (
+              <p className="text-sm font-medium text-slate-800 dark:text-slate-200">
+                <Link
+                  href={`/notes/${file.section.prefix}/${file.section.number}`}
+                  className="underline hover:text-slate-900 dark:hover:text-slate-200"
+                >
+                  {file.section.prefix} {file.section.number}
+                </Link>
+                .{file.section.sectionCode}{' '}
+                <Link
+                  href={`/notes/${file.section.profFirst}/${file.section.profLast}`}
+                  className="underline hover:text-slate-900 dark:hover:text-slate-200"
+                >
+                  {file.section.profFirst} {file.section.profLast}
+                </Link>{' '}
+                {file.section.term} {file.section.year}
+              </p>
+            )}
+            {file.description ? (
+              <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mt-1">
+                {file.description}
+              </p>
+            ) : (
+              <p className="text-sm text-slate-400 italic mt-1">
+                No provided description.
+              </p>
+            )}
+            <span className="text-xs text-slate-600 dark:text-slate-400 mt-1">
+              Last modified{' '}
+              {file.updatedAt.toLocaleDateString('en-US', {
+                day: 'numeric',
+                month: 'short',
+                year: 'numeric',
+              })}
+            </span>
+          </div>
+        </Collapse>
+      </div>
+    </Panel>
+  );
+}

src/server/db/models.ts

@@ -74,6 +74,35 @@ export type SelectFileWithUserMetadata = z.infer<
   typeof selectFileWithUserMetadata
 >;
 
+export const selectFileWithAuthorPreview = selectFile.extend({
+  author: selectUserMetadata.pick({
+    username: true,
+    firstName: true,
+    lastName: true,
+  }),
+});
+
+export type SelectFileWithAuthorPreview = z.infer<
+  typeof selectFileWithAuthorPreview
+>;
+
+/* =========================
+   FILE WITH USER METADATA AND SECTION
+========================= */
+
+export const selectFileWithUserMetadataAndSection = selectFile.extend({
+  author: selectUserMetadata.pick({
+    username: true,
+    firstName: true,
+    lastName: true,
+  }),
+  section: selectSection.nullable(),
+});
+
+export type SelectFileWithUserMetadataAndSection = z.infer<
+  typeof selectFileWithUserMetadataAndSection
+>;
+
 /* =========================
    SECTION WITH FILES
 ========================= */
@@ -95,15 +124,3 @@ export const sectionWithFilesWithUserMetadata = selectSection.extend({
 export type SectionWithFilesWithUserMetadata = z.infer<
   typeof sectionWithFilesWithUserMetadata
 >;
-
-export const selectFileWithAuthorPreview = selectFile.extend({
-  author: selectUserMetadata.pick({
-    username: true,
-    firstName: true,
-    lastName: true,
-  }),
-});
-
-export type SelectFileWithAuthorPreview = z.infer<
-  typeof selectFileWithAuthorPreview
->;