add name change support & adjust profile list view

app/Http/Controllers/AuthController.php

@@ -18,12 +18,16 @@ class AuthController extends Controller
 		$user = Socialite::driver('authentik')->user();
 
 		$authUser = User::updateOrCreate(
-			[ 'email' => $user->getEmail() ],
-			[ 'name' => $user->getName() ]
+			[ 'email' => $user->getEmail() ]
 		);
 
 		if ($authUser)
 		{
+			if ($authUser->name == '')
+			{
+				$authUser->name = $user->getName();
+				$authUser->save();
+			}
 			Auth::login($authUser);
 			return redirect('/');
 		}

app/Livewire/Pages/Profile.php

@@ -4,6 +4,7 @@ namespace App\Livewire\Pages;
 
 use App\Models\User;
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
 use Livewire\Attributes\Validate;
 use Livewire\Component;
 use Livewire\WithFileUploads;
@@ -14,15 +15,39 @@ class Profile extends Component
 
 	public User $user;
 
-	#[Validate('image|max:10240')]
 	public $avatar = null;
+	public string $name = '';
+
+	public function mount(User $user)
+	{
+		$this->user = $user;
+		$this->name = $user->name;
+	}
 
     public function render()
     {
         return view('livewire.pages.profile')->title($this->user->name);
     }
 
-	public function updated()
+	public function rules()
+	{
+		return [
+			'avatar' => [
+				'nullable',
+				'image',
+				'max:10240',
+			],
+			'name' => [
+				'required',
+				'string',
+				'min:2',
+				'max:80',
+				Rule::unique('users', 'name')->ignore($this->user),
+			],
+		];
+	}
+
+	public function updated($name, $value)
 	{
 		if (Auth::id() != $this->user->id)
 		{
@@ -31,10 +56,16 @@ class Profile extends Component
 
 		$this->validate();
 
+		$this->user->update([$name => $value]);
+
+		if (isset($this->avatar))
+		{
 			$this->user->avatarExt = $this->avatar->getClientOriginalExtension();
 			$this->user->save();
 
 			$this->avatar->storeAs('avatars', $this->user->id);
 			return $this->redirect("/profiles/{$this->user->id}");
 		}
+
+	}
 }

package-lock.json

@@ -1,5 +1,5 @@
 {
-    "name": "photos",
+    "name": "nyaabooru",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {

resources/views/livewire/app/pfp.blade.php

@@ -5,4 +5,6 @@
 	label="avatar for {{ $user->name }}"
 	shape="{{ $shape }}"
 	style="--size: {{ $size }}"
-></wa-avatar>
+>
+	<livewire:app.icon name="question" slot="icon" style="font-size: 2.5rem;" />
+</wa-avatar>

resources/views/livewire/app/user-card.blade.php

@@ -1,13 +1,11 @@
-<article class="wa-stack nyaabooru-pfp">
-	<a class="wa-frame wa-border-radius-l" style="inline-size: 15rem;" href="{{ url("/profiles/$user->id") }}" wire:navigate.hover>
-		@if (\Illuminate\Support\Facades\Storage::has("avatars/$user->id"))
-			<img src="{{ $user->getAvatarBase64() }}"/>
-		@else
-			<livewire:app.icon name="user" />
-		@endif
-	</a>
+<wa-card>
+	<a class="wa-stack nyaabooru-pfp wa-link-plain" href="{{ url("/profiles/$user->id") }}" wire:navigate.hover>
+		<div class="wa-frame wa-border-radius-l" style="inline-size: 10rem;">
+			<livewire:app.pfp :$user size="10rem" />
+		</div>
 		<div class="wa-stack wa-gap-3xs">
 			<span class="wa-heading-s">{{ $user->name }}</span>
 			<span class="wa-caption-m">Joined <wa-format-date value="{{ $user->created_at }}"></wa-format-date></span>
 		</div>
-</article>
+	</a>
+</wa-card>

resources/views/livewire/pages/profile.blade.php

@@ -23,13 +23,26 @@
 			<h2>User settings</h2>
 			<form wire:submit>
 				<wa-card>
+					<div class="wa-stack wa-gap-l">
 						<div class="wa-stack">
-						<span class="wa-heading-m">Profile picture</span>
+							<span class="wa-heading-s">Profile picture</span>
 							<input type="file" wire:model.live="avatar" wire:loading.attr="disabled" />
 							@error('avatar')
 								<span class="wa-caption-m">{{ $message }}</span>
 							@enderror
 						</div>
+
+						<wa-divider></wa-divider>
+
+						<wa-input label="Display name" wire:model.live="name">
+							<livewire:app.icon name="user-tag" slot="start" />
+						</wa-input>
+						@error('name')
+							<span class="wa-caption-m">{{ $message }}</span>
+						@enderror
+
+					</div>
+
 				</wa-card>
 			</form>
 		</div>