feat(dashboard): inline Quick log form on the dashboard hero

README.md

@@ -18,9 +18,9 @@ A modern, web-based amateur radio logging application built with Next.js and Pos
 
 ## Technology Stack
 
-- **Frontend**: Next.js 15 with TypeScript
+- **Frontend**: Next.js 16, React 19, TypeScript 5.8
 - **Backend**: Next.js API Routes
-- **Database**: PostgreSQL with native SQL
+- **Database**: PostgreSQL (raw `pg` at runtime); schema-as-code via Drizzle Kit (`drizzle/schema.ts`)
 - **Authentication**: JWT-based authentication
 - **Styling**: Tailwind CSS
 - **Deployment**: Vercel-ready
@@ -29,7 +29,7 @@ A modern, web-based amateur radio logging application built with Next.js and Pos
 
 ### Prerequisites
 
-- Node.js 18+ 
+- Node.js 20.9+ (required by Next.js 16)
 - PostgreSQL 13+ database
 - Docker and Docker Compose (recommended)
 - Git

src/app/dashboard/page.tsx

@@ -12,6 +12,7 @@ import DXpeditionWidget from '@/components/DXpeditionWidget';
 import LotwSyncIndicator from '@/components/LotwSyncIndicator';
 import QRZSyncIndicator from '@/components/QRZSyncIndicator';
 import Pagination from '@/components/Pagination';
+import QuickLogCard from '@/components/QuickLogCard';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
 import { Chip } from '@/components/ui/chip';
@@ -375,50 +376,12 @@ export default function DashboardPage() {
             </div>
           </Card>
 
-          <Card className="p-4 sm:p-7 flex flex-col gap-5">
-            <div className="flex items-center justify-between">
-              <h2 className="text-[17px] font-semibold">Quick log</h2>
-              <Chip variant="accent" size="sm">
-                <Dot tone="ok" live />
-                Live
-              </Chip>
-            </div>
-            <p className="text-sm text-fg-2">
-              Need more fields? Open the full new-contact form for callsign
-              lookup, RST defaults by mode, station picker, and notes.
-            </p>
-            <Button asChild size="lg" className="w-full">
-              <Link href="/new-contact">
-                <Plus />
-                Log a QSO
-              </Link>
-            </Button>
-            <div className="flex items-center gap-2 text-xs text-fg-2">
-              Press <Kbd>L</Kbd> on any page to jump straight in.
-            </div>
-            <div className="border-t border-line pt-4">
-              <div className="text-[13px] font-medium uppercase tracking-[0.06em] text-fg-2 mb-3">
-                Recent
-              </div>
-              <div className="flex flex-col gap-2">
-                {contacts.slice(0, 4).map((contact) => (
-                  <button
-                    key={contact.id}
-                    type="button"
-                    onClick={() => handleContactClick(contact)}
-                    className="flex justify-between items-center px-3 py-2 rounded-[10px] bg-bg-1 border border-line text-left hover:border-line-hi transition-colors cursor-pointer"
-                  >
-                    <span className="font-mono font-semibold text-fg">
-                      {contact.callsign}
-                    </span>
-                    <span className="text-xs text-fg-2 font-mono">
-                      {contact.band} · {contact.mode} · {formatUtc(contact.datetime)}
-                    </span>
-                  </button>
-                ))}
-              </div>
-            </div>
-          </Card>
+          <QuickLogCard
+            onSaved={() => {
+              fetchContacts(1, pagination.limit);
+              fetchStats();
+            }}
+          />
         </div>
 
         {/* Band activity */}