Add post creation and display features

Implemented post creation form with multiple content types.
Added detailed post view with nested comment threading.

resources/views/partials/comment.blade.php

@@ -0,0 +1,80 @@
+<div class="mb-4" style="margin-left: {{ $depth * 20 }}px;">
+    <div class="border-l-2 border-gray-200 pl-4">
+        <div class="flex items-start mb-2">
+            <div class="flex flex-col items-center mr-2">
+                @auth
+                    <form action="{{ route('comments.vote', $comment) }}" method="POST">
+                        @csrf
+                        <input type="hidden" name="vote" value="1">
+                        <button type="submit" class="text-gray-400 hover:text-orange-600 text-xs">▲</button>
+                    </form>
+                @else
+                    <span class="text-gray-400 text-xs">▲</span>
+                @endauth
+
+                <span class="text-xs font-bold {{ $comment->votes > 0 ? 'text-orange-600' : ($comment->votes < 0 ? 'text-blue-600' : 'text-gray-600') }}">
+                    {{ $comment->votes }}
+                </span>
+
+                @auth
+                    <form action="{{ route('comments.vote', $comment) }}" method="POST">
+                        @csrf
+                        <input type="hidden" name="vote" value="-1">
+                        <button type="submit" class="text-gray-400 hover:text-blue-600 text-xs">▼</button>
+                    </form>
+                @else
+                    <span class="text-gray-400 text-xs">▼</span>
+                @endauth
+            </div>
+
+            <div class="flex-1">
+                <div class="text-sm text-gray-600 mb-1">
+                    <a href="{{ route('users.show', $comment->user) }}" class="font-bold hover:underline">u/{{ $comment->user->name }}</a>
+                    • {{ $comment->created_at->diffForHumans() }}
+                </div>
+                <p class="text-gray-800 whitespace-pre-wrap">{{ $comment->content }}</p>
+
+                @auth
+                    <div class="mt-2 text-sm">
+                        <button onclick="toggleReplyForm({{ $comment->id }})" class="text-gray-600 hover:underline">Reply</button>
+                        @if($comment->user_id === auth()->id())
+                            <form action="{{ route('comments.destroy', $comment) }}" method="POST" class="inline ml-2">
+                                @csrf
+                                @method('DELETE')
+                                <button type="submit" class="text-red-600 hover:underline" onclick="return confirm('Are you sure?')">Delete</button>
+                            </form>
+                        @endif
+                    </div>
+
+                    <div id="reply-form-{{ $comment->id }}" class="hidden mt-2">
+                        <form action="{{ route('comments.store', $comment->post) }}" method="POST">
+                            @csrf
+                            <input type="hidden" name="parent_id" value="{{ $comment->id }}">
+                            <textarea name="content" rows="3" required
+                                      class="w-full px-3 py-2 border rounded focus:outline-none focus:border-orange-500"></textarea>
+                            <button type="submit" class="mt-2 bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700 text-sm">
+                                Reply
+                            </button>
+                            <button type="button" onclick="toggleReplyForm({{ $comment->id }})" class="mt-2 text-gray-600 hover:underline text-sm ml-2">
+                                Cancel
+                            </button>
+                        </form>
+                    </div>
+                @endauth
+            </div>
+        </div>
+
+        @foreach($comment->replies as $reply)
+            @include('partials.comment', ['comment' => $reply, 'depth' => $depth + 1])
+        @endforeach
+    </div>
+</div>
+
+@if($depth === 0)
+<script>
+    function toggleReplyForm(commentId) {
+        const form = document.getElementById('reply-form-' + commentId);
+        form.classList.toggle('hidden');
+    }
+</script>
+@endif

resources/views/posts/create.blade.php

@@ -0,0 +1,88 @@
+@extends('layout')
+
+@section('title', 'Create Post')
+
+@section('content')
+<div class="max-w-2xl mx-auto bg-white rounded-lg shadow p-8">
+    <h1 class="text-2xl font-bold mb-6">Create a Post</h1>
+
+    <form action="{{ route('posts.store') }}" method="POST">
+        @csrf
+
+        <div class="mb-4">
+            <label for="community_id" class="block text-gray-700 font-bold mb-2">Community</label>
+            <select id="community_id" name="community_id" required
+                    class="w-full px-3 py-2 border rounded focus:outline-none focus:border-orange-500">
+                <option value="">Select a community</option>
+                @foreach($communities as $community)
+                    <option value="{{ $community->id }}" {{ old('community_id') == $community->id ? 'selected' : '' }}>
+                        r/{{ $community->name }}
+                    </option>
+                @endforeach
+            </select>
+            @error('community_id')
+                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
+            @enderror
+        </div>
+
+        <div class="mb-4">
+            <label for="type" class="block text-gray-700 font-bold mb-2">Post Type</label>
+            <select id="type" name="type" required
+                    class="w-full px-3 py-2 border rounded focus:outline-none focus:border-orange-500">
+                <option value="text" {{ old('type') == 'text' ? 'selected' : '' }}>Text</option>
+                <option value="link" {{ old('type') == 'link' ? 'selected' : '' }}>Link</option>
+                <option value="image" {{ old('type') == 'image' ? 'selected' : '' }}>Image</option>
+            </select>
+            @error('type')
+                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
+            @enderror
+        </div>
+
+        <div class="mb-4">
+            <label for="title" class="block text-gray-700 font-bold mb-2">Title</label>
+            <input type="text" id="title" name="title" value="{{ old('title') }}" required
+                   class="w-full px-3 py-2 border rounded focus:outline-none focus:border-orange-500">
+            @error('title')
+                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
+            @enderror
+        </div>
+
+        <div class="mb-4" id="content-field">
+            <label for="content" class="block text-gray-700 font-bold mb-2">Content</label>
+            <textarea id="content" name="content" rows="6"
+                      class="w-full px-3 py-2 border rounded focus:outline-none focus:border-orange-500">{{ old('content') }}</textarea>
+            @error('content')
+                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
+            @enderror
+        </div>
+
+        <div class="mb-6 hidden" id="url-field">
+            <label for="url" class="block text-gray-700 font-bold mb-2">URL</label>
+            <input type="url" id="url" name="url" value="{{ old('url') }}"
+                   class="w-full px-3 py-2 border rounded focus:outline-none focus:border-orange-500">
+            @error('url')
+                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
+            @enderror
+        </div>
+
+        <button type="submit" class="bg-orange-600 text-white px-6 py-2 rounded hover:bg-orange-700 font-bold">
+            Create Post
+        </button>
+    </form>
+</div>
+
+<script>
+    document.getElementById('type').addEventListener('change', function() {
+        const contentField = document.getElementById('content-field');
+        const urlField = document.getElementById('url-field');
+
+        if (this.value === 'text') {
+            contentField.classList.remove('hidden');
+            urlField.classList.add('hidden');
+        } else {
+            contentField.classList.add('hidden');
+            urlField.classList.remove('hidden');
+        }
+    });
+</script>
+@endsection

resources/views/posts/show.blade.php

@@ -0,0 +1,89 @@
+@extends('layout')
+
+@section('title', $post->title)
+
+@section('content')
+<div class="max-w-4xl mx-auto">
+    <div class="bg-white rounded-lg shadow p-6 mb-6">
+        <div class="flex">
+            <div class="flex flex-col items-center mr-4">
+                @auth
+                    <form action="{{ route('posts.vote', $post) }}" method="POST">
+                        @csrf
+                        <input type="hidden" name="vote" value="1">
+                        <button type="submit" class="text-gray-400 hover:text-orange-600">▲</button>
+                    </form>
+                @else
+                    <span class="text-gray-400">▲</span>
+                @endauth
+
+                <span class="font-bold text-lg {{ $post->votes > 0 ? 'text-orange-600' : ($post->votes < 0 ? 'text-blue-600' : 'text-gray-600') }}">
+                    {{ $post->votes }}
+                </span>
+
+                @auth
+                    <form action="{{ route('posts.vote', $post) }}" method="POST">
+                        @csrf
+                        <input type="hidden" name="vote" value="-1">
+                        <button type="submit" class="text-gray-400 hover:text-blue-600">▼</button>
+                    </form>
+                @else
+                    <span class="text-gray-400">▼</span>
+                @endauth
+            </div>
+
+            <div class="flex-1">
+                <div class="text-sm text-gray-600 mb-2">
+                    <a href="{{ route('communities.show', $post->community) }}" class="font-bold hover:underline">r/{{ $post->community->name }}</a>
+                    • Posted by <a href="{{ route('users.show', $post->user) }}" class="hover:underline">u/{{ $post->user->name }}</a>
+                    • {{ $post->created_at->diffForHumans() }}
+                </div>
+                <h1 class="text-2xl font-bold mb-4">{{ $post->title }}</h1>
+                @if($post->content)
+                    <p class="text-gray-700 mb-4 whitespace-pre-wrap">{{ $post->content }}</p>
+                @endif
+                @if($post->url)
+                    <a href="{{ $post->url }}" target="_blank" class="text-blue-600 hover:underline">{{ $post->url }}</a>
+                @endif
+
+                @auth
+                    @if($post->user_id === auth()->id())
+                        <form action="{{ route('posts.destroy', $post) }}" method="POST" class="mt-4">
+                            @csrf
+                            @method('DELETE')
+                            <button type="submit" class="text-red-600 hover:underline" onclick="return confirm('Are you sure?')">Delete Post</button>
+                        </form>
+                    @endif
+                @endauth
+            </div>
+        </div>
+    </div>
+
+    @auth
+        <div class="bg-white rounded-lg shadow p-6 mb-6">
+            <h2 class="text-xl font-bold mb-4">Add a Comment</h2>
+            <form action="{{ route('comments.store', $post) }}" method="POST">
+                @csrf
+                <textarea name="content" rows="4" required
+                          class="w-full px-3 py-2 border rounded focus:outline-none focus:border-orange-500"></textarea>
+                @error('content')
+                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
+                @enderror
+                <button type="submit" class="mt-2 bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700">
+                    Comment
+                </button>
+            </form>
+        </div>
+    @endauth
+
+    <div class="bg-white rounded-lg shadow p-6">
+        <h2 class="text-xl font-bold mb-4">Comments ({{ $post->comments->count() }})</h2>
+
+        @forelse($post->comments->whereNull('parent_id') as $comment)
+            @include('partials.comment', ['comment' => $comment, 'depth' => 0])
+        @empty
+            <p class="text-gray-600">No comments yet. Be the first to comment!</p>
+        @endforelse
+    </div>
+</div>
+@endsection