adding tags

app/project/[id]/page.tsx

···
   }, [projectStatus, profile])
 
   const handleEdit = (field: string) => {
+    if (field === 'categories') {
+      // Initialize categoriesInput with current categories as comma-separated string
+      setEditValues({
+        ...editValues, 
+        categoriesInput: projectStatus?.categories?.join(', ') || ''
+      })
+    }
     setEditingField(field)
   }
 
···
         annualBudget: projectStatus?.annualBudget || 0,
         teamSize: projectStatus?.teamSize || 0,
         sustainableRevenuePercent: projectStatus?.sustainableRevenuePercent || 0,
-        categories: projectStatus?.categories || [],
+        categories: field === 'categories' ? 
+          (editValues.categoriesInput ? 
+            editValues.categoriesInput.split(',').map((c: string) => c.trim()).filter((c: string) => c.length > 0) : 
+            editValues[field] || []) : 
+          (projectStatus?.categories || []),
         impactMetrics: projectStatus?.impactMetrics || [],
         geographicDistribution: projectStatus?.geographicDistribution || [],
       }
···
       if (response.ok) {
         // Update local state
         setProjectStatus({...projectStatus, ...updatedData})
+        // Clear temporary input values
+        setEditValues({
+          ...editValues,
+          categoriesInput: undefined
+        })
         setEditingField(null)
         console.log('Successfully saved', field)
       } else {
···
   }
 
   const handleCancel = () => {
+    // Clear any temporary input values
+    setEditValues({
+      ...editValues,
+      categoriesInput: undefined
+    })
     setEditingField(null)
   }
 
···
           </div>
         </div>
 
-        {/* Categories */}
-        <div className="flex flex-wrap gap-1 mb-4 sm:mb-6">
-          {project?.categories?.length ? (
-            project.categories.map((category: string) => (
-              <span
-                key={category}
-                className="inline-flex items-center px-2 py-1 text-xs font-medium bg-accent-light text-secondary"
-              >
-                {category}
-              </span>
-            ))
+        {/* Categories - Editable */}
+        <div className="flex flex-wrap gap-1 mb-4 sm:mb-6 group">
+          {editingField === 'categories' ? (
+            <div className="w-full">
+              {/* Preview tags in real-time */}
+              <div className="flex flex-wrap gap-1 mb-2">
+                {(() => {
+                  const inputValue = editValues.categoriesInput || editValues.categories?.join(', ') || '';
+                  const tags = inputValue
+                    .split(',')
+                    .map((tag: string) => tag.trim())
+                    .filter((tag: string) => tag.length > 0);
+                  
+                  return tags.map((tag: string, index: number) => (
+                    <span
+                      key={`${tag}-${index}`}
+                      className="inline-flex items-center px-2 py-1 text-xs font-medium bg-accent-light text-secondary border border-accent/20 rounded animate-in fade-in duration-150"
+                    >
+                      {tag}
+                    </span>
+                  ));
+                })()}
+                {/* Show partial tag being typed */}
+                {(() => {
+                  const inputValue = editValues.categoriesInput || '';
+                  const lastCommaIndex = inputValue.lastIndexOf(',');
+                  const partialTag = inputValue.slice(lastCommaIndex + 1).trim();
+                  
+                  if (partialTag && !inputValue.endsWith(',')) {
+                    return (
+                      <span className="inline-flex items-center px-2 py-1 text-xs font-medium bg-surface-hover text-muted border border-dashed border-border rounded">
+                        {partialTag}
+                      </span>
+                    );
+                  }
+                  return null;
+                })()}
+              </div>
+              
+              {/* Input field */}
+              <div className="flex items-center gap-2">
+                <input
+                  type="text"
+                  value={editValues.categoriesInput || editValues.categories?.join(', ') || ''}
+                  onChange={(e) => {
+                    setEditValues({...editValues, categoriesInput: e.target.value});
+                  }}
+                  onKeyDown={(e) => handleKeyDown(e, 'categories')}
+                  className="text-xs bg-transparent border border-accent rounded px-2 py-1 focus:outline-none flex-1"
+                  placeholder="Type tags and separate with commas..."
+                  autoFocus
+                />
+                <button
+                  onClick={() => handleSave('categories')}
+                  disabled={saving}
+                  className="p-1 text-accent hover:text-accent-hover disabled:opacity-50"
+                >
+                  <Save className="h-3 w-3" />
+                </button>
+                <button
+                  onClick={handleCancel}
+                  className="p-1 text-muted hover:text-primary"
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </div>
+            </div>
           ) : (
-            <span className="inline-flex items-center px-2 py-1 text-xs font-medium bg-surface-hover text-muted border-dashed border border-border">
-              + Add categories
-            </span>
+            <div className="flex flex-wrap gap-1">
+              {project?.categories?.length ? (
+                project.categories.map((category: string) => (
+                  <span
+                    key={category}
+                    className="inline-flex items-center px-2 py-1 text-xs font-medium bg-accent-light text-secondary"
+                  >
+                    {category}
+                  </span>
+                ))
+              ) : (
+                <span className="inline-flex items-center px-2 py-1 text-xs font-medium bg-surface-hover text-muted border-dashed border border-border">
+                  {isOwnProject ? '+ Add categories' : 'No categories set'}
+                </span>
+              )}
+              {isOwnProject && (
+                <button
+                  onClick={() => handleEdit('categories')}
+                  className="inline-flex items-center px-2 py-1 text-xs font-medium bg-surface-hover text-muted hover:text-primary border-dashed border border-border opacity-0 group-hover:opacity-100 transition-opacity ml-1"
+                >
+                  <Edit2 className="h-3 w-3 mr-1" />
+                  Edit
+                </button>
+              )}
+            </div>
           )}
         </div>