Added native os notifications

app/Console/Commands/UpdateDepartedFlights.php

@@ -4,6 +4,7 @@ namespace App\Console\Commands;
 
 use App\Models\Aircraft;
 use App\Models\Notification;
+use App\Models\User;
 use App\Models\UserFlight;
 use Illuminate\Console\Attributes\Description;
 use Illuminate\Console\Attributes\Signature;
@@ -33,4 +34,28 @@ class UpdateDepartedFlights extends Command
             $flight->update(['departure_processed_at' => $now]);
         }
     }
+
+    protected function notifyFollowersOnDeparture(UserFlight $flight): void
+    {
+        $user = $flight->user;
+        $title = "{$user->name} is taking off!";
+        $flightNumber = $flight->flight_number ? "On {$flight->flight_number} from" : 'From';
+        $body = "{$flightNumber} {$flight->departureAirport->municipality} → {$flight->arrivalAirport->municipality}";
+        $url  = route('profile.flight', [$flight->id]);
+
+        $user->followers()->get()->each(function (User $follower) use ($title, $body, $url) {
+            $notify  = $follower->getSetting('notify_on_flight_departure');
+
+            if ($notify) {
+                Notification::create([
+                    'user_id' => $follower->id,
+                    'title' => $title,
+                    'body' => $body,
+                    'url' => $url,
+                ]);
+            }
+
+        }
+        );
+    }
 }

app/Http/Controllers/FlightController.php

@@ -9,7 +9,9 @@ use App\Models\CrewType;
 use App\Models\FlightClass;
 use App\Models\FlightReason;
 use App\Models\IataEquipmentCode;
+use App\Models\Notification;
 use App\Models\SeatType;
+use App\Models\User;
 use App\Models\UserAction;
 use App\Models\UserFlight;
 use App\Services\FlightStatsService;
@@ -246,10 +248,41 @@ class FlightController extends Controller
             ],
         ]);
 
+        $this->notifyFollowersOnCreation($newFlight);
+
         return redirect()->route('profile.departure-board', [Auth::user()->name, $newFlight->id]);
     }
 
+    protected function notifyFollowersOnCreation(UserFlight $flight): void
+    {
+        $user = $flight->user;
+        $isFuture = $flight->departure_date->isFuture();
 
+        $title = $isFuture
+            ? "{$user->name} booked a new flight"
+            : "{$user->name} logged a new flight";
+
+
+        $flightNumber = $flight->flight_number ? "{$flight->flight_number} from" : 'From';
+        $body = "{$flightNumber} {$flight->departureAirport->municipality} ({$flight->departureAirport->display_code}) → {$flight->arrivalAirport->municipality} ({$flight->arrivalAirport->display_code}) on {$flight->departure_date_display}";
+        $url  = route('profile.departure-board', [$user->name, $flight->id]);
+
+        $user->followers()->get()->each(function (User $follower) use ($title, $body, $url, $isFuture) {
+                $notifyForFuture = $follower->getSetting('notify_on_upcoming_flight_added');
+                $notifyForHistoric = $follower->getSetting('notify_on_historic_flight_added');
+
+            if (($isFuture && $notifyForFuture) || (!$isFuture && $notifyForHistoric)) {
+                    Notification::create([
+                        'user_id' => $follower->id,
+                        'title' => $title,
+                        'body' => $body,
+                        'url' => $url,
+                    ]);
+                }
+
+            }
+        );
+    }
 
 
     public function update(Request $request, UserFlight $flight)
@@ -280,25 +313,46 @@ class FlightController extends Controller
         $this->authorize('delete', $flight);
 
         $snapshot = $flight->snapshot($flight->id);
-
+        $isFuture = now()->utc()->isBefore($flight->departure_date);
-        if(now()->utc()->isBefore($flight->departure_date)){
-            $action = 'flight_deleted';
-        } else {
-            $action = 'flight_cancelled';
-        }
 
         UserAction::create([
-            'user_id'       => $flight->user_id,
+            'user_id' => $flight->user_id,
-            'type'          => $action,
+            'type'    => $isFuture ? 'flight_cancelled' : 'flight_deleted',
-            'data' => [
+            'data'    => [
                 'flight' => $snapshot,
-            ]
+            ],
         ]);
 
+        if ($isFuture) {
+            $this->notifyFollowersOnCancellation($flight);
+        }
+
         $flight->delete();
+
         return redirect()->route('profile.'.$referrer, [Auth::user()->name]);
     }
 
+    protected function notifyFollowersOnCancellation(UserFlight $flight): void
+    {
+        $user = $flight->user;
+
+        $title = "{$user->name} cancelled a flight";
+        $flightNumber = $flight->flight_number ? "{$flight->flight_number} from" : 'From';
+        $body = "{$flightNumber} {$flight->departureAirport->municipality} ({$flight->departureAirport->display_code}) → {$flight->arrivalAirport->municipality} ({$flight->arrivalAirport->display_code}) on {$flight->departure_date_display}";
+        $url  = route('profile.view', [$user->name]);
+
+        $user->followers()->get()->each(function (User $follower) use ($title, $body, $url) {
+            if ($follower->getSetting('notify_on_flight_cancellation')) {
+                Notification::create([
+                    'user_id' => $follower->id,
+                    'title'   => $title,
+                    'body'    => $body,
+                    'url'     => $url,
+                ]);
+            }
+        });
+    }
+
     public function staticData() : array {
         return [
             'seat_types'     => SeatType::orderBy('id')->get()->toArray(),

app/Http/Controllers/FlightImportController.php

@@ -8,7 +8,9 @@ use App\Models\Airport;
 use App\Models\FlightClass;
 use App\Models\FlightReason;
 use App\Models\ImportedFlight;
+use App\Models\Notification;
 use App\Models\SeatType;
+use App\Models\User;
 use App\Models\UserAction;
 use App\Models\UserFlight;
 use Carbon\Carbon;
@@ -268,10 +270,43 @@ class FlightImportController extends Controller
             ],
         ]);
 
+        $this->notifyFollowersOnCreation($newFlight);
+
         ImportedFlight::destroy($validated['imported_flight_id']);
         return to_route('reconcile');
     }
 
+    protected function notifyFollowersOnCreation(UserFlight $flight): void
+    {
+        $user = $flight->user;
+        $isFuture = $flight->departure_date->isFuture();
+
+        $title = $isFuture
+            ? "{$user->name} booked a new flight"
+            : "{$user->name} logged a new flight";
+
+
+        $flightNumber = $flight->flight_number ? "{$flight->flight_number} from" : 'From';
+        $body = "{$flightNumber} {$flight->departureAirport->municipality} ({$flight->departureAirport->display_code}) → {$flight->arrivalAirport->municipality} ({$flight->arrivalAirport->display_code}) on {$flight->departure_date_display}";
+        $url  = route('profile.departure-board', [$user->name, $flight->id]);
+
+        $user->followers()->get()->each(function (User $follower) use ($title, $body, $url, $isFuture) {
+            $notifyForFuture = $follower->getSetting('notify_on_upcoming_flight_added');
+            $notifyForHistoric = $follower->getSetting('notify_on_historic_flight_added');
+
+            if (($isFuture && $notifyForFuture) || (!$isFuture && $notifyForHistoric)) {
+                Notification::create([
+                    'user_id' => $follower->id,
+                    'title' => $title,
+                    'body' => $body,
+                    'url' => $url,
+                ]);
+            }
+
+        }
+        );
+    }
+
 
     private function validateCsvFormat(string $path): ?string
     {

app/Http/Controllers/FollowerController.php

@@ -38,6 +38,14 @@ class FollowerController extends Controller
         if ($existing) {
             $existing->delete();
             $this->clearFollowingCache(auth()->user());
+
+            Notification::where('user_id', $user->id)
+                ->whereIn('title', ['New follower', 'Follow request'])
+                ->where('url', $canView ?? true
+                    ? '/u/' . auth()->user()->name
+                    : '/follow-requests')
+                ->delete();
+
             return response()->json(['status' => 'none']);
         }
 
@@ -51,15 +59,17 @@ class FollowerController extends Controller
 
         $this->clearFollowingCache(auth()->user());
 
-        Notification::create([
+        if($user->getSetting('notify_on_new_follower')) {
-            'user_id'        => $user->id,
+            Notification::create([
-            'title'          => $canView ? 'New follower' : 'Follow request',
+                'user_id' => $user->id,
-            'body'           => $canView
+                'title' => $canView ? 'New follower' : 'Follow request',
-                ? auth()->user()->name . ' is now following you.'
+                'body' => $canView
-                : auth()->user()->name . ' wants to follow you.',
+                    ? auth()->user()->name . ' is now following you.'
-            'is_achievement' => false,
+                    : auth()->user()->name . ' wants to follow you.',
-            'url'            => $canView ? '/u/' . auth()->user()->name : '/follow-requests',
+                'is_achievement' => false,
-        ]);
+                'url' => $canView ? '/u/' . auth()->user()->name : '/follow-requests',
+            ]);
+        }
 
         return response()->json(['status' => $canView ? 'following' : 'requested']);
     }

app/Models/User.php

@@ -8,6 +8,7 @@ use Illuminate\Database\Eloquent\Attributes\Fillable;
 use Illuminate\Database\Eloquent\Attributes\Hidden;
 use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use App\Traits\HasAchievements;
@@ -144,11 +145,20 @@ class User extends Authenticatable
         return $this->hasMany(Followee::class, 'user_id')->verified();
     }
 
-    public function followers(): HasMany
+    public function pendingFollowers(): BelongsToMany
     {
-        return $this->hasMany(Followee::class, 'followee_id')->verified();
+        return $this->belongsToMany(User::class, 'followees', 'followee_id', 'user_id')
+            ->withPivot('verified')
+            ->wherePivot('verified', false)
+            ->withTimestamps();
+    }
+    public function followers(): BelongsToMany
+    {
+        return $this->belongsToMany(User::class, 'followees', 'followee_id', 'user_id')
+            ->withPivot('verified')
+            ->wherePivot('verified', true)
+            ->withTimestamps();
     }
-
 
     public function isFollowing(User $user): bool
     {

app/Observers/FlightObserver.php

@@ -2,6 +2,7 @@
 
 namespace App\Observers;
 
+use App\Models\User;
 use App\Models\UserFlight;
 use Illuminate\Support\Facades\Cache;
 
@@ -11,10 +12,11 @@ class FlightObserver
     {
         Cache::forget("user_flights_{$flight->user->id}");
 
-        //Make queued task if the site gets big
+        $flight
-        $flight->user->followers()
+            ->user
+            ->followers()
             ->get()
-            ->each(fn ($follower) => Cache::forget("user_following_flights_{$follower->user_id}"));
+            ->each(fn ($follower) => Cache::forget("user_following_flights_{$follower->id}"));
     }
 
 

app/Settings/SettingsRegistry.php

@@ -12,6 +12,7 @@ class SettingsRegistry
             'FlightsGoneBy Settings' => 'Settings for Site Behaviour',
             'AI Generated Content'   => 'Airline tail logos and liveries are AI generated with human cleanup. If you would rather not see any AI, then our blank aircraft templates are human created.',
             'Account & Privacy'   => 'Everything to do with your account.',
+            'Notifications'   => 'What you want to hear about (or not!)',
         ];
     }
 
@@ -22,7 +23,7 @@ class SettingsRegistry
                 'key'     => 'distance_unit',
                 'type'    => 'select',
                 'label'   => 'Distance Units',
-                'category' => 'Units of Measurement',
+                'category' => 'FlightsGoneBy Settings',
                 'default' => 'km',
                 'options' => [
                     ['value' => 'km', 'label' => 'Kilometres (km)'],
@@ -107,7 +108,7 @@ class SettingsRegistry
                 'category' => 'FlightsGoneBy Settings',
                 'type'     => 'multiselect',
                 'label'    => 'Which columns to show on the Departure Board',
-                'default'  => ['airline', 'flight_number', 'from', 'to', 'departure_date', 'departure_time', 'arrival_time', 'duration', 'distance', 'aircraft', 'registration', 'class_seat_combined'],
+                'default'  => ['airline', 'flight_number', 'departure_airport', 'arrival_airport', 'departure_date', 'departure_time', 'arrival_time', 'duration', 'distance', 'aircraft', 'registration', 'class_seat_combined'],
                 'options'  => [
                     ['value' => 'airline', 'label' => 'Airline'],
                     ['value' => 'flight_number', 'label' => 'Flight Number'],
@@ -123,6 +124,48 @@ class SettingsRegistry
                     ['value' => 'class_seat_combined', 'label' => 'Class/Seat Type/Seat Number Combined'],
                 ],
             ],
+            [
+                'category' => 'Notifications',
+                'key'     => 'notify_on_new_follower',
+                'type'    => 'checkbox',
+                'label'   => 'Notify Me When I Receive a New Follower',
+                'default' => true,
+            ],
+            [
+                'category' => 'Notifications',
+                'key'     => 'notify_on_historic_flight_added',
+                'type'    => 'checkbox',
+                'label'   => 'Notify Me When Someone I Follow Logs a Historic Flight',
+                'default' => true,
+            ],
+            [
+                'category' => 'Notifications',
+                'key'     => 'notify_on_upcoming_flight_added',
+                'type'    => 'checkbox',
+                'label'   => 'Notify Me When Someone I Follow Logs an Upcoming Flight',
+                'default' => true,
+            ],
+            [
+                'category' => 'Notifications',
+                'key'     => 'notify_on_flight_departure',
+                'type'    => 'checkbox',
+                'label'   => 'Notify Me When Someone I Follow Departs',
+                'default' => true,
+            ],
+/*            [
+                'category' => 'Notifications',
+                'key'     => 'notify_on_flight_arrival',
+                'type'    => 'checkbox',
+                'label'   => 'Notify Me When Someone I Follow Arrives',
+                'default' => true,
+            ],*/
+            [
+                'category' => 'Notifications',
+                'key'     => 'notify_on_flight_cancellation',
+                'type'    => 'checkbox',
+                'label'   => 'Notify Me When Someone I Follow Cancels an Upcoming Flight',
+                'default' => false,
+            ],
         ];
     }
 
@@ -139,13 +182,16 @@ class SettingsRegistry
         foreach (static::schema() as $field) {
             $key = "settings.{$field['key']}";
             $rules[$key] = match ($field['type']) {
-                'select'   => ['required', 'string', 'in:' . implode(',', array_column($field['options'], 'value'))],
+                'select'      => ['sometimes', 'required', 'string', 'in:' . implode(',', array_column($field['options'], 'value'))],
-                'checkbox' => ['boolean'],
+                'checkbox'    => ['sometimes', 'boolean'],
-                'text'     => ['nullable', 'string', 'max:255'],
+                'text'        => ['sometimes', 'nullable', 'string', 'max:255'],
-                'multiselect' => ['nullable', 'array'],
+                'multiselect' => ['sometimes', 'nullable', 'array'],
-                "settings.{$field['key']}.*" => ['string'],
+                default       => ['sometimes', 'nullable'],
-                default    => ['nullable'],
             };
+
+            if ($field['type'] === 'multiselect') {
+                $rules["{$key}.*"] = ['string'];
+            }
         }
         return $rules;
     }

dockerfile

@@ -3,6 +3,7 @@ FROM php:8.4-fpm-alpine
 RUN apk add --no-cache nginx curl zip unzip git postgresql-dev nodejs npm dcron \
     && docker-php-ext-install pdo pdo_pgsql pgsql opcache pcntl
 
+RUN docker-php-ext-install bcmath
 COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
 
 WORKDIR /var/www

resources/js/Components/CategorySettingsForm.vue

@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import axios from 'axios'
+import type { SettingField } from "@/Types/types"
+
+const props = defineProps<{
+    fields: SettingField[],
+    description?: string | null
+}>()
+
+const values = reactive(
+    Object.fromEntries(props.fields.map(f => [f.key, f.value]))
+)
+const saving = ref(false)
+const saved  = ref(false)
+const error  = ref(false)
+
+async function save() {
+    saving.value = true
+    error.value  = false
+    try {
+        await axios.patch('/settings', { settings: values })
+        saved.value = true
+        setTimeout(() => saved.value = false, 3000)
+    } catch {
+        error.value = true
+    } finally {
+        saving.value = false
+    }
+}
+</script>
+
+<template>
+    <v-form @submit.prevent="save">
+        <small v-if="description" class="text-body-2 text-medium-emphasis mb-3 d-block">
+            {{ description }}
+        </small>
+
+        <template v-for="field in fields" :key="field.key">
+
+            <v-select
+                v-if="field.type === 'select'"
+                v-model="values[field.key]"
+                :label="field.label"
+                :items="field.options"
+                item-title="label"
+                item-value="value"
+                variant="outlined"
+                density="comfortable"
+                class="mb-2"
+            />
+
+            <v-text-field
+                v-else-if="field.type === 'text'"
+                v-model="values[field.key]"
+                :label="field.label"
+                variant="outlined"
+                density="comfortable"
+                class="mb-2"
+            />
+
+            <v-checkbox
+                v-else-if="field.type === 'checkbox'"
+                v-model="values[field.key]"
+                :label="field.label"
+                color="primary"
+                density="comfortable"
+                hide-details
+                class="mb-2"
+            />
+
+            <v-select
+                v-else-if="field.type === 'multiselect'"
+                v-model="values[field.key]"
+                :label="field.label"
+                :items="field.options"
+                item-title="label"
+                item-value="value"
+                variant="outlined"
+                density="comfortable"
+                chips
+                multiple
+                closable-chips
+                clearable
+                class="mb-2"
+            />
+
+        </template>
+
+        <v-divider class="my-4" />
+
+        <div class="d-flex align-center gap-3">
+            <v-btn
+                type="submit"
+                color="primary"
+                variant="elevated"
+                :loading="saving"
+                min-width="140"
+            >
+                Save settings
+            </v-btn>
+
+            <v-fade-transition>
+                <div v-if="saved" class="d-flex align-center gap-1 text-success">
+                    <v-icon size="18">mdi-check-circle</v-icon>
+                    <span class="text-body-2">Saved</span>
+                </div>
+            </v-fade-transition>
+
+            <v-fade-transition>
+                <div v-if="error" class="d-flex align-center gap-1 text-error">
+                    <v-icon size="18">mdi-alert-circle</v-icon>
+                    <span class="text-body-2">Something went wrong</span>
+                </div>
+            </v-fade-transition>
+        </div>
+    </v-form>
+</template>

resources/js/Components/FlightsGoneBy/GlassBox.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-defineProps<{
+withDefaults(defineProps<{
-    title?: string;
+    title: string,
-    blurb?: string;
+    wide?: boolean,
-}>();
+    blurb?: string
+}>(), { wide: false })
 </script>
 
 <template>
-    <div class="glass-box glass glass-border">
+    <div class="glass glass-border glass-box" :class="{ 'glass-box--wide': wide }">
         <h2 v-if="title">{{ title }}</h2>
         <p v-if="blurb">{{ blurb }}</p>
         <slot />
@@ -21,6 +22,10 @@ defineProps<{
     margin: 2em;
 }
 
+.glass-box--wide {
+    width: clamp(280px, 100%, 960px);
+}
+
 h2 {
     font-size: 2rem;
     text-align: center;

resources/js/Pages/Settings/GeneralSettings.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { reactive, ref, computed } from 'vue'
+import { reactive, ref } from 'vue'
 import axios from 'axios'
 import type { SettingField } from "@/Types/types"
 
 const props = defineProps<{
     fields: SettingField[],
-    categories: Record<string, string>
+    description?: string | null
 }>()
 
 const values = reactive(
@@ -15,14 +15,6 @@ const saving = ref(false)
 const saved  = ref(false)
 const error  = ref(false)
 
-const groupedFields = computed(() =>
-    props.fields.reduce((groups: Record<string, SettingField[]>, field) => {
-        const cat = field.category ?? 'General'
-        ;(groups[cat] ??= []).push(field)
-        return groups
-    }, {} as Record<string, SettingField[]>)
-)
-
 async function save() {
     saving.value = true
     error.value  = false
@@ -40,64 +32,59 @@ async function save() {
 
 <template>
     <v-form @submit.prevent="save">
-        <template v-for="(groupFields, category) in groupedFields" :key="category">
+        <small v-if="description" class="text-body-2 text-medium-emphasis mb-3 d-block">
-            <p class="text-overline text-medium-emphasis mb-1 mt-4">{{ category }}</p>
+            {{ description }}
-            <small v-if="categories[category]" class="text-body-2 text-medium-emphasis mb-3">
+        </small>
-                {{ categories[category] }}
-            </small>
-            <v-divider class="mb-4" />
 
-            <template v-for="field in groupFields" :key="field.key">
+        <template v-for="field in fields" :key="field.key">
 
-                <v-select
+            <v-select
-                    v-if="field.type === 'select'"
+                v-if="field.type === 'select'"
-                    v-model="values[field.key]"
+                v-model="values[field.key]"
-                    :label="field.label"
+                :label="field.label"
-                    :items="field.options"
+                :items="field.options"
-                    item-title="label"
+                item-title="label"
-                    item-value="value"
+                item-value="value"
-                    variant="outlined"
+                variant="outlined"
-                    density="comfortable"
+                density="comfortable"
-                    class="mb-2"
+                class="mb-2"
-                />
+            />
 
-                <v-text-field
+            <v-text-field
-                    v-else-if="field.type === 'text'"
+                v-else-if="field.type === 'text'"
-                    v-model="values[field.key]"
+                v-model="values[field.key]"
-                    :label="field.label"
+                :label="field.label"
-                    variant="outlined"
+                variant="outlined"
-                    density="comfortable"
+                density="comfortable"
-                    class="mb-2"
+                class="mb-2"
-                />
+            />
 
-                <v-checkbox
+            <v-checkbox
-                    v-else-if="field.type === 'checkbox'"
+                v-else-if="field.type === 'checkbox'"
-                    v-model="values[field.key]"
+                v-model="values[field.key]"
-                    :label="field.label"
+                :label="field.label"
-                    color="primary"
+                color="primary"
-                    density="comfortable"
+                density="comfortable"
-                    hide-details
+                hide-details
-                    class="mb-2"
+                class="mb-2"
-                />
+            />
 
-                <v-select
+            <v-select
-                    v-else-if="field.type === 'multiselect'"
+                v-else-if="field.type === 'multiselect'"
-                    v-model="values[field.key]"
+                v-model="values[field.key]"
-                    :label="field.label"
+                :label="field.label"
-                    :items="field.options"
+                :items="field.options"
-                    item-title="label"
+                item-title="label"
-                    item-value="value"
+                item-value="value"
-                    variant="outlined"
+                variant="outlined"
-                    density="comfortable"
+                density="comfortable"
-                    chips
+                chips
-                    multiple
+                multiple
-                    closable-chips
+                closable-chips
-                    clearable
+                clearable
-                    class="mb-2"
+                class="mb-2"
-                />
+            />
 
-
-            </template>
         </template>
 
         <v-divider class="my-4" />

resources/js/Pages/UserFlight.vue

@@ -44,7 +44,7 @@ const props = defineProps<{
                 <RoutePanel :flight="flight" />
                 <Panel label="Flight Details">
                     <BoardingPass :user="user" :showToolTips="false" style="width:100%;max-width:600px; margin:0 auto" :flight="flight" :canEdit="canEdit" />
-                    <DetailRows>
+                    <DetailRows v-if="otherUsersOnFlight.length > 0">
                         <PanelLabel>Other Users On This Flight</PanelLabel>
                         <div class="d-flex flex-wrap ga-2">
                             <v-chip

resources/js/Pages/UserSettings.vue

@@ -2,9 +2,9 @@
 import MainLayout from "@/Layouts/MainLayout.vue"
 import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue"
 import { Head } from "@inertiajs/vue3"
-import { ref, watch } from "vue"
+import { computed, ref, watch } from "vue"
 import type { SettingField } from "@/Types/types"
-import GeneralSettings from "@/Pages/Settings/GeneralSettings.vue"
+import CategorySettingsForm from "@/Components/CategorySettingsForm.vue"
 import FollowerSettings from "@/Pages/Settings/FollowerSettings.vue"
 
 defineOptions({ layout: MainLayout })
@@ -17,28 +17,69 @@ const props = defineProps<{
 
 const tab = ref(props.defaultTab)
 
+function slugify(name: string) {
+    return name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/(^-|-$)/g, '')
+}
+
+const groupedFields = computed(() =>
+    props.fields.reduce((groups: Record<string, SettingField[]>, field) => {
+        const cat = field.category ?? 'General'
+        ;(groups[cat] ??= []).push(field)
+        return groups
+    }, {} as Record<string, SettingField[]>)
+)
+
+const categoryTabs = computed(() =>
+    Object.entries(groupedFields.value).map(([name, fields]) => ({
+        name,
+        slug: slugify(name),
+        description: props.categories[name] ?? null,
+        fields,
+    }))
+)
+
 watch(tab, (value) => {
-    const path = value === 'general' ? '/settings' : `/settings/${value}`
+    const path = value === props.defaultTab ? '/settings' : `/settings/${value}`
     window.history.replaceState(window.history.state, '', path)
 })
 </script>
 
 <template>
     <Head title="Settings" />
-    <GlassBox title="Your Settings">
+    <GlassBox wide title="Your Settings">
-        <v-tabs v-model="tab" class="mb-4">
+        <v-row>
-            <v-tab value="general">General</v-tab>
+            <v-col cols="12" md="3">
-            <v-tab value="followers">Followers</v-tab>
+                <v-tabs
-        </v-tabs>
+                    v-model="tab"
+                    direction="vertical"
+                    color="primary"
+                >
+                    <v-tab
+                        v-for="cat in categoryTabs"
+                        :key="cat.slug"
+                        :value="cat.slug"
+                        class="justify-start"
+                    >
+                        {{ cat.name }}
+                    </v-tab>
+                    <v-tab value="followers" class="justify-start">Followers</v-tab>
+                </v-tabs>
+            </v-col>
 
-        <v-window v-model="tab">
+            <v-col cols="12" md="9">
-            <v-window-item value="general">
+                <v-window v-model="tab">
-                <GeneralSettings :fields="fields" :categories="categories" />
+                    <v-window-item v-for="cat in categoryTabs" :key="cat.slug" :value="cat.slug">
-            </v-window-item>
+                        <CategorySettingsForm :fields="cat.fields" :description="cat.description" />
+                    </v-window-item>
 
-            <v-window-item value="followers">
+                    <v-window-item value="followers">
-                <FollowerSettings />
+                        <FollowerSettings />
-            </v-window-item>
+                    </v-window-item>
-        </v-window>
+                </v-window>
+            </v-col>
+        </v-row>
     </GlassBox>
 </template>