From 4eaf7e50d78ec436af9283cae6af35595e505c03 Mon Sep 17 00:00:00 2001
From: Kelly <kelly@cannabrands.com>
Date: Sat, 13 Dec 2025 23:06:42 -0700
Subject: [PATCH] feat(ui): Add dropdown for Add User/Origin button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Single dropdown button shows both options
- Selecting an option switches to that tab and opens modal
- Cleaner UX than separate buttons per tab

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 cannaiq/src/pages/Users.tsx | 51 +++++++++++++++++++++++++++----------
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/cannaiq/src/pages/Users.tsx b/cannaiq/src/pages/Users.tsx
index a09ebdbf..f7457ba2 100644
--- a/cannaiq/src/pages/Users.tsx
+++ b/cannaiq/src/pages/Users.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { Layout } from '../components/Layout';
 import { api } from '../lib/api';
 import { useAuthStore } from '../store/authStore';
-import { Users as UsersIcon, Plus, Pencil, Trash2, X, Check, AlertCircle, Globe, Shield, Power, PowerOff } from 'lucide-react';
+import { Users as UsersIcon, Plus, Pencil, Trash2, X, Check, AlertCircle, Globe, Shield, Power, PowerOff, ChevronDown } from 'lucide-react';
 
 interface User {
   id: number;
@@ -56,6 +56,9 @@ export function Users() {
   const [originsLoading, setOriginsLoading] = useState(true);
   const [originsError, setOriginsError] = useState<string | null>(null);
   const [showOriginModal, setShowOriginModal] = useState(false);
+
+  // Add dropdown state
+  const [showAddDropdown, setShowAddDropdown] = useState(false);
   const [editingOrigin, setEditingOrigin] = useState<TrustedOrigin | null>(null);
   const [originFormData, setOriginFormData] = useState<OriginFormData>({ name: '', origin_type: 'domain', origin_value: '', description: '' });
   const [originFormError, setOriginFormError] = useState<string | null>(null);
@@ -344,23 +347,45 @@ export function Users() {
               <p className="text-sm text-gray-500">Manage users and trusted origins</p>
             </div>
           </div>
-          {activeTab === 'users' ? (
+          <div className="relative">
             <button
-              onClick={() => { setShowCreateModal(true); setFormError(null); }}
+              onClick={() => setShowAddDropdown(!showAddDropdown)}
+              onBlur={() => setTimeout(() => setShowAddDropdown(false), 150)}
               className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
             >
               <Plus className="w-4 h-4" />
-              Add User
+              Add
+              <ChevronDown className="w-4 h-4" />
             </button>
-          ) : (
-            <button
-              onClick={() => { setShowOriginModal(true); setOriginFormError(null); }}
-              className="flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors"
-            >
-              <Plus className="w-4 h-4" />
-              Add Origin
-            </button>
-          )}
+            {showAddDropdown && (
+              <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50">
+                <button
+                  onClick={() => {
+                    setActiveTab('users');
+                    setShowCreateModal(true);
+                    setFormError(null);
+                    setShowAddDropdown(false);
+                  }}
+                  className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2"
+                >
+                  <UsersIcon className="w-4 h-4" />
+                  Add User
+                </button>
+                <button
+                  onClick={() => {
+                    setActiveTab('origins');
+                    setShowOriginModal(true);
+                    setOriginFormError(null);
+                    setShowAddDropdown(false);
+                  }}
+                  className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2"
+                >
+                  <Globe className="w-4 h-4" />
+                  Add Origin
+                </button>
+              </div>
+            )}
+          </div>
         </div>
 
         {/* Tabs */}