From 0b85416e4d84f7039ea538006b91bf69b7a3695d Mon Sep 17 00:00:00 2001
From: SuperKali <hello@superkali.me>
Date: Tue, 20 Jan 2026 22:01:37 +0100
Subject: [PATCH] refactor: conditionally hide custom image button when
 manufacturer is selected
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improve UI flow by making the custom image button mutually exclusive with the
manufacturer selection path. This creates a clearer distinction between the two
image selection workflows:

- Standard path: Manufacturer → Board → OS Image
- Custom path: Direct custom image selection

The custom image button is now hidden when a manufacturer is selected, and
reappears when the manufacturer is deselected. This change prepares the UI for
future integration of board pre-setup configuration phases.

This modification ensures better user experience by preventing conflicting
selection states and provides a cleaner interface for the upcoming board
pre-setup features planned for future releases.
---
 src/components/layout/HomePage.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/layout/HomePage.tsx b/src/components/layout/HomePage.tsx
index 452628e..b0a54d3 100644
--- a/src/components/layout/HomePage.tsx
+++ b/src/components/layout/HomePage.tsx
@@ -112,15 +112,17 @@ export function HomePage({
         </div>
       </div>
 
-      <div className="home-custom-section">
-        <button
-          className="home-custom-button"
-          onClick={onChooseCustomImage}
-        >
-          <FolderOpen size={16} />
-          {isCustomImage ? t('home.changeCustomImage') : t('home.useCustomImage')}
-        </button>
-      </div>
+      {!selectedManufacturer && (
+        <div className="home-custom-section">
+          <button
+            className="home-custom-button"
+            onClick={onChooseCustomImage}
+          >
+            <FolderOpen size={16} />
+            {isCustomImage ? t('home.changeCustomImage') : t('home.useCustomImage')}
+          </button>
+        </div>
+      )}
     </div>
   );
 }