refactor(layout): update layout components and improve button styles

docs(README): enhance project description and add version badges

Author: valentin-marquez

README.md

@@ -1,16 +1,34 @@
 # KnoxKit 🧟 - Project Zomboid Instance Manager
 
+<div align="center">
+    <img src="./docs/assets/knoxkit-preview.png" alt="KnoxKit in action" width="800" />
+</div>
+
 > Outsmart the apocalypse, one instance at a time.
 
-> 🚀 **Version 0.1.0 Released**: Basic functionality available. More features coming soon!
+<div align="center">
+        <p>
+                <a href="https://github.com/valeriko777/KnoxKit/releases/tag/v1.0.0">
+                                        <img src="https://img.shields.io/badge/Version-1.0.0-brightgreen" alt="Version 1.0.0">
+                                </a>
+                                <a href="https://github.com/valeriko777/KnoxKit/issues">
+                                        <img src="https://img.shields.io/github/issues/valeriko777/KnoxKit" alt="Issues">
+                                </a>
+                                <a href="https://github.com/valeriko777/KnoxKit/blob/main/LICENSE.md">
+                                        <img src="https://img.shields.io/badge/License-Custom%20Apache%202.0-blue" alt="License">
+                                </a>
+        </p>
+        <h3>🚀 Version 1.0.0 Now Available!</h3>
+        <p>Basic functionality released. More features coming soon!</p>
+</div>
 
 [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/nozzdev)
 
 ## 🎯 Overview
 KnoxKit is a powerful and user-friendly instance manager for Project Zomboid that helps you manage multiple game configurations, mod collections, and system resources efficiently.
 
 ## ✨ Key Features
-- **Instance Management**: Create, clone, and manage multiple game instances
+- **Instance Management**: Create, and manage multiple game instances
 - **Steam Workshop Integration**: Seamless mod collection synchronization
 - **Resource Optimization**: Smart resource allocation per instance
 - **Modern UI**: Clean and intuitive interface with dark/light themes

docs/assets/knoxkit-preview.png

@@ -3,8 +3,20 @@
 	"version": "1.0.0",
 	"description": "🧟 Outsmart the apocalypse, one instance at a time.",
 	"main": "./out/main/index.js",
-	"author": "example.com",
-	"homepage": "https://electron-vite.org",
+	"author": {
+		"name": "Valentin Marquez",
+		"email": "me@nozz.dev"
+	},
+	"license": "SEE LICENSE IN LICENSE.md",
+	"copyright": "Copyright © 2025 Valentin Marquez",
+	"homepage": "https://github.com/valentin-marquez/KnoxKit",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/valentin-marquez/KnoxKit.git"
+	},
+	"bugs": {
+		"url": "https://github.com/valentin-marquez/KnoxKit/issues"
+	},
 	"scripts": {
 		"format": "biome format --write .",
 		"lint": "biome lint .",

package.json

@@ -1,4 +1,5 @@
-import { ArrowPathIcon, PlayIcon } from "@heroicons/react/24/outline"
+import { ArrowPathIcon } from "@heroicons/react/24/outline"
+import { PlayCircleIcon } from "@heroicons/react/24/solid"
 import { useStore } from "@nanostores/react"
 import { Button } from "@renderer/components/ui/button"
 import { useTranslation } from "@renderer/hooks/useTranslation"
@@ -49,19 +50,29 @@ export function LaunchButton({
 
 	const showSpinner = isLaunching || status === "Downloading" || status === "Updating"
 
+	// Get the button variant based on status
+	const getButtonVariant = () => {
+		if (status === "Ready") return "default"
+		if (status === "Error") return "destructive"
+		if (status === "Running") return "secondary"
+		return "outline"
+	}
+
 	return (
 		<Button
-			variant={status === "Ready" ? "default" : "secondary"}
-			className={`min-w-24 px-3 ${className}`}
+			variant={getButtonVariant()}
+			className={`min-w-28 px-3 py-1.5 font-medium transition-all duration-300 ${status === "Ready" ? "hover:scale-105" : ""} ${className}`}
 			onClick={handleLaunch}
 			disabled={isDisabled}
 		>
-			{showSpinner ? (
-				<ArrowPathIcon className="mr-2 h-4 w-4 animate-spin" />
-			) : (
-				<PlayIcon className="mr-2 h-4 w-4" />
-			)}
-			<span className="truncate">{buttonText}</span>
+			<div className="flex items-center justify-center space-x-1">
+				{showSpinner ? (
+					<ArrowPathIcon className="h-5 w-5 animate-spin" />
+				) : (
+					<PlayCircleIcon className="h-5 w-5" />
+				)}
+				<span className="truncate">{buttonText}</span>
+			</div>
 		</Button>
 	)
 }

src/renderer/src/components/instances/launch-button.tsx

@@ -68,7 +68,7 @@ export default function Layout({ children }: { children: React.ReactNode }): JSX
 					const bTime = b.createdAt ? new Date(b.createdAt).getTime() : 0
 					return bTime - aTime
 				})
-				.slice(0, 3)
+				.slice(0, 2) // Changed from 3 to 2 to only show the last two instances
 
 			setRecentInstances(instances)
 		}
@@ -337,25 +337,6 @@ export default function Layout({ children }: { children: React.ReactNode }): JSX
 								{t("layout.utilities")}
 							</h3>
 							{renderDownloadButton()}
-
-							{activeDownloadItems.length > 0 && (
-								<div className="mt-2 mx-1 px-3 py-2 rounded-md bg-primary/5 border border-primary/10">
-									<div className="flex items-center justify-between mb-1">
-										<span className="text-xs font-medium text-primary">
-											{t("layout.activeDownloads")}
-										</span>
-										<span className="text-xs text-muted-foreground">
-											{activeDownloadItems.length}
-										</span>
-									</div>
-									<div className="h-1.5 bg-muted rounded-full overflow-hidden">
-										<div
-											className="h-full bg-primary rounded-full animate-pulse"
-											style={{ width: "35%" }}
-										/>
-									</div>
-								</div>
-							)}
 						</div>
 					</div>
 				</div>