Use niceId

src/app/[orgId]/sites/[niceId]/components/create-site.tsx

@@ -8,14 +8,6 @@ import { z } from "zod"
 import { cn } from "@/lib/utils"
 import { toast } from "@/hooks/use-toast"
 import { Button, buttonVariants } from "@/components/ui/button"
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-} from "@/components/ui/command"
 import {
     Form,
     FormControl,
@@ -26,15 +18,9 @@ import {
     FormMessage,
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from "@/components/ui/popover"
 import { generateKeypair } from "./wireguard-config";
 import React, { useState, useEffect } from "react";
 import { api } from "@/api";
-import { AxiosResponse } from "axios"
 import { useParams } from "next/navigation";
 import { useRouter } from "next/navigation";
 import { Checkbox } from "@app/components/ui/checkbox"
@@ -89,12 +75,6 @@ export function CreateSiteForm() {
         }
     }, []);
 
-    // const name = form.watch("name");
-    // useEffect(() => {
-    //     const subdomain = name.toLowerCase().replace(/\s+/g, "-");
-    //     form.setValue("subdomain", subdomain, { shouldValidate: true });
-    // }, [name, form]);
-
     async function onSubmit(data: AccountFormValues) {
         const res = await api
             .put(`/org/${orgId}/site/`, {
@@ -109,9 +89,9 @@ export function CreateSiteForm() {
             });
 
         if (res && res.status === 201) {
-            const siteId = res.data.data.siteId;
+            const niceId = res.data.data.niceId;
             // navigate to the site page
-            router.push(`/${orgId}/sites/${siteId}`);
+            router.push(`/${orgId}/sites/${niceId}`);
         }
     }
 

src/app/[orgId]/sites/[niceId]/layout.tsx

@@ -18,32 +18,32 @@ export const metadata: Metadata = {
 const sidebarNavItems = [
     {
         title: "Profile",
-        href: "/{orgId}/sites/{siteId}",
+        href: "/{orgId}/sites/{niceId}",
     },
     {
         title: "Appearance",
-        href: "/{orgId}/sites/{siteId}/appearance",
+        href: "/{orgId}/sites/{niceId}/appearance",
     },
     {
         title: "Notifications",
-        href: "/{orgId}/sites/{siteId}/notifications",
+        href: "/{orgId}/sites/{niceId}/notifications",
     },
     {
         title: "Display",
-        href: "/{orgId}/sites/{siteId}/display",
+        href: "/{orgId}/sites/{niceId}/display",
     },
 ]
 
 interface SettingsLayoutProps {
     children: React.ReactNode,
-    params: { siteId: string, orgId: string }
+    params: { niceId: string, orgId: string }
 }
 
 export default async function SettingsLayout({ children, params }: SettingsLayoutProps) {
     let site = null;
-    if (params.siteId !== "create") {
+    if (params.niceId !== "create") {
         try {
-            const res = await internal.get<AxiosResponse<GetSiteResponse>>(`/site/${params.siteId}`, authCookieHeader());
+            const res = await internal.get<AxiosResponse<GetSiteResponse>>(`/org/${params.orgId}/site/${params.niceId}`, authCookieHeader());
             site = res.data.data;
         } catch {
             redirect(`/${params.orgId}/sites`)
@@ -72,13 +72,13 @@ export default async function SettingsLayout({ children, params }: SettingsLayou
                 <div className="space-y-0.5">
                     <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
                     <p className="text-muted-foreground">
-                        {params.siteId == "create" ? "Create site..." : "Manage settings on " + site?.name || ""}.
+                        {params.niceId == "create" ? "Create site..." : "Manage settings on " + site?.name || ""}.
                     </p>
                 </div>
                 <Separator className="my-6" />
                 <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
                     <aside className="-mx-4 lg:w-1/5">
-                        <SidebarNav items={sidebarNavItems} disabled={params.siteId == "create"} />
+                        <SidebarNav items={sidebarNavItems} disabled={params.niceId == "create"} />
                     </aside>
                     <div className="flex-1 lg:max-w-2xl">
                         <SiteProvider site={site}>

src/app/[orgId]/sites/[niceId]/page.tsx

@@ -6,9 +6,9 @@ import { CreateSiteForm } from "./components/create-site";
 export default function SettingsProfilePage({
     params,
 }: {
-    params: { siteId: string };
+    params: { niceId: string };
 }) {
-    const isCreateForm = params.siteId === "create";
+    const isCreateForm = params.niceId === "create";
 
     return (
         <div className="space-y-6">

src/components/sidebar-nav.tsx

@@ -17,7 +17,7 @@ export function SidebarNav({ className, items, disabled = false, ...props }: Sid
     const pathname = usePathname();
     const params = useParams();
     const orgId = params.orgId as string;
-    const siteId = params.siteId as string;
+    const niceId = params.niceId as string;
     const resourceId = params.resourceId as string;
 
     return (
@@ -31,11 +31,11 @@ export function SidebarNav({ className, items, disabled = false, ...props }: Sid
         >
             {items.map((item) => (
                 <Link
-                    key={item.href.replace("{orgId}", orgId).replace("{siteId}", siteId).replace("{resourceId}", resourceId)}
-                    href={item.href.replace("{orgId}", orgId).replace("{siteId}", siteId).replace("{resourceId}", resourceId)}
+                    key={item.href.replace("{orgId}", orgId).replace("{niceId}", niceId).replace("{resourceId}", resourceId)}
+                    href={item.href.replace("{orgId}", orgId).replace("{niceId}", niceId).replace("{resourceId}", resourceId)}
                     className={cn(
                         buttonVariants({ variant: "ghost" }),
-                        pathname === item.href.replace("{orgId}", orgId).replace("{siteId}", siteId).replace("{resourceId}", resourceId)
+                        pathname === item.href.replace("{orgId}", orgId).replace("{niceId}", niceId).replace("{resourceId}", resourceId)
                             ? "bg-muted hover:bg-muted"
                             : "hover:bg-transparent hover:underline",
                         "justify-start",