Add meta title and description section to Settings panel

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];

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;

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>

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;