From 25201674ae4a0622e1972dfe85639c2508b0824b Mon Sep 17 00:00:00 2001
From: Mirko Poloni <mirko.poloni@kochfreiburg.de>
Date: Tue, 19 May 2026 18:29:12 +0200
Subject: [PATCH 1/2] feat(settings): redesign organization settings page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove the separate "Create New Organization" card with its toggle button
- Move the inline create form (input + submit) to the bottom of the "My Organizations" card, always visible — no extra click needed
- Active org row gets a subtle background highlight instead of blue text
- Row dividers render between all entries; active row uses my/py spacing to prevent the border from clipping its rounded background
- Create form stacks vertically on mobile (flex-col), side-by-side on sm+
- Placeholder and label copy updated to say "organization" consistently

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/app/settings/organization/page.tsx    | 108 +++++++-----------
 1 file changed, 39 insertions(+), 69 deletions(-)

diff --git a/packages/frontend/src/app/settings/organization/page.tsx b/packages/frontend/src/app/settings/organization/page.tsx
index c217258d..4cbe6ee5 100644
--- a/packages/frontend/src/app/settings/organization/page.tsx
+++ b/packages/frontend/src/app/settings/organization/page.tsx
@@ -14,7 +14,6 @@ export default function OrganizationSettingsPage() {
   const [message, setMessage] = useState('');
 
   // Create new org
-  const [showCreateForm, setShowCreateForm] = useState(false);
   const [newOrgName, setNewOrgName] = useState('');
   const [creating, setCreating] = useState(false);
   const [createMessage, setCreateMessage] = useState('');
@@ -82,7 +81,6 @@ export default function OrganizationSettingsPage() {
       const newOrg = await organizations.create(newOrgName.trim(), token);
       setCreateMessage('Organization created! Switching...');
       setNewOrgName('');
-      setShowCreateForm(false);
       await switchOrg(newOrg.id);
     } catch (err: any) {
       setCreateMessage(err.message || 'Failed to create organization');
@@ -163,64 +161,6 @@ export default function OrganizationSettingsPage() {
         )}
       </div>
 
-      {/* Create new organization — available to ALL users */}
-      <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 space-y-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="text-sm font-semibold">Create New Organization</h3>
-            <p className="text-xs text-[var(--muted-foreground)] mt-0.5">
-              Create a separate workspace with its own connectors, MCP servers, and team. You will be the admin.
-            </p>
-          </div>
-          {!showCreateForm && (
-            <button
-              onClick={() => { setShowCreateForm(true); setCreateMessage(''); }}
-              className="px-3 py-1.5 border border-[var(--border)] rounded-lg text-sm hover:bg-[var(--accent)] transition-colors"
-            >
-              + New Organization
-            </button>
-          )}
-        </div>
-
-        {showCreateForm && (
-          <div className="space-y-3 pt-2 border-t border-[var(--border)]">
-            <div>
-              <label className="block text-sm font-medium mb-1">Name</label>
-              <input
-                type="text"
-                value={newOrgName}
-                onChange={(e) => setNewOrgName(e.target.value)}
-                className="w-full px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-sm focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent outline-none"
-                placeholder="My New Workspace"
-                autoFocus
-                onKeyDown={(e) => { if (e.key === 'Enter') handleCreateOrg(); }}
-              />
-            </div>
-            <div className="flex gap-2">
-              <button
-                onClick={handleCreateOrg}
-                disabled={creating || !newOrgName.trim()}
-                className="px-4 py-2 bg-[var(--brand)] text-white rounded-lg text-sm font-medium hover:opacity-90 disabled:opacity-50 transition-opacity"
-              >
-                {creating ? 'Creating...' : 'Create & Switch'}
-              </button>
-              <button
-                onClick={() => { setShowCreateForm(false); setNewOrgName(''); setCreateMessage(''); }}
-                className="px-4 py-2 border border-[var(--border)] rounded-lg text-sm hover:bg-[var(--accent)] transition-colors"
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        )}
-
-        {createMessage && (
-          <p className={`text-sm ${createMessage.includes('created') ? 'text-green-600' : 'text-[var(--destructive)]'}`}>
-            {createMessage}
-          </p>
-        )}
-      </div>
-
       {/* Danger Zone — ADMIN only */}
       {isAdmin && (
         <div className="border border-[var(--destructive-border)] rounded-lg p-5 bg-[var(--destructive-bg)]/30 space-y-3">
@@ -282,17 +222,21 @@ export default function OrganizationSettingsPage() {
         </Dialog.Portal>
       </Dialog.Root>
 
-      {/* My organizations list — available to ALL users */}
-      {orgs && orgs.length > 1 && (
-        <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 space-y-3">
-          <h3 className="text-sm font-semibold">My Organizations</h3>
-          <div className="divide-y divide-[var(--border)]">
-            {orgs.map((org) => {
+      {/* My organizations list + create new — available to ALL users */}
+      <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 space-y-3">
+        <h3 className="text-sm font-semibold">My Organizations</h3>
+        {orgs && orgs.length > 0 && (
+          <div>
+            {orgs.map((org, index) => {
               const isActive = org.id === user?.organizationId;
               return (
-                <div key={org.id} className="flex items-center justify-between py-2.5 first:pt-0 last:pb-0">
+                <div key={org.id}>
+                  {index > 0 && (
+                    <div className="border-t border-[var(--border)]" />
+                  )}
+                <div className={`flex items-center justify-between px-2 rounded-lg ${isActive ? 'bg-[var(--accent)] py-[7px] my-[7px]' : 'py-2.5'}`}>
                   <div className="min-w-0">
-                    <p className={`text-sm truncate ${isActive ? 'font-medium text-[var(--brand)]' : ''}`}>
+                    <p className={`text-sm truncate ${isActive ? 'font-medium' : ''}`}>
                       {org.name}
                     </p>
                     <p className="text-xs text-[var(--muted-foreground)]">
@@ -312,11 +256,37 @@ export default function OrganizationSettingsPage() {
                     </button>
                   )}
                 </div>
+                </div>
               );
             })}
           </div>
+        )}
+        <div className="space-y-2 !mt-8">
+          <p className="text-xs font-medium text-[var(--muted-foreground)]">Create New Organization</p>
+          <div className="flex flex-col sm:flex-row gap-2">
+            <input
+              type="text"
+              value={newOrgName}
+              onChange={(e) => setNewOrgName(e.target.value)}
+              className="flex-1 px-3 py-2 bg-[var(--background)] border border-[var(--border)] rounded-lg text-sm focus:ring-2 focus:ring-[var(--brand)] focus:border-transparent outline-none"
+              placeholder="New organization name"
+              onKeyDown={(e) => { if (e.key === 'Enter') handleCreateOrg(); }}
+            />
+            <button
+              onClick={handleCreateOrg}
+              disabled={creating || !newOrgName.trim()}
+              className="px-4 py-2 bg-[var(--brand)] text-white rounded-lg text-sm font-medium hover:opacity-90 disabled:opacity-50 transition-opacity sm:flex-shrink-0"
+            >
+              {creating ? 'Creating...' : 'Create Organization'}
+            </button>
+          </div>
+          {createMessage && (
+            <p className={`text-sm ${createMessage.includes('created') ? 'text-green-600' : 'text-[var(--destructive)]'}`}>
+              {createMessage}
+            </p>
+          )}
         </div>
-      )}
+      </div>
     </div>
   );
 }

From ec21f264554ec3ee72fc8e13993da2d295a48973 Mon Sep 17 00:00:00 2001
From: Mirko Poloni <mirko.poloni@kochfreiburg.de>
Date: Tue, 19 May 2026 18:32:05 +0200
Subject: [PATCH 2/2] fix(settings): fix indentation and remove !important
 margin override

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/app/settings/organization/page.tsx    | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/frontend/src/app/settings/organization/page.tsx b/packages/frontend/src/app/settings/organization/page.tsx
index 4cbe6ee5..1f8bd799 100644
--- a/packages/frontend/src/app/settings/organization/page.tsx
+++ b/packages/frontend/src/app/settings/organization/page.tsx
@@ -223,10 +223,10 @@ export default function OrganizationSettingsPage() {
       </Dialog.Root>
 
       {/* My organizations list + create new — available to ALL users */}
-      <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 space-y-3">
+      <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5">
         <h3 className="text-sm font-semibold">My Organizations</h3>
         {orgs && orgs.length > 0 && (
-          <div>
+          <div className="mt-3">
             {orgs.map((org, index) => {
               const isActive = org.id === user?.organizationId;
               return (
@@ -234,34 +234,34 @@ export default function OrganizationSettingsPage() {
                   {index > 0 && (
                     <div className="border-t border-[var(--border)]" />
                   )}
-                <div className={`flex items-center justify-between px-2 rounded-lg ${isActive ? 'bg-[var(--accent)] py-[7px] my-[7px]' : 'py-2.5'}`}>
-                  <div className="min-w-0">
-                    <p className={`text-sm truncate ${isActive ? 'font-medium' : ''}`}>
-                      {org.name}
-                    </p>
-                    <p className="text-xs text-[var(--muted-foreground)]">
-                      {org.role} &middot; Joined {new Date(org.joinedAt).toLocaleDateString()}
-                    </p>
+                  <div className={`flex items-center justify-between px-2 rounded-lg ${isActive ? 'bg-[var(--accent)] py-[7px] my-[7px]' : 'py-2.5'}`}>
+                    <div className="min-w-0">
+                      <p className={`text-sm truncate ${isActive ? 'font-medium' : ''}`}>
+                        {org.name}
+                      </p>
+                      <p className="text-xs text-[var(--muted-foreground)]">
+                        {org.role} &middot; Joined {new Date(org.joinedAt).toLocaleDateString()}
+                      </p>
+                    </div>
+                    {isActive ? (
+                      <span className="text-xs bg-[var(--brand-light)] text-[var(--brand)] px-2 py-0.5 rounded-full font-medium flex-shrink-0">
+                        Active
+                      </span>
+                    ) : (
+                      <button
+                        onClick={() => switchOrg(org.id)}
+                        className="text-xs px-3 py-1 border border-[var(--border)] rounded-lg hover:bg-[var(--accent)] transition-colors flex-shrink-0"
+                      >
+                        Switch
+                      </button>
+                    )}
                   </div>
-                  {isActive ? (
-                    <span className="text-xs bg-[var(--brand-light)] text-[var(--brand)] px-2 py-0.5 rounded-full font-medium flex-shrink-0">
-                      Active
-                    </span>
-                  ) : (
-                    <button
-                      onClick={() => switchOrg(org.id)}
-                      className="text-xs px-3 py-1 border border-[var(--border)] rounded-lg hover:bg-[var(--accent)] transition-colors flex-shrink-0"
-                    >
-                      Switch
-                    </button>
-                  )}
-                </div>
                 </div>
               );
             })}
           </div>
         )}
-        <div className="space-y-2 !mt-8">
+        <div className="space-y-2 mt-8">
           <p className="text-xs font-medium text-[var(--muted-foreground)]">Create New Organization</p>
           <div className="flex flex-col sm:flex-row gap-2">
             <input