Shadcdn Sidebar

app/(main)/[owner]/[repo]/[branch]/collaborators/page.tsx

@@ -8,7 +8,7 @@ export default function Page() {
   if (!config) throw new Error(`Configuration not found.`);
 
   return (
-    <div className="max-w-screen-sm mx-auto flex-1 flex flex-col h-full">
+    <div className="max-w-(--breakpoint-sm) mx-auto flex-1 flex flex-col h-full">
       <header className="flex items-center mb-6">
         <h1 className="font-semibold text-lg md:text-2xl">Collaborators</h1>
       </header>

app/(main)/[owner]/[repo]/[branch]/collection/[name]/edit/[path]/page.tsx

@@ -1,27 +1,28 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, use } from "react";
 import { useConfig } from "@/contexts/config-context";
 import { getSchemaByName } from "@/lib/schema";
 import { EntryEditor } from "@/components/entry/entry-editor";
 
-export default function Page({
-  params
-}: {
-  params: {
-    owner: string;
-    repo: string;
-    branch: string;
-    name: string;
-    path: string;
+export default function Page(
+  props: {
+    params: Promise<{
+      owner: string;
+      repo: string;
+      branch: string;
+      name: string;
+      path: string;
+    }>
   }
-}) {
+) {
+  const params = use(props.params);
   const { config } = useConfig();
   if (!config) throw new Error(`Configuration not found.`);
 
   const schema = useMemo(() => getSchemaByName(config.object, decodeURIComponent(params.name)), [config, params.name]);
   if (!schema) throw new Error(`Schema not found for ${decodeURIComponent(params.name)}.`);
-  
+
   return (
     <EntryEditor name={decodeURIComponent(params.name)} path={decodeURIComponent(params.path)}/>
   );

app/(main)/[owner]/[repo]/[branch]/collection/[name]/new/page.tsx

@@ -1,19 +1,21 @@
-"use client";
+"use client";;
+import { use } from "react";
 
 import { useSearchParams } from "next/navigation";
 import { EntryEditor } from "@/components/entry/entry-editor";
 
-export default function Page({
-  params
-}: {
-  params: {
-    owner: string;
-    repo: string;
-    branch: string;
-    name: string;
-    path: string;
+export default function Page(
+  props: {
+    params: Promise<{
+      owner: string;
+      repo: string;
+      branch: string;
+      name: string;
+      path: string;
+    }>
   }
-}) {
+) {
+  const params = use(props.params);
   const searchParams = useSearchParams();
   const parent = searchParams.get("parent") || undefined;
 

app/(main)/[owner]/[repo]/[branch]/collection/[name]/page.tsx

@@ -1,21 +1,22 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, use } from "react";
 import { useSearchParams } from "next/navigation";
 import { useConfig } from "@/contexts/config-context";
 import { getSchemaByName } from "@/lib/schema";
 import { CollectionView } from "@/components/collection/collection-view";
 
-export default function Page({
-  params
-}: {
-  params: {
-    owner: string;
-    repo: string;
-    branch: string;
-    name: string
+export default function Page(
+  props: {
+    params: Promise<{
+      owner: string;
+      repo: string;
+      branch: string;
+      name: string
+    }>
   }
-}) {
+) {
+  const params = use(props.params);
   const { config } = useConfig();
   if (!config) throw new Error(`Configuration not found.`);
 
@@ -27,7 +28,7 @@ export default function Page({
   const path = searchParams.get("path") || "";
 
   return (
-    <div className="max-w-screen-xl mx-auto flex-1 flex flex-col">
+    <div className="max-w-(--breakpoint-xl) mx-auto flex-1 flex flex-col">
       <header className="flex items-center mb-6">
         <h1 className="font-semibold text-lg md:text-2xl">{ schema.label || schema.name } </h1>
       </header>

app/(main)/[owner]/[repo]/[branch]/file/[name]/page.tsx

@@ -1,26 +1,27 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, use } from "react";
 import { useConfig } from "@/contexts/config-context";
 import { EntryEditor } from "@/components/entry/entry-editor";
 import { getSchemaByName } from "@/lib/schema";
 
-export default function Page({
-  params
-}: {
-  params: {
-    owner: string;
-    repo: string;
-    branch: string;
-    name: string;
+export default function Page(
+  props: {
+    params: Promise<{
+      owner: string;
+      repo: string;
+      branch: string;
+      name: string;
+    }>
   }
-}) {
+) {
+  const params = use(props.params);
   const { config } = useConfig();
   if (!config) throw new Error(`Configuration not found.`);
-  
+
   const schema = useMemo(() => getSchemaByName(config?.object, decodeURIComponent(params.name)), [config, params.name]);
   if (!schema) throw new Error(`Schema not found for ${decodeURIComponent(params.name)}.`);
-  
+
   return (
     <EntryEditor name={params.name} path={schema.path} title={schema.label || schema.name}/>
   );

app/(main)/[owner]/[repo]/[branch]/layout.tsx

@@ -9,13 +9,24 @@ import { RepoLayout } from "@/components/repo/repo-layout";
 import { EmptyCreate } from "@/components/empty-create";
 import { Message } from "@/components/message";
 
-export default async function Layout({
-  children,
-  params: { owner, repo, branch },
-}: {
-  children: React.ReactNode;
-  params: { owner: string; repo: string; branch: string; };
-}) {
+export default async function Layout(
+  props: {
+    children: React.ReactNode;
+    params: Promise<{ owner: string; repo: string; branch: string; }>;
+  }
+) {
+  const params = await props.params;
+
+  const {
+    owner,
+    repo,
+    branch
+  } = params;
+
+  const {
+    children
+  } = props;
+
   const { session, user } = await getAuth();
   if (!session) return redirect("/sign-in");
 
@@ -32,9 +43,9 @@ export default async function Layout({
     version: "",
     object: {}
   }
-  
+
   let errorMessage = null;
-  
+
   // We try to retrieve the config file (.pages.yml)
   try {
     const octokit = createOctokitInstance(token);

app/(main)/[owner]/[repo]/[branch]/media/[name]/page.tsx

@@ -2,28 +2,30 @@
 
 import { useSearchParams } from "next/navigation";
 import { useConfig } from "@/contexts/config-context";
-import { MediaView} from "@/components/media/media-view";
+import { MediaView } from "@/components/media/media-view";
+import { use } from "react";
 
 export default function Page({
   params
 }: {
-  params: {
+  params: Promise<{
     name: string;
-  }
+  }>;
 }) {
+  const { name } = use(params);
   const searchParams = useSearchParams();
   const path = searchParams.get("path") || "";
 
   const { config } = useConfig();
   if (!config) throw new Error(`Configuration not found.`);
-  
+
   return (
-    <div className="max-w-screen-xl mx-auto flex-1 flex flex-col h-full">
+    <div className="max-w-(--breakpoint-xl) mx-auto flex-1 flex flex-col h-full">
       <header className="flex items-center mb-6">
         <h1 className="font-semibold text-lg md:text-2xl">Media</h1>
       </header>
       <div className="flex flex-col relative flex-1">
-        <MediaView initialPath={path} media={params.name} />
+        <MediaView initialPath={path} media={name} />
       </div>
     </div>
   );

app/(main)/[owner]/[repo]/layout.tsx

@@ -6,13 +6,23 @@ import { RepoProvider } from "@/contexts/repo-context";
 import { Message } from "@/components/message";
 import { Repo } from "@/types/repo";
 
-export default async function Layout({
-  children,
-  params: { owner, repo }
-}: {
-  children: React.ReactNode;
-  params: { owner: string; repo: string; };
-}) {
+export default async function Layout(
+  props: {
+    children: React.ReactNode;
+    params: Promise<{ owner: string; repo: string; }>;
+  }
+) {
+  const params = await props.params;
+
+  const {
+    owner,
+    repo
+  } = params;
+
+  const {
+    children
+  } = props;
+
   const { session, user } = await getAuth();
   if (!session) return redirect("/sign-in");
 

app/(main)/main-root-layout.tsx

@@ -2,19 +2,19 @@ import { User } from "@/components/user";
 import { About } from "@/components/about";
 
 export function MainRootLayout({
-  children,
+	children,
 }: {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }) {
-	return(
-    <div className="flex flex-col h-screen">
+	return (
+		<div className="flex flex-col w-full h-screen">
 			<main className="flex-1 w-full overflow-auto">
 				{children}
 			</main>
-			<footer className="flex items-center gap-2 border-t px-2 py-2 lg:px-4 lg:py-3 mt-auto">
-        <User className="mr-auto"/>
-        <About/>
-      </footer>
+			<footer className="flex items-center justify-between gap-2 border-t px-2 py-2 lg:px-4 lg:py-3 mt-auto">
+				<User />
+				<About className="w-auto" />
+			</footer>
 		</div>
 	);
 }

app/(main)/page.tsx

@@ -20,7 +20,7 @@ export default function Page() {
 
 	return (
     <MainRootLayout>
-			<div className="max-w-screen-sm mx-auto p-4 md:p-6 space-y-6">
+			<div className="max-w-(--breakpoint-sm) mx-auto p-4 md:p-6 space-y-6">
 				{user.accounts.length > 0
 					? <>
 							<h2 className="font-semibold text-lg md:text-2xl tracking-tight">Last visited</h2>

app/(main)/settings/page.tsx

@@ -24,8 +24,8 @@ import { ArrowLeft } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 export default async function Page() {
-	const { user } = await getAuth();
-	if (!user) throw new Error("User not found");
+  const { user } = await getAuth();
+  if (!user) throw new Error("User not found");
 
   const displayName = user.githubId ? user.githubName || user.githubUsername : user.email;
 
@@ -53,7 +53,7 @@ export default async function Page() {
                       Name
                     </Label>
                     <div className="col-span-3">
-                      <Input name="name" disabled defaultValue={displayName}/>
+                      <Input name="name" disabled defaultValue={displayName} />
                     </div>
                   </div>
                   <div className="grid grid-cols-4 items-center gap-4">
@@ -85,15 +85,15 @@ export default async function Page() {
               <Button size="sm" className="ml-auto" disabled>Save profile</Button>
             </CardFooter>
           </Card>
-          
+
           {user.githubId &&
             <Card>
               <CardHeader>
                 <CardTitle className="text-base md:text-lg">Installations</CardTitle>
                 <CardDescription>Manage the accounts the Github application is installed on.</CardDescription>
               </CardHeader>
               <CardContent>
-                <Installations/>
+                <Installations />
               </CardContent>
             </Card>
           }

app/api/[owner]/[repo]/[branch]/branches/route.ts

@@ -12,8 +12,9 @@ import { getToken } from "@/lib/token";
 
 export async function POST(
   request: Request,
-  { params }: { params: { owner: string, repo: string, branch: string } }
+  props: { params: Promise<{ owner: string, repo: string, branch: string }> }
 ) {
+  const params = await props.params;
   try {
     const { user, session } = await getAuth();
     if (!session) return new Response(null, { status: 401 });

app/api/[owner]/[repo]/[branch]/collections/[name]/route.ts

@@ -22,8 +22,9 @@ import { getCollectionCache, checkRepoAccess } from "@/lib/githubCache";
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { owner: string, repo: string, branch: string, name: string } }
+  props: { params: Promise<{ owner: string, repo: string, branch: string, name: string }> }
 ) {
+  const params = await props.params;
   try {
     const { user, session } = await getAuth();
     if (!session) return new Response(null, { status: 401 });

app/api/[owner]/[repo]/[branch]/entries/[path]/history/route.ts

@@ -16,8 +16,9 @@ import { getToken } from "@/lib/token";
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { owner: string, repo: string, branch: string, path: string } }
+  props: { params: Promise<{ owner: string, repo: string, branch: string, path: string }> }
 ) {
+  const params = await props.params;
   try {
     const { user, session } = await getAuth();
     if (!session) return new Response(null, { status: 401 });

app/api/[owner]/[repo]/[branch]/entries/[path]/route.ts

@@ -20,8 +20,9 @@ import { getToken } from "@/lib/token";
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { owner: string, repo: string, branch: string, path: string } }
+  props: { params: Promise<{ owner: string, repo: string, branch: string, path: string }> }
 ) {
+  const params = await props.params;
   try {
     const { user, session } = await getAuth();
     if (!session) return new Response(null, { status: 401 });