add models, setup livewire, setup mongodb

resources/views/livewire/posts/edit.blade.php

@@ -0,0 +1,49 @@
+<div class="wa-flank wa-align-items-start wa-gap-3xl" style="--flank-size: 20rem;">
+
+	{{-- Sidebar --}}
+	<div class="wa-stack" wire:poll>
+
+		<div class="wa-cluster">
+			<span class="wa-caption-m">Changes are automatically saved.</span>
+			<wa-button href="{{ url("posts/$post->id") }}" appearance="outlined" variant="neutral" size="small" wire:navigate.hover>
+				<wa-icon slot="prefix" name="check"></wa-icon>
+				<span>Finish</span>
+			</wa-button>
+		</div>
+
+		<wa-divider></wa-divider>
+
+		<form wire:submit class="wa-stack">
+			<wa-select wire:model.live="rating" label="Rating" value="{{ $post->rating }}" wire:loading.attr="disabled" @error('rating') hint="{{ $message }}" @enderror>
+				<wa-option value="safe">Safe</wa-option>
+				<wa-option value="suggestive">Suggestive</wa-option>
+				<wa-option value="explicit">Explicit</wa-option>
+			</wa-select>
+
+			@if ($post->rating == 'safe')
+				<wa-switch
+					wire:model.live="featured"
+					{{ $post->featured ? 'checked' : '' }}
+					wire:loading.attr="disabled"
+					hint="Featured posts will be randomly selected to show on the front page.">
+					Feature post
+				</wa-switch>
+			@endif
+		</form>
+
+		<wa-divider></wa-divider>
+
+		{{-- Tags --}}
+		<div class="wa-cluster wa-heading-m">
+			<wa-icon fixed-width name="tags"></wa-icon>
+			<span>Tags</span>
+		</div>
+
+	</div>
+
+	{{-- Main content --}}
+	<div class="wa-stack wa-gap-2xl" wire:poll>
+		<livewire:posts.image :$post lazy />
+	</div>
+
+</div>

resources/views/livewire/posts/image.blade.php

@@ -0,0 +1,5 @@
+<div class="wa-stack" style="display: flex; align-items: center; justify-content: center; max-height: 80vh;">
+	<div class="wa-frame wa-border-radius-l" style="max-inline-size: 100%; {{ $post->getAspectRatio() }}">
+		<img src="{{ $post->getPreviewUrl() }}" />
+	</div>
+</div>

resources/views/livewire/posts/index.blade.php

@@ -0,0 +1,8 @@
+<div class="wa-stack wa-gap-3xl">
+	<h1>Posts</h1>
+	<div class="wa-cluster wa-gap-s">
+		@foreach ($posts as $post)
+			<livewire:posts.thumbnail :$post lazy />
+		@endforeach
+	</div>
+</div>

resources/views/livewire/posts/thumbnail.blade.php

@@ -0,0 +1,10 @@
+<div style="max-inline-size: 256px;">
+    <a
+		id="post_{{ $post->id }}"
+		href="{{ url("posts/$post->id") }}"
+		class="wa-frame wa-border-radius-l"
+		style="border: 2px solid var(--wa-color-{{ $post->getRatingColor() }}-border-loud);"
+		wire:navigate.hover>
+		<img src="{{ $post->getThumbUrl() }}" />
+	</a>
+</div>

resources/views/livewire/posts/view.blade.php

@@ -0,0 +1,72 @@
+<div class="wa-flank wa-align-items-start wa-gap-3xl" style="--flank-size: 20rem;">
+
+	{{-- Sidebar --}}
+	<div class="wa-stack" wire:poll>
+
+		{{-- Post navigation --}}
+		<div class="wa-cluster">
+			@if ($prev = $post->getPreviousPost())
+				<wa-icon-button href="{{ url("posts/$prev->id") }}" name="arrow-left" style="color: var(--wa-color-text-link);" wire:navigate.hover></wa-icon-button>
+			@else
+				<wa-icon-button name="arrow-left" disabled></wa-icon-button>
+			@endif
+
+			@if ($next = $post->getNextPost())
+				<wa-icon-button href="{{ url("posts/$next->id") }}" name="arrow-right" style="color: var(--wa-color-text-link);" wire:navigate.hover></wa-icon-button>
+			@else
+				<wa-icon-button name="arrow-right" disabled></wa-icon-button>
+			@endif
+
+			<wa-icon-button href="{{ url("posts/$post->id/edit") }}" name="file-pen" style="color: var(--wa-color-text-link);" wire:navigate.hover></wa-icon-button>
+			<wa-icon-button href="{{ url("posts/$post->id/download") }}" name="download" style="color: var(--wa-color-text-link);"></wa-icon-button>
+		</div>
+
+		<wa-divider></wa-divider>
+
+		{{-- Post ID --}}
+		<div class="wa-cluster">
+			<wa-icon fixed-width name="hashtag"></wa-icon>
+			<span>{{ $post->id }}</span>
+		</div>
+
+		{{-- Post author --}}
+		<div class="wa-cluster">
+			<wa-icon fixed-width name="user"></wa-icon>
+			<span>{{ $post->user->name }}</span>
+		</div>
+
+		{{-- Post upload date --}}
+		<div class="wa-cluster">
+			<wa-icon fixed-width name="calendar"></wa-icon>
+			<wa-format-date
+				month="numeric"
+				day="numeric"
+				year="numeric"
+				hour="numeric"
+				minute="numeric"
+				date="{{ $post->created_at }}">
+			</wa-format-date>
+		</div>
+
+		{{-- Post rating --}}
+		<div class="wa-cluster">
+			<wa-icon fixed-width name="face-hand-peeking"></wa-icon>
+			<span style="color: var(--wa-color-{{ $post->getRatingColor() }}-on-normal);">{{ $post->rating }}</span>
+		</div>
+
+		<wa-divider></wa-divider>
+
+		{{-- Tags --}}
+		<div class="wa-cluster wa-heading-m">
+			<wa-icon fixed-width name="tags"></wa-icon>
+			<span>Tags</span>
+		</div>
+
+	</div>
+
+	{{-- Main content --}}
+	<div class="wa-stack wa-gap-2xl" wire:poll>
+		<livewire:posts.image :$post lazy />
+	</div>
+
+</div>