Skip to content

bug:added restart dev button #2755

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.

Sign up for GitHub

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

bug:added restart dev button #2755

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f7606a6
bug:added restart dev button
Surajsuthar Aug 25, 2025
0fd880f
fix: import from onlook
Surajsuthar Aug 25, 2025
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
38 changes: 37 additions & 1 deletion apps/web/client/src/app/project/[id]/_components/right-panel/dev-tab/code-controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { TooltipArrow } from '@radix-ui/react-tooltip';
import { cn } from '@onlook/ui/utils';
import { observer } from 'mobx-react-lite';
import { useState } from 'react';
import { toast } from 'sonner';
import { FileModal } from './file-modal';
import { FolderModal } from './folder-modal';
import { UploadModal } from './upload-modal';
Expand All @@ -21,6 +22,7 @@ export const CodeControls = observer(() => {
const [fileModalOpen, setFileModalOpen] = useState(false);
const [folderModalOpen, setFolderModalOpen] = useState(false);
const [uploadModalOpen, setUploadModalOpen] = useState(false);
const [isRestarting, setIsRestarting] = useState(false);
const isDirty = editorEngine.ide.activeFile?.isDirty ?? false;

const saveFile = () => {
Expand All @@ -36,9 +38,25 @@ export const CodeControls = observer(() => {
})();
const files = editorEngine.ide.files;

const handleRestartDevServer = async () => {
try {
setIsRestarting(true);
const reStartResponse = await editorEngine.sandbox.session.restartDevServer();
if (reStartResponse) {
toast.success('Dev server restarting');
} else {
toast.error('Failed to restart dev server');
}
} catch (err) {
toast.error('Error restarting dev server');
} finally {
setIsRestarting(false);
}
}

return (
<>
<div className="flex flex-row opacity-50 transition-opacity duration-200 group-hover/panel:opacity-100">
<div className="flex flex-row items-center gap-1 opacity-50 transition-opacity duration-200 group-hover/panel:opacity-100">
<Tooltip>
<DropdownMenu>
<TooltipTrigger asChild>
Expand Down Expand Up @@ -74,6 +92,24 @@ export const CodeControls = observer(() => {
<TooltipArrow className="fill-foreground" />
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
disabled={isRestarting}
onClick={() => handleRestartDevServer()}
className="p-2 w-fit h-fit hover:bg-background-onlook cursor-pointer"
aria-label="Restart dev server"
>
<Icons.Reload className={cn("h-4 w-4", isRestarting && "animate-spin")}/>
</Button>
</TooltipTrigger>
<TooltipContent side="bottom" hideArrow>
<p>Restart dev server</p>
<TooltipArrow className="fill-foreground" />
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
Expand Down