From 1f7b5a48a6f7e9ac040a683357d7221ca80c5d0b Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 17 Mar 2025 03:28:31 +0000
Subject: [PATCH 1/2] Add meta title and description section to Settings panel

Co-Authored-By: daniel@onlook.dev <daniel@onlook.dev>
---
 .../SettingsModal/Domain/MetaSection.tsx      | 60 +++++++++++++++++++
 .../editor/SettingsModal/Domain/index.tsx     |  5 ++
 packages/models/src/projects/index.ts         |  2 +
 3 files changed, 67 insertions(+)
 create mode 100644 apps/studio/src/routes/editor/SettingsModal/Domain/MetaSection.tsx

diff --git a/apps/studio/src/routes/editor/SettingsModal/Domain/MetaSection.tsx b/apps/studio/src/routes/editor/SettingsModal/Domain/MetaSection.tsx
new file mode 100644
index 000000000..816175029
--- /dev/null
+++ b/apps/studio/src/routes/editor/SettingsModal/Domain/MetaSection.tsx
@@ -0,0 +1,60 @@
+import { useProjectsManager } from '@/components/Context';
+import { Input } from '@onlook/ui/input';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+const MetaSection = observer(() => {
+    const projectsManager = useProjectsManager();
+    const project = projectsManager.project;
+    
+    const metaTitle = project?.metaTitle || '';
+    const metaDescription = project?.metaDescription || '';
+
+    return (
+        <div className="space-y-4">
+            <h2 className="text-lg">Meta Information</h2>
+            <div className="space-y-4">
+                <div className="flex justify-between items-center">
+                    <div className="w-1/3">
+                        <p className="text-regularPlus text-muted-foreground">Title</p>
+                        <p className="text-small text-muted-foreground">
+                            Page title for search engines
+                        </p>
+                    </div>
+                    <Input
+                        id="metaTitle"
+                        value={metaTitle}
+                        onChange={(e) =>
+                            projectsManager.updatePartialProject({
+                                metaTitle: e.target.value,
+                            })
+                        }
+                        placeholder="Enter page title"
+                        className="w-2/3 bg-background placeholder:text-muted-foreground"
+                    />
+                </div>
+                <div className="flex justify-between items-center">
+                    <div className="w-1/3">
+                        <p className="text-regularPlus text-muted-foreground">Description</p>
+                        <p className="text-small text-muted-foreground">
+                            Page description for search engines
+                        </p>
+                    </div>
+                    <Input
+                        id="metaDescription"
+                        value={metaDescription}
+                        onChange={(e) =>
+                            projectsManager.updatePartialProject({
+                                metaDescription: e.target.value,
+                            })
+                        }
+                        placeholder="Enter page description"
+                        className="w-2/3 bg-background placeholder:text-muted-foreground"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+});
+
+export default MetaSection;
diff --git a/apps/studio/src/routes/editor/SettingsModal/Domain/index.tsx b/apps/studio/src/routes/editor/SettingsModal/Domain/index.tsx
index b9a5d55ef..8fdeefe13 100644
--- a/apps/studio/src/routes/editor/SettingsModal/Domain/index.tsx
+++ b/apps/studio/src/routes/editor/SettingsModal/Domain/index.tsx
@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 import BaseDomain from './Base';
 import { CustomDomain } from './Custom';
 import DangerZone from './DangerZone';
+import MetaSection from './MetaSection';
 
 export const DomainTab = observer(() => {
     const userManager = useUserManager();
@@ -24,6 +25,10 @@ export const DomainTab = observer(() => {
                 <CustomDomain />
             </div>
             <Separator />
+            <div className="p-4">
+                <MetaSection />
+            </div>
+            <Separator />
             <div className="p-4">
                 <DangerZone />
             </div>
diff --git a/packages/models/src/projects/index.ts b/packages/models/src/projects/index.ts
index 811c855b5..b740eb843 100644
--- a/packages/models/src/projects/index.ts
+++ b/packages/models/src/projects/index.ts
@@ -56,6 +56,8 @@ export interface Project {
         base: DomainSettings | null;
         custom: DomainSettings | null;
     } | null;
+    metaTitle?: string;
+    metaDescription?: string;
 
     // deprecated
     // hosting?: HostingSettings | null;

From 33604744d06a24d4cd537db3fc9951f66104b85e Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 17 Mar 2025 03:45:32 +0000
Subject: [PATCH 2/2] Initialize meta fields in createProject method

Co-Authored-By: daniel@onlook.dev <daniel@onlook.dev>
---
 apps/studio/src/lib/projects/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/studio/src/lib/projects/index.ts b/apps/studio/src/lib/projects/index.ts
index 856894144..53ea41115 100644
--- a/apps/studio/src/lib/projects/index.ts
+++ b/apps/studio/src/lib/projects/index.ts
@@ -82,6 +82,8 @@ export class ProjectsManager {
                 base: null,
                 custom: null,
             },
+            metaTitle: '',
+            metaDescription: '',
         };
 
         const updatedProjects = [...this._projects, newProject];