feat(dashboard): list sources with statistics

apps/dashboard/src/app/[locale]/(app)/(sidebar)/articles/page.tsx

@@ -1,3 +1,9 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Articles | Basango Dashboard",
+};
+
 export default function Page() {
   return (
     <div className="flex flex-1 flex-col gap-4 p-4 pt-0">

apps/dashboard/src/app/[locale]/(app)/(sidebar)/layout.tsx

@@ -1,14 +1,6 @@
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@basango/ui/components/breadcrumb";
-import { Separator } from "@basango/ui/components/separator";
-import { SidebarInset, SidebarProvider, SidebarTrigger } from "@basango/ui/components/sidebar";
+import { SidebarInset, SidebarProvider } from "@basango/ui/components/sidebar";
 
+import { PageHeader } from "@/components/shell/page-header";
 import { AppSidebar } from "@/components/sidebar/app-sidebar";
 import { HydrateClient } from "@/trpc/server";
 
@@ -19,23 +11,7 @@ export default async function Layout({ children }: { children: React.ReactNode }
         <AppSidebar />
 
         <SidebarInset>
-          <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
-            <div className="flex items-center gap-2 px-4">
-              <SidebarTrigger className="-ml-1" />
-              <Separator className="mr-2 data-[orientation=vertical]:h-4" orientation="vertical" />
-              <Breadcrumb>
-                <BreadcrumbList>
-                  <BreadcrumbItem className="hidden md:block">
-                    <BreadcrumbLink href="#">Building Your Application</BreadcrumbLink>
-                  </BreadcrumbItem>
-                  <BreadcrumbSeparator className="hidden md:block" />
-                  <BreadcrumbItem>
-                    <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-                  </BreadcrumbItem>
-                </BreadcrumbList>
-              </Breadcrumb>
-            </div>
-          </header>
+          <PageHeader />
           {children}
         </SidebarInset>
       </SidebarProvider>

apps/dashboard/src/app/[locale]/(app)/(sidebar)/sources/page.tsx

@@ -1,12 +1,26 @@
-export default function Page() {
+import { Metadata } from "next";
+
+import { PageLayout } from "@/components/shell/page-layout";
+import { SourceCard } from "@/components/source-card";
+import { batchPrefetch, getQueryClient, trpc } from "@/trpc/server";
+
+export const metadata: Metadata = {
+  title: "Sources | Basango Dashboard",
+};
+
+export default async function Page() {
+  const queryClient = getQueryClient();
+
+  batchPrefetch([trpc.sources.get.queryOptions()]);
+  const sources = await queryClient.fetchQuery(trpc.sources.get.queryOptions());
+
   return (
-    <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
-      <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-        <div className="bg-muted/50 aspect-video rounded-xl" />
-        <div className="bg-muted/50 aspect-video rounded-xl" />
-        <div className="bg-muted/50 aspect-video rounded-xl" />
+    <PageLayout leading="Manage your news sources" title="Sources">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        {sources.map((source) => (
+          <SourceCard key={source.id} {...source} />
+        ))}
       </div>
-      <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
-    </div>
+    </PageLayout>
   );
 }