From a668fd9bb462a194d08e871650a3b36b629a4182 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 18 Mar 2026 09:42:42 +1100
Subject: [PATCH] feat(projects): require repository when location is remote

When creating a new project with the Remote location selected, a
repository is now required before the form can be submitted.

- Add derived `repoMissing` and `canCreate` states that gate submission
- Disable the Create button when remote is selected without a repo
- Show a 'Required' badge on the Repository label for remote projects
- Add `.field-badge.required` style using `--ui-danger` color
---
 .../features/projects/NewProjectForm.svelte   | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/staged/src/lib/features/projects/NewProjectForm.svelte b/apps/staged/src/lib/features/projects/NewProjectForm.svelte
index f34d1fa0..02e1959e 100644
--- a/apps/staged/src/lib/features/projects/NewProjectForm.svelte
+++ b/apps/staged/src/lib/features/projects/NewProjectForm.svelte
@@ -90,8 +90,11 @@
     error = null;
   });
 
+  let repoMissing = $derived(location === 'remote' && !selectedRepo);
+  let canCreate = $derived(!!name.trim() && !saving && !repoMissing);
+
   async function handleCreate() {
-    if (!name.trim() || saving) return;
+    if (!canCreate) return;
 
     saving = true;
     error = null;
@@ -239,7 +242,12 @@
   </div>
 
   <div class="form-group">
-    <label for="project-repo-select">Repository</label>
+    <label for="project-repo-select"
+      >Repository
+      {#if location === 'remote'}
+        <span class="field-badge required">Required</span>
+      {/if}</label
+    >
     {#if selectedRepo}
       <div class="repo-info">
         <GitBranch size={14} class="repo-info-icon" />
@@ -337,7 +345,7 @@
       variant="primary"
       class={!onCancel ? 'full-width-btn' : ''}
       onclick={handleCreate}
-      disabled={saving || !name.trim()}
+      disabled={!canCreate}
     >
       {#if saving}
         <span class="button-content">
@@ -395,6 +403,11 @@
     color: var(--bg-deepest);
   }
 
+  .field-badge.required {
+    background-color: var(--ui-danger);
+    color: var(--bg-deepest);
+  }
+
   .field-badge.new-branch {
     background-color: var(--ui-accent);
     color: var(--bg-deepest);