UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-06-26 18:26:38 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: add webcontainer connect route and new preview functionality

Browse Source 
- Add new route `webcontainer.connect.$id.tsx` for WebContainer connection
- Implement `openInNewTab` function in `Preview.tsx` for opening previews in new tabs
- Update GitHub template fetching logic to include lock files for improved install times
- Add new Expo starter template to constants
- Extend prompts with mobile app development instructions
-Templates now use Releases from github as a work around for rate limits
This commit is contained in:
KevIsDev
2025-04-15 15:32:40 +01:00
parent 2f09d512bc
commit 63129a93cd
6 changed files with 405 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/components/workbench/Preview.tsx
View File

@@ -565,6 +565,12 @@ export const Preview = memo(() => {
}
};
const openInNewTab = () => {
if (activePreview?.baseUrl) {
window.open(activePreview?.baseUrl, '_blank');
}
};
// Function to get the correct frame padding based on orientation
const getFramePadding = useCallback(() => {
if (!selectedWindowSize) {
@@ -767,8 +773,17 @@ export const Preview = memo(() => {
<span className="text-sm font-medium text-[#111827] dark:text-gray-300">Device Options</span>
</div>
<div className="flex flex-col gap-2">
<button
className={`flex w-full justify-between items-center text-start bg-transparent text-xs text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary`}
onClick={() => {
openInNewTab();
}}
>
<span>Open in new tab</span>
<div className='i-ph:arrow-square-out h-5 w-4'/>
</button>
<div className="flex items-center justify-between">
<span className="text-xs text-[#6B7280] dark:text-gray-400">Show Device Frame</span>
<span className="text-xs text-bolt-elements-textTertiary">Show Device Frame</span>
<button
className={`w-10 h-5 rounded-full transition-colors duration-200 ${
showDeviceFrame ? 'bg-[#6D28D9]' : 'bg-gray-300 dark:bg-gray-700'
@@ -786,7 +801,7 @@ export const Preview = memo(() => {
</button>
</div>
<div className="flex items-center justify-between">
<span className="text-xs text-[#6B7280] dark:text-gray-400">Landscape Mode</span>
<span className="text-xs text-bolt-elements-textTertiary">Landscape Mode</span>
<button
className={`w-10 h-5 rounded-full transition-colors duration-200 ${
isLandscape ? 'bg-[#6D28D9]' : 'bg-gray-300 dark:bg-gray-700'