Add Post creation and complete edit/management functionality

Implement post creation and UI improvements:

Post Management:
- PostForm component for creating new posts
- Post type selection (Announcement, Post, Showcase, Question, Request)
- Title, URL, and content fields with validation
- Authentication-gated (sign in required)
- Auto-reload posts after creation

Home Page Updates:
- '+ New Post' button for authenticated users (pink fab button like original)
- Toggle show/hide post creation form
- Refresh posts list after creating new post
- Improved layout and user experience

Summary of All Create/Edit Functionality:
✅ Technologies - Full CRUD (create, read, update, delete)
✅ Tech Stacks - View with proper technology display
✅ Posts - Create new posts
✅ Authentication checks on all forms
✅ Edit buttons on detail pages for authorized users
✅ New buttons on listing pages

Users can now:
- Browse all content (technologies, stacks, posts)
- Create new technologies with logos
- Edit existing technologies (if authorized)
- Delete technologies (if authorized)
- Create new posts
- Manage favorites
- Full authentication integration

Author: claude

nextjs-app/src/app/page.tsx

@@ -2,37 +2,68 @@
 
 import { useEffect, useState } from 'react';
 import { PostsList } from '@/components/posts/PostsList';
+import { PostForm } from '@/components/forms/PostForm';
+import { useAuth } from '@/lib/hooks/useAuth';
 import * as gateway from '@/lib/api/gateway';
 
 export default function HomePage() {
   const [posts, setPosts] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [showPostForm, setShowPostForm] = useState(false);
+  const { isAuthenticated } = useAuth();
 
-  useEffect(() => {
-    const loadPosts = async () => {
-      try {
-        setLoading(true);
-        const response = await gateway.queryPosts({ orderBy: 'rank', take: 50 });
-        setPosts(response.results || []);
-      } catch (err: any) {
-        console.error('Failed to load posts:', err);
-        setError(err.message || 'Failed to load posts');
-      } finally {
-        setLoading(false);
-      }
-    };
+  const loadPosts = async () => {
+    try {
+      setLoading(true);
+      const response = await gateway.queryPosts({ orderBy: 'rank', take: 50 });
+      setPosts(response.results || []);
+    } catch (err: any) {
+      console.error('Failed to load posts:', err);
+      setError(err.message || 'Failed to load posts');
+    } finally {
+      setLoading(false);
+    }
+  };
 
+  useEffect(() => {
     loadPosts();
   }, []);
 
+  const handlePostDone = () => {
+    setShowPostForm(false);
+    loadPosts();
+  };
+
   return (
     <div className="container mx-auto px-4 py-8">
       <div className="max-w-5xl mx-auto">
         <div className="flex items-center justify-between mb-6">
           <h1 className="text-3xl font-bold text-gray-900">Latest News</h1>
+          {isAuthenticated && !showPostForm && (
+            <button
+              onClick={() => setShowPostForm(true)}
+              className="px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700"
+            >
+              + New Post
+            </button>
+          )}
+          {showPostForm && (
+            <button
+              onClick={() => setShowPostForm(false)}
+              className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700"
+            >
+              ✕ Close
+            </button>
+          )}
         </div>
 
+        {showPostForm && (
+          <div className="mb-6">
+            <PostForm onDone={handlePostDone} />
+          </div>
+        )}
+
         {loading && (
           <div className="flex justify-center items-center py-12">
             <div className="text-gray-600">Loading posts...</div>

nextjs-app/src/components/forms/PostForm.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { useRequireAuth } from '@/lib/hooks/useRequireAuth';
+import * as gateway from '@/lib/api/gateway';
+
+interface PostFormProps {
+  onDone?: () => void;
+}
+
+export function PostForm({ onDone }: PostFormProps) {
+  const router = useRouter();
+  const isAuthenticated = useRequireAuth();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const [formData, setFormData] = useState({
+    type: 'Announcement',
+    title: '',
+    url: '',
+    content: '',
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      await gateway.createPost(formData, undefined);
+      if (onDone) {
+        onDone();
+      } else {
+        router.push('/');
+      }
+    } catch (err: any) {
+      setError(err.responseStatus?.message || err.message || 'Failed to create post');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!isAuthenticated) {
+    return (
+      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+        <p className="text-yellow-800">Please sign in to create a post</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <h3 className="text-xl font-bold mb-4">Create New Post</h3>
+
+      {error && (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
+          <p className="text-red-800">{error}</p>
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Post Type</label>
+          <select
+            name="type"
+            value={formData.type}
+            onChange={handleChange}
+            className="w-full h-10 rounded-md border border-gray-300 bg-white px-3 py-2"
+          >
+            <option value="Announcement">Announcement</option>
+            <option value="Post">Post</option>
+            <option value="Showcase">Showcase</option>
+            <option value="Question">Question</option>
+            <option value="Request">Request</option>
+          </select>
+        </div>
+
+        <Input
+          label="Title"
+          name="title"
+          value={formData.title}
+          onChange={handleChange}
+          required
+          maxLength={200}
+        />
+
+        <Input
+          label="URL (optional)"
+          name="url"
+          type="url"
+          value={formData.url}
+          onChange={handleChange}
+          maxLength={500}
+        />
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Content</label>
+          <textarea
+            name="content"
+            value={formData.content}
+            onChange={handleChange}
+            required
+            rows={6}
+            className="w-full rounded-md border border-gray-300 bg-white px-3 py-2"
+          />
+        </div>
+
+        <div className="flex gap-4 justify-end pt-4">
+          <Button type="button" variant="outline" onClick={() => onDone && onDone()}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={loading}>
+            {loading ? 'Creating...' : 'Create Post'}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}