Skip to content
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

# Enhancement: Improved Header UI and Button Interactions 🎨 #355

Closed
wants to merge 3 commits into from
Closed

# Enhancement: Improved Header UI and Button Interactions 🎨 #355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e9a59fd
juste add some style to the global app
amintt2 Nov 20, 2024
627c394
fix import
amintt2 Nov 21, 2024
22126cc
Merge branch 'main' into feature/amelioration-boutons
amintt2 Nov 24, 2024
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: 1 addition & 1 deletion app/components/header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export function Header() {
return (
<header
className={classNames(
'flex items-center bg-bolt-elements-background-depth-1 p-5 border-b h-[var(--header-height)]',
'flex items-center bg-bolt-elements-background-depth-1 p-5 border-b h-[var(--header-height)] relative z-[99999]',
{
'border-transparent': !chat.started,
'border-bolt-elements-borderColor': chat.started,
Expand Down
187 changes: 175 additions & 12 deletions app/components/header/HeaderActionButtons.client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,136 @@
import { chatStore } from '~/lib/stores/chat';
import { workbenchStore } from '~/lib/stores/workbench';
import { classNames } from '~/utils/classNames';
import { useState, useRef } from 'react';
import { toast } from 'react-toastify';

interface HeaderActionButtonsProps {}

export function HeaderActionButtons({}: HeaderActionButtonsProps) {
const showWorkbench = useStore(workbenchStore.showWorkbench);
const { showChat } = useStore(chatStore);
const [isSyncing, setIsSyncing] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);

const isSmallViewport = useViewport(1024);

const canHideChat = showWorkbench || !showChat;

const handleSyncFiles = async () => {
setIsSyncing(true);
try {
// Créer un input file pour sélectionner un fichier
const input = document.createElement('input');
input.type = 'file';
// Définir les types de fichiers acceptés
input.accept = '.js,.jsx,.ts,.tsx,.css,.scss,.html,.json,.md,.txt';
// Désactiver la sélection multiple
input.multiple = false;
input.webkitdirectory = false;
input.directory = false;

Check failure on line 32 in app/components/header/HeaderActionButtons.client.tsx

View workflow job for this annotation

GitHub Actions / Test 

Property 'directory' does not exist on type 'HTMLInputElement'.

input.onchange = async (e) => {
const file = (e.target as HTMLInputElement).files?.[0];
if (!file) {
setIsSyncing(false);
return;
}

// Vérifier si c'est un dossier (au cas où)
if (file.size === 0 && file.type === "") {
toast.error('Folders are not supported, please select a single file');
setIsSyncing(false);
return;
}

// Vérifier la taille du fichier (5MB max)
if (file.size > 5 * 1024 * 1024) {
toast.error(`File "${file.name}" is too large (max 5MB)`);
setIsSyncing(false);
return;
}

try {
console.log('Reading file:', file.name, 'Type:', file.type);
const content = await file.text();

// Vérifier si le contenu est lisible
if (!content) {
toast.error(`File "${file.name}" appears to be empty`);
setIsSyncing(false);
return;
}

// Vérifier l'extension du fichier
const fileExtension = file.name.split('.').pop()?.toLowerCase();
if (!fileExtension) {
toast.error(`File "${file.name}" has no extension`);
setIsSyncing(false);
return;
}

const allowedExtensions = ['js', 'jsx', 'ts', 'tsx', 'css', 'scss', 'html', 'json', 'md', 'txt'];
if (!allowedExtensions.includes(fileExtension)) {
toast.error(`File type ".${fileExtension}" is not supported. Allowed types: ${allowedExtensions.join(', ')}`);
setIsSyncing(false);
return;
}

await workbenchStore.addFile({
name: file.name,
content,
path: file.name
});

toast.success(`File "${file.name}" imported successfully`);
} catch (error) {
console.error('Error details:', {
fileName: file.name,
fileType: file.type,
fileSize: file.size,
error
});

if (error instanceof Error) {
toast.error(`Failed to read "${file.name}": ${error.message}`);
} else {
toast.error(`Failed to read "${file.name}". Please try another file.`);
}
} finally {
setIsSyncing(false);
}
};

input.click();
} catch (error) {
console.error('Import error:', error);
toast.error('Failed to start import process');
setIsSyncing(false);
}
};

const handlePushToGitHub = async () => {
const repoName = prompt("Please enter a name for your new GitHub repository:", "bolt-generated-project");
if (!repoName) {
alert("Repository name is required. Push to GitHub cancelled.");
return;
}
const githubUsername = prompt("Please enter your GitHub username:");
if (!githubUsername) {
alert("GitHub username is required. Push to GitHub cancelled.");
return;
}
const githubToken = prompt("Please enter your GitHub personal access token:");
if (!githubToken) {
alert("GitHub token is required. Push to GitHub cancelled.");
return;
}

workbenchStore.pushToGitHub(repoName, githubUsername, githubToken);
};

return (
<div className="flex">
<div className="flex gap-2">
<div className="flex border border-bolt-elements-borderColor rounded-md overflow-hidden">
<Button
active={showChat}
Expand All @@ -25,8 +142,10 @@
chatStore.setKey('showChat', !showChat);
}
}}
className="bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3"
>
<div className="i-bolt:chat text-sm" />
<span className="ml-2">Chat</span>
</Button>
<div className="w-[1px] bg-bolt-elements-borderColor" />
<Button
Expand All @@ -35,11 +154,51 @@
if (showWorkbench && !showChat) {
chatStore.setKey('showChat', true);
}

workbenchStore.showWorkbench.set(!showWorkbench);
}}
className="bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3"
>
<div className="i-ph:code-bold" />
<span className="ml-2">Editor</span>
</Button>
</div>

<div className="flex border border-bolt-elements-borderColor rounded-md overflow-hidden">
<Button
onClick={() => workbenchStore.downloadZip()}
className="bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3"
>
<div className="i-ph:download-simple" />
<span className="ml-2">Download</span>
</Button>
<div className="w-[1px] bg-bolt-elements-borderColor" />
<Button
onClick={handleSyncFiles}
disabled={isSyncing}
className="bg-[#FFA50015] hover:bg-[#FFA50030] relative overflow-hidden"
>
<div className="flex items-center">
<div className={classNames(
"transition-all duration-200",
isSyncing ? "animate-spin i-ph:spinner" : "i-ph:cloud-arrow-down"
)} />
<span className="ml-2">{isSyncing ? 'Importing...' : 'Import'}</span>
</div>
</Button>
<div className="w-[1px] bg-bolt-elements-borderColor" />
<Button
onClick={handlePushToGitHub}
className="bg-[#00FF0015] hover:bg-[#00FF0030] relative overflow-visible group"
>
<div className="flex items-center relative">
<div className="i-ph:github-logo text-[#00FF00]" />
<span className="ml-2">Push to GitHub</span>
</div>
<div className="fixed top-[calc(var(--header-height)/2)] -right-[15px] opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none" style={{ zIndex: 100000 }}>
<span className="inline-block text-6xl transform -rotate-30 transition-transform duration-500 group-hover:translate-y-[-10px]">
🚀
</span>
</div>
</Button>
</div>
</div>
Expand All @@ -49,20 +208,24 @@
interface ButtonProps {
active?: boolean;
disabled?: boolean;
children?: any;
onClick?: VoidFunction;
onClick?: () => void;
children: React.ReactNode;
className?: string;
}

function Button({ active = false, disabled = false, children, onClick }: ButtonProps) {
function Button({ active, disabled, onClick, children, className }: ButtonProps) {
return (
<button
className={classNames('flex items-center p-1.5', {
'bg-bolt-elements-item-backgroundDefault hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary':
!active,
'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': active && !disabled,
'bg-bolt-elements-item-backgroundDefault text-alpha-gray-20 dark:text-alpha-white-20 cursor-not-allowed':
disabled,
})}
className={classNames(
'flex items-center justify-center px-3 h-[34px] text-sm transition-all duration-200',
{

Check failure on line 221 in app/components/header/HeaderActionButtons.client.tsx

View workflow job for this annotation

GitHub Actions / Test 

Argument of type '{ 'text-bolt-elements-textPrimary': boolean | undefined; 'text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary': boolean; 'opacity-50 cursor-not-allowed': boolean | undefined; }' is not assignable to parameter of type 'ClassNamesArg'.
'text-bolt-elements-textPrimary': active,
'text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary': !active,
'opacity-50 cursor-not-allowed': disabled,
},
className
)}
disabled={disabled}
onClick={onClick}
>
{children}
Expand Down
15 changes: 2 additions & 13 deletions app/components/workbench/Workbench.client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,19 +145,6 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
<div className="ml-auto" />
{selectedView === 'code' && (
<div className="flex overflow-y-auto">
<PanelHeaderButton
className="mr-1 text-sm"
onClick={() => {
workbenchStore.downloadZip();
}}
>
<div className="i-ph:code" />
Download Code
</PanelHeaderButton>
<PanelHeaderButton className="mr-1 text-sm" onClick={handleSyncFiles} disabled={isSyncing}>
{isSyncing ? <div className="i-ph:spinner" /> : <div className="i-ph:cloud-arrow-down" />}
{isSyncing ? 'Syncing...' : 'Sync Files'}
</PanelHeaderButton>
<PanelHeaderButton
className="mr-1 text-sm"
onClick={() => {
Expand All @@ -167,6 +154,7 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
<div className="i-ph:terminal" />
Toggle Terminal
</PanelHeaderButton>

<PanelHeaderButton
className="mr-1 text-sm"
onClick={() => {
Expand Down Expand Up @@ -201,6 +189,7 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
Push to GitHub
</PanelHeaderButton>
</div>

)}
<IconButton
icon="i-ph:x-circle"
Expand Down
28 changes: 28 additions & 0 deletions app/lib/stores/workbench.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,6 +491,34 @@
console.error('Error pushing to GitHub:', error instanceof Error ? error.message : String(error));
}
}

async addFile({ name, content, path }: { name: string; content: string; path: string }) {
try {
const files = this.files.get() || {};
files[path] = {
type: 'file',
content,
path,

Check failure on line 501 in app/lib/stores/workbench.ts

View workflow job for this annotation

GitHub Actions / Test 

Object literal may only specify known properties, and 'path' does not exist in type 'File'.
modified: false,
isBinary: false,
size: content.length,
lastModified: new Date().getTime()
};
this.files.set(files);
this.setSelectedFile(path);

// Forcer une mise à jour des documents
this.setDocuments(files);

// Forcer un rafraîchissement de l'interface
this.showWorkbench.set(true);

return true;
} catch (error) {
console.error('Error adding file:', error);
throw error;
}
}
}

export const workbenchStore = new WorkbenchStore();
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@
"@types/js-cookie": "^3.0.6",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.3.3",
"fast-glob": "^3.3.2",
"is-ci": "^3.0.1",
"node-fetch": "^3.3.2",
Expand Down
Loading
Loading