fix: Improve canvas error handling and update button functionality in Generator component

components/templates/generator.js

@@ -72,8 +72,11 @@ export default function Generator() {
 		}
 
 		const canvas = document.getElementById("canvas");
-		if (!canvas.getContext) {
+		console.log("Canvas element:", canvas);
-			console.log("canvas err");
+		if (!canvas || !canvas.getContext) {
+			console.log("canvas not found or no context available");
+			console.log("canvas exists:", !!canvas);
+			console.log("getContext available:", canvas ? !!canvas.getContext : false);
 			return;
 		}
 
@@ -154,7 +157,6 @@ export default function Generator() {
 							rows={8}
 							onChange={(e) => {
 								setProfil(e.target.value);
-								getPath(e, e.target.value);
 							}}
 							className="font-mono text-sm"
 						/>
@@ -203,6 +205,27 @@ export default function Generator() {
 							</div>
 						</div>
 
+						<div className="flex space-x-3">
+							<Button
+								onClick={() => {
+									const textareaValue = document.getElementById("textarea-1").value;
+									if (textareaValue && textareaValue.startsWith("Próbkowanie")) {
+										// First set preview visible, then draw after a small delay
+										setPreviewVisible(true);
+										setTimeout(() => {
+											getPath(null, textareaValue);
+										}, 50);
+									} else {
+										alert("Wprowadź poprawne dane z Geoportalu");
+									}
+								}}
+								variant="outline"
+								className="flex-1"
+							>
+								<EyeIcon className="w-5 h-5 mr-2" />
+								Podgląd
+							</Button>
+
 							<Button
 								onClick={(e) => {
 									const textareaValue = document.getElementById("textarea-1").value;
@@ -216,11 +239,12 @@ export default function Generator() {
 								}}
 								disabled={isLoading}
 								loading={isLoading}
-							className="w-full"
+								className="flex-1"
 							>
 								<DownloadIcon className="w-5 h-5 mr-2" />
 								{isLoading ? 'Generowanie...' : 'Generuj profil'}
 							</Button>
+						</div>
 					</CardContent>
 				</Card>
 			</div>
@@ -238,23 +262,23 @@ export default function Generator() {
 						</CardDescription>
 					</CardHeader>
 					<CardContent>
-						{previewVisible ? (
 						<div className="bg-gray-50 rounded-lg p-4">
 							<canvas 
 								id="canvas" 
 								height="500" 
 								width="700"
 								className="border border-gray-200 rounded bg-white"
+								style={{ display: previewVisible ? 'block' : 'none' }}
 							/>
-							</div>
+							{!previewVisible && (
-						) : (
 								<div className="bg-gray-50 rounded-lg p-8 text-center">
 									<div className="mx-auto w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-4">
 										<ChartBarIcon className="w-8 h-8 text-gray-400" />
 									</div>
-								<p className="text-gray-500">Wprowadź dane aby zobaczyć podgląd profilu</p>
+									<p className="text-gray-500">Wprowadź dane i kliknij "Podgląd" aby zobaczyć profil</p>
 								</div>
 							)}
+						</div>
 					</CardContent>
 				</Card>
 
@@ -281,6 +305,12 @@ export default function Generator() {
 								<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
 									<span className="text-xs font-semibold text-blue-600">3</span>
 								</div>
+								<p className="text-gray-600">Kliknij "Podgląd" aby zobaczyć wizualizację profilu</p>
+							</div>
+							<div className="flex items-start space-x-3">
+								<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
+									<span className="text-xs font-semibold text-blue-600">4</span>
+								</div>
 								<p className="text-gray-600">Kliknij "Generuj profil" aby pobrać plik DXF</p>
 							</div>
 						</div>

components/ui/Layout.js

@@ -77,7 +77,7 @@ export default function Layout({ children, title = 'Wastpol' }) {
             <div className="flex min-h-0 flex-1 flex-col bg-white border-r border-gray-200 shadow-sm">
               <div className="flex h-16 items-center justify-center px-4 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-blue-700">
                 <img className="h-8 w-auto filter brightness-0 invert" src="/logo.png" alt="Wastpol" />
-                <span className="ml-2 text-lg font-semibold text-white">Wastpol</span>
+                {/* <span className="ml-2 text-lg font-semibold text-white">Wastpol</span> */}
               </div>
               <div className="flex flex-1 flex-col overflow-y-auto">
                 <nav className="flex-1 px-2 py-4 space-y-1">