Merge pull request #9 from AnsoCode/feature/app-store-fixes

fix: App Store Polish & Rollbacks

CHANGELOG.md

@@ -12,6 +12,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Changed:** Rebranded "Templates" to "App Store" across the UI.
 - **Added:** Advanced deployment configuration panel (Editable Ports and Environment Variables) with smart defaults.
 - **Fixed:** Implemented smart image fallbacks for broken registry logos and added expandable descriptions.
+- **Added:** Atomic Deployments: Failed App Store deployments now automatically roll back and delete their orphaned folders.
+- **Fixed:** Global dark mode scrollbar styling to eliminate blinding white native scrollbars.
+- **Fixed:** Input overlap UI bug in the App Store deployment panel.
 ### Added
 - **Added:** Official LinuxServer.io API integration as the default Template Registry.
 - **Added:** Rich metadata display in the App Store (Architectures, Documentation links, GitHub repository links).

backend/src/index.ts

@@ -1083,8 +1083,14 @@ app.post('/api/templates/deploy', async (req: Request, res: Response) => {
       await fsPromises.writeFile(defaultEnvPath, envString, 'utf-8');
     }
 
-    // 4. Deploy the stack
+    // 4. Deploy the stack with atomic rollback
-    await composeService.deployStack(stackName, terminalWs || undefined);
+    try {
+      await composeService.deployStack(stackName, terminalWs || undefined);
+    } catch (deployError) {
+      // ATOMIC ROLLBACK: If Docker fails, delete the folder we just created
+      await fileSystemService.deleteStack(stackName);
+      throw deployError; // Pass error to outer catch block
+    }
 
     res.json({ success: true, message: 'Template deployed successfully' });
   } catch (error: any) {

frontend/src/components/AppStoreView.tsx

@@ -312,6 +312,7 @@ export function AppStoreView({ onDeploySuccess }: AppStoreViewProps) {
                                 </div>
                             </SheetHeader>
 
+                            <ScrollArea className="flex-1 pr-4">
                             <ScrollArea className="flex-1 pr-4 -mx-4 px-4">
                                 <div className="space-y-6 pb-8">
                                     <div className="space-y-2">

frontend/src/index.css

@@ -166,6 +166,10 @@
 }
 
 @layer base {
+  :root {
+    color-scheme: dark;
+  }
+
   * {
     @apply border-border outline-ring/50;
   }
@@ -175,6 +179,22 @@
   }
 }
 
+/* Custom Dark Mode Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted) / 0.8);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
 html,
 body,
 #root {