Refactor portfolio admin and views

app/root/marquee/page.tsx

@@ -46,7 +46,6 @@ export default async function RootMarqueePage() {
       logoutAction={logoutAction}
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
-      saveFormId="marquee-settings-form"
     >
       <div className="space-y-6">
         <MotionFade delay={0.14}>

app/root/portfolio/actions.ts

@@ -220,6 +220,7 @@ export async function saveProjectAction(formData: FormData) {
       id: String(formData.get("id") ?? "").trim() || undefined,
       categoryId: String(formData.get("categoryId") ?? ""),
       slug: String(formData.get("slug") ?? ""),
+      viewMode: String(formData.get("viewMode") ?? "GRID"),
       titleAr: String(formData.get("titleAr") ?? ""),
       titleEn: String(formData.get("titleEn") ?? ""),
       titleDe: String(formData.get("titleDe") ?? ""),
@@ -369,6 +370,7 @@ export async function saveProjectAction(formData: FormData) {
             data: {
               categoryId: parsed.categoryId,
               slug: parsed.slug,
+              viewMode: parsed.viewMode,
               titleAr: parsed.titleAr,
               titleEn: parsed.titleEn,
               titleDe: parsed.titleDe,
@@ -396,6 +398,7 @@ export async function saveProjectAction(formData: FormData) {
             data: {
               categoryId: parsed.categoryId,
               slug: parsed.slug,
+              viewMode: parsed.viewMode,
               titleAr: parsed.titleAr,
               titleEn: parsed.titleEn,
               titleDe: parsed.titleDe,

app/root/portfolio/projects/[id]/page.tsx

@@ -6,6 +6,15 @@ import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { AppCard } from "@/components/ui/app-card";
 import { Button } from "@/components/ui/button";
 import { CardContent } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
 import { getMediaOptions } from "@/lib/media";
 import {
@@ -72,8 +81,6 @@ export default async function RootPortfolioProjectPage({
       logoutAction={logoutAction}
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
-      saveFormId="portfolio-project-form"
-      saveButtonLabel={copy.saveProject}
     >
       <div className="space-y-6">
         <MotionFade delay={0.15}>
@@ -88,20 +95,37 @@ export default async function RootPortfolioProjectPage({
         </MotionFade>
 
         <MotionFade delay={0.2}>
-          <AppCard>
-            <CardContent className="flex items-center justify-between gap-4 p-6">
+          <AppCard level={2}>
+            <CardContent className="flex flex-col gap-4 p-6 lg:flex-row lg:items-center lg:justify-between">
               <div>
                 <p className="text-sm font-medium text-foreground">{copy.dangerZone}</p>
                 <p className="mt-1 text-sm text-muted-foreground">
                   {copy.dangerText}
                 </p>
               </div>
-              <form action={deleteProjectAction}>
-                <input type="hidden" name="id" value={project.id} />
-                <Button type="submit" variant="destructive">
-                  {copy.deleteProject}
-                </Button>
-              </form>
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button type="button" variant="destructive">
+                    {copy.deleteProject}
+                  </Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>{copy.deleteProject}</DialogTitle>
+                    <DialogDescription>
+                      This action permanently removes the project data from the database.
+                    </DialogDescription>
+                  </DialogHeader>
+                  <DialogFooter>
+                    <form action={deleteProjectAction}>
+                      <input type="hidden" name="id" value={project.id} />
+                      <Button type="submit" variant="destructive">
+                        Confirm Delete
+                      </Button>
+                    </form>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
             </CardContent>
           </AppCard>
         </MotionFade>

app/root/portfolio/projects/new/page.tsx

@@ -49,7 +49,6 @@ export default async function RootNewPortfolioProjectPage() {
       logoutAction={logoutAction}
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
-      saveFormId="portfolio-project-form"
     >
       <div className="space-y-6">
         <MotionFade delay={0.15}>

app/root/site-settings/page.tsx

@@ -54,7 +54,6 @@ export default async function RootSiteSettingsPage() {
       logoutAction={logoutAction}
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
-      saveFormId="site-settings-form"
     >
       <div className="space-y-6">
         <MotionFade delay={0.16}>

app/root/smtp/contact-protection/page.tsx

@@ -47,7 +47,6 @@ export default async function RootSMTPProtectionPage() {
       logoutAction={logoutAction}
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
-      saveFormId="contact-protection-form"
     >
       <div className="space-y-6">
         <MotionFade delay={0.16}>

app/root/smtp/page.tsx

@@ -48,7 +48,6 @@ export default async function RootSMTPPage() {
       logoutAction={logoutAction}
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
-      saveFormId="smtp-settings-form"
       headerActions={(
         <form action={sendTestEmailAction}>
           <Button type="submit" variant="outline">