Skip to content

add setting modal #1874

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions apps/web/client/src/app/project/[id]/_components/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { EditorBar } from './editor-bar';
import { LeftPanel } from './left-panel';
import { RightPanel } from './right-panel';
import { TopBar } from './top-bar';
import { Modals } from '@/components/ui/modal';

export const Main = observer(({ projectId }: { projectId: string }) => {
const editorEngine = useEditorEngine();
Expand Down Expand Up @@ -141,6 +142,7 @@ export const Main = observer(({ projectId }: { projectId: string }) => {
<TooltipProvider>
<div className="h-screen w-screen flex flex-row select-none relative">
<Canvas />
<Modals />

<div className="absolute top-0 w-full">
<TopBar />
Expand Down
36 changes: 35 additions & 1 deletion apps/web/client/src/components/store/project/manager.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,30 @@
import { extractMetadata } from './metadata';
import type { Project } from '@onlook/models';
import { makeAutoObservable } from 'mobx';

import { normalizePath } from '../editor/sandbox/helpers';
import type { HostingManager } from './domains/hosting';
// Stubs for now
export class DomainsManager {
private _baseHosting: HostingManager | null = null;
private _customHosting: HostingManager | null = null;

constructor() {}

get base() {
return this._baseHosting;
}

get custom() {
return this._customHosting;
}
}

export class VersionsManager {
constructor(private projectManager: ProjectManager) {}

get commits() {
return [];
}
}

export class ProjectManager {
Expand Down Expand Up @@ -41,5 +58,22 @@ export class ProjectManager {
this.project = newProject;
}

async scanProjectMetadata() {
try {
const project = this.project;
if (!project) {
return;
}
const layoutPath = normalizePath('app/layout.tsx');
const extractedMetadata = await extractMetadata(layoutPath);

if (extractedMetadata) {
this.updatePartialProject({ siteMetadata: extractedMetadata });
}
} catch (error) {
console.error('Error scanning project metadata:', error);
}
}

dispose() {}
}
89 changes: 89 additions & 0 deletions apps/web/client/src/components/store/project/metadata.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { parse, traverse } from '@onlook/parser';
import * as t from '@babel/types';
import type { PageMetadata } from '@onlook/models';
import { useEditorEngine } from '@/components/store/editor';

export function extractObjectValue(obj: t.ObjectExpression): Record<string, any> {
const result: Record<string, any> = {};
for (const prop of obj.properties) {
if (t.isObjectProperty(prop) && t.isIdentifier(prop.key)) {
const key = prop.key.name;
if (t.isStringLiteral(prop.value)) {
result[key] = prop.value.value;
} else if (t.isObjectExpression(prop.value)) {
result[key] = extractObjectValue(prop.value);
} else if (t.isArrayExpression(prop.value)) {
result[key] = extractArrayValue(prop.value);
}
}
}
return result;
}

export function extractArrayValue(arr: t.ArrayExpression): any[] {
return arr.elements
.map((element) => {
if (t.isStringLiteral(element)) {
return element.value;
} else if (t.isObjectExpression(element)) {
return extractObjectValue(element);
} else if (t.isArrayExpression(element)) {
return extractArrayValue(element);
}
return null;
})
.filter(Boolean);
}

export async function extractMetadata(filePath: string): Promise<PageMetadata | undefined> {
try {
const editorEngine = useEditorEngine();
const content = await editorEngine.sandbox.readFile(filePath);
if (!content) {
return undefined;
}

// Parse the file content using Babel
const ast = parse(content, {
sourceType: 'module',
plugins: ['typescript', 'jsx'],
});

let metadata: PageMetadata | undefined;

// Traverse the AST to find metadata export
traverse(ast, {
ExportNamedDeclaration(path) {
const declaration = path.node.declaration;
if (t.isVariableDeclaration(declaration)) {
const declarator = declaration.declarations[0];
if (
t.isIdentifier(declarator?.id) &&
declarator?.id?.name === 'metadata' &&
t.isObjectExpression(declarator?.init)
) {
metadata = {};
// Extract properties from the object expression
for (const prop of declarator?.init?.properties ?? []) {
if (t.isObjectProperty(prop) && t.isIdentifier(prop.key)) {
const key = prop.key.name;
if (t.isStringLiteral(prop.value)) {
(metadata as any)[key] = prop.value.value;
} else if (t.isObjectExpression(prop.value)) {
(metadata as any)[key] = extractObjectValue(prop.value);
} else if (t.isArrayExpression(prop.value)) {
(metadata as any)[key] = extractArrayValue(prop.value);
}
}
}
}
}
},
});

return metadata;
} catch (error) {
console.error(`Error reading metadata from ${filePath}:`, error);
return undefined;
}
}
5 changes: 2 additions & 3 deletions apps/web/client/src/components/ui/modal/index.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
'use client';

import { TooltipProvider } from '@onlook/ui/tooltip';
import { SettingsModal } from './settings';
import { SubscriptionModal } from './subscription/pricing-page';

export const Modals = () => {
return (
<TooltipProvider>
<>
<SettingsModal />
{/* <QuittingModal /> */}
<SubscriptionModal />
</TooltipProvider>
</>
);
};
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useProjectManager } from '@/components/store/project';
import { HOSTING_DOMAIN } from '@onlook/constants';
// import { invokeMainChannel } from '@/lib/utils';

import { Button } from '@onlook/ui/button';
import { Icons } from '@onlook/ui/icons';
Expand All @@ -27,7 +26,7 @@ export const BaseDomain = observer(() => {
}

const url = getValidUrl(baseUrl);
// invokeMainChannel(MainChannels.OPEN_EXTERNAL_WINDOW, url);
window.open(url, '_blank');
};

return (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useProjectManager } from '@/components/store/project';
import type { DomainType } from '@onlook/models';
import { DomainType } from '@onlook/models';
import { PublishStatus } from '@onlook/models/hosting';

import { Button } from '@onlook/ui/button';
Expand Down
53 changes: 26 additions & 27 deletions apps/web/client/src/components/ui/modal/settings/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { cn } from '@onlook/ui/utils';
import { capitalizeFirstLetter } from '@onlook/utility';
import { AnimatePresence, motion } from 'framer-motion';
import { observer } from 'mobx-react-lite';
import { useMemo } from 'react';
import { useEffect, useMemo } from 'react';
import AdvancedTab from './advance';
import { DomainTab } from './domain';
import { PreferencesTab } from './preferences';
Expand All @@ -31,13 +31,13 @@ export const SettingsModal = observer(() => {
const project = projectsManager.project;
const pagesManager = editorEngine.pages;

// useEffect(() => {
// if (editorEngine.state.settingsOpen && project) {
// pagesManager.scanPages();
// editorEngine.image.scanImages();
// projectsManager.scanProjectMetadata(project);
// }
// }, [editorEngine.state.settingsOpen]);
useEffect(() => {
if (editorEngine.state.settingsOpen && project) {
pagesManager.scanPages();
editorEngine.image.scanImages();
projectsManager.scanProjectMetadata();
}
}, [editorEngine.state.settingsOpen]);

const flattenPages = useMemo(() => {
return pagesManager.tree.reduce((acc, page) => {
Expand All @@ -64,16 +64,16 @@ export const SettingsModal = observer(() => {
icon: <Icons.Globe className="mr-2 h-4 w-4" />,
component: <DomainTab />,
},
{
label: SettingsTabValue.PROJECT,
icon: <Icons.Gear className="mr-2 h-4 w-4" />,
component: <ProjectTab />,
},
{
label: SettingsTabValue.VERSIONS,
icon: <Icons.Code className="mr-2 h-4 w-4" />,
component: <VersionsTab />,
},
// {
// label: SettingsTabValue.PROJECT,
// icon: <Icons.Gear className="mr-2 h-4 w-4" />,
// component: <ProjectTab />,
// },
// {
// label: SettingsTabValue.VERSIONS,
// icon: <Icons.Code className="mr-2 h-4 w-4" />,
// component: <VersionsTab />,
// },
];

const globalTabs: SettingTab[] = [
Expand All @@ -82,11 +82,11 @@ export const SettingsModal = observer(() => {
icon: <Icons.Person className="mr-2 h-4 w-4" />,
component: <PreferencesTab />,
},
{
label: SettingsTabValue.ADVANCED,
icon: <Icons.MixerVertical className="mr-2 h-4 w-4" />,
component: <AdvancedTab />,
},
// {
// label: SettingsTabValue.ADVANCED,
// icon: <Icons.MixerVertical className="mr-2 h-4 w-4" />,
// component: <AdvancedTab />,
// },
];

const pagesTabs: SettingTab[] = flattenPages.map((page) => ({
Expand All @@ -95,8 +95,7 @@ export const SettingsModal = observer(() => {
component: <PageTab metadata={page.metadata} path={page.path} />,
}));

const tabs = project ? [...projectOnlyTabs, ...globalTabs, ...pagesTabs] : [...globalTabs];

const tabs = project ? [...projectOnlyTabs, ...globalTabs, ...pagesTabs] : [...globalTabs];
return (
<AnimatePresence>
{editorEngine.state.settingsOpen && (
Expand Down Expand Up @@ -162,7 +161,7 @@ export const SettingsModal = observer(() => {
))}
</div>
<Separator />
<div className="shrink-0 w-48 space-y-2 p-6 text-regularPlus">
{/* <div className="shrink-0 w-48 space-y-2 p-6 text-regularPlus">
<p className="text-muted-foreground text-smallPlus">
Page Settings
</p>
Expand Down Expand Up @@ -199,7 +198,7 @@ export const SettingsModal = observer(() => {
</Button>
))}
</div>
<Separator />
<Separator /> */}
<div className="shrink-0 w-48 space-y-2 p-6 text-regularPlus">
<p className="text-muted-foreground text-smallPlus">
Global Settings
Expand Down
12 changes: 6 additions & 6 deletions apps/web/client/src/components/ui/modal/settings/preferences.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@ export const PreferencesTab = observer(() => {
await userManager.settings.updateEditor({ ideType: ide.type });
}

async function updateAnalytics(enabled: boolean) {
await userManager.settings.update({ enableAnalytics: enabled });
invokeMainChannel(MainChannels.UPDATE_ANALYTICS_PREFERENCE, enabled);
}
// async function updateAnalytics(enabled: boolean) {
// await userManager.settings.update({ enableAnalytics: enabled });
// invokeMainChannel(MainChannels.UPDATE_ANALYTICS_PREFERENCE, enabled);
// }

async function updateDeleteWarning(enabled: boolean) {
await userManager.settings.updateEditor({ shouldWarnDelete: enabled });
Expand Down Expand Up @@ -173,7 +173,7 @@ export const PreferencesTab = observer(() => {
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="flex justify-between items-center gap-4">
{/* <div className="flex justify-between items-center gap-4">
<div className="flex flex-col gap-2">
<p className="text-largePlus">Analytics</p>
<p className="text-foreground-onlook text-small">
Expand All @@ -197,7 +197,7 @@ export const PreferencesTab = observer(() => {
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div> */}
</div>
);
});
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,13 @@ import { observer } from 'mobx-react-lite';
import { useState } from 'react';
import { MetadataForm } from './metadata-form';
import { useMetadataForm } from './use-metadata-form';
import { DefaultSettings } from '@onlook/constants';

export const SiteTab = observer(() => {
const editorEngine = useEditorEngine();
const projectsManager = useProjectManager();
const project = projectsManager.project;
const siteSetting = project?.metadata;
const siteSetting = project?.siteMetadata;
const baseUrl = project?.domains?.custom?.url ?? project?.domains?.base?.url ?? project?.url;

const {
Expand Down Expand Up @@ -83,7 +84,7 @@ export const SiteTab = observer(() => {

projectsManager.updatePartialProject({
...project,
metadata: updatedMetadata,
siteMetadata: updatedMetadata,
});

await editorEngine.pages.updateMetadataPage('/', updatedMetadata);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import type { PageMetadata } from '@onlook/models';
import { useEffect, useState } from 'react';

interface UseMetadataFormProps {
initialMetadata?: PageMetadata;
defaultTitle?: string;
Expand Down Expand Up @@ -59,4 +58,4 @@ export const useMetadataForm = ({
setDescription,
setIsDirty,
};
};
};
10 changes: 10 additions & 0 deletions packages/models/src/project/project.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import type { DomainSettings } from 'src/project/domain';
import type { PageMetadata } from 'src/pages';

export interface Project {
id: string;
name: string;
url: string;
metadata: {
createdAt: string;
updatedAt: string;
Expand All @@ -11,4 +15,10 @@ export interface Project {
id: string;
url: string;
};
siteMetadata: PageMetadata;
domains: {
base: DomainSettings | null;
custom: DomainSettings | null;
} | null;
env?: Record<string, string>;
}