adds profile timeline and follows

db/migrations/1734196620_created_follows.go

@@ -0,0 +1,80 @@
+package migrations
+
+import (
+	"encoding/json"
+
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	m "github.com/pocketbase/pocketbase/migrations"
+	"github.com/pocketbase/pocketbase/models"
+)
+
+func init() {
+	m.Register(func(db dbx.Builder) error {
+		jsonData := `{
+			"id": "8obn1ukumze565i",
+			"created": "2024-12-14 17:17:00.381Z",
+			"updated": "2024-12-14 17:17:00.381Z",
+			"name": "follows",
+			"type": "base",
+			"system": false,
+			"schema": [
+				{
+					"system": false,
+					"id": "in1traur",
+					"name": "follower",
+					"type": "relation",
+					"required": false,
+					"presentable": false,
+					"unique": false,
+					"options": {
+						"collectionId": "_pb_users_auth_",
+						"cascadeDelete": false,
+						"minSelect": null,
+						"maxSelect": 1,
+						"displayFields": null
+					}
+				},
+				{
+					"system": false,
+					"id": "wxwomfd5",
+					"name": "followee",
+					"type": "relation",
+					"required": false,
+					"presentable": false,
+					"unique": false,
+					"options": {
+						"collectionId": "_pb_users_auth_",
+						"cascadeDelete": false,
+						"minSelect": null,
+						"maxSelect": 1,
+						"displayFields": null
+					}
+				}
+			],
+			"indexes": [],
+			"listRule": "@request.auth.id = follower.id || @request.auth.id = followee.id",
+			"viewRule": "@request.auth.id = follower.id || @request.auth.id = followee.id",
+			"createRule": "@request.auth.id = follower.id",
+			"updateRule": "@request.auth.id = follower.id",
+			"deleteRule": "@request.auth.id = follower.id",
+			"options": {}
+		}`
+
+		collection := &models.Collection{}
+		if err := json.Unmarshal([]byte(jsonData), &collection); err != nil {
+			return err
+		}
+
+		return daos.New(db).SaveCollection(collection)
+	}, func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("8obn1ukumze565i")
+		if err != nil {
+			return err
+		}
+
+		return dao.DeleteCollection(collection)
+	})
+}

db/migrations/1734200418_created_follow_counts.go

@@ -0,0 +1,74 @@
+package migrations
+
+import (
+	"encoding/json"
+
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	m "github.com/pocketbase/pocketbase/migrations"
+	"github.com/pocketbase/pocketbase/models"
+)
+
+func init() {
+	m.Register(func(db dbx.Builder) error {
+		jsonData := `{
+			"id": "j6w72f0kb5ivd7x",
+			"created": "2024-12-14 18:20:18.920Z",
+			"updated": "2024-12-14 18:20:18.920Z",
+			"name": "follow_counts",
+			"type": "view",
+			"system": false,
+			"schema": [
+				{
+					"system": false,
+					"id": "w81n64il",
+					"name": "followers",
+					"type": "json",
+					"required": false,
+					"presentable": false,
+					"unique": false,
+					"options": {
+						"maxSize": 1
+					}
+				},
+				{
+					"system": false,
+					"id": "rfnejpto",
+					"name": "following",
+					"type": "json",
+					"required": false,
+					"presentable": false,
+					"unique": false,
+					"options": {
+						"maxSize": 1
+					}
+				}
+			],
+			"indexes": [],
+			"listRule": "",
+			"viewRule": "",
+			"createRule": null,
+			"updateRule": null,
+			"deleteRule": null,
+			"options": {
+				"query": "SELECT \n    users.id,\n    COALESCE(followers.count, 0) AS followers,\n    COALESCE(following.count, 0) AS following\nFROM users\nLEFT JOIN (\n    SELECT followee AS user_id, COUNT(*) AS count\n    FROM follows\n    GROUP BY followee\n) AS followers ON users.id = followers.user_id\nLEFT JOIN (\n    SELECT follower AS user_id, COUNT(*) AS count\n    FROM follows\n    GROUP BY follower\n) AS following ON users.id = following.user_id;"
+			}
+		}`
+
+		collection := &models.Collection{}
+		if err := json.Unmarshal([]byte(jsonData), &collection); err != nil {
+			return err
+		}
+
+		return daos.New(db).SaveCollection(collection)
+	}, func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("j6w72f0kb5ivd7x")
+		if err != nil {
+			return err
+		}
+
+		return dao.DeleteCollection(collection)
+	})
+}

web/src/css/components.css

@@ -85,8 +85,8 @@
     width: 32px;
     height: 32px;
     border-radius: 50%;
-    border: 6px solid #fff;
+    border: 6px solid rgba(var(--content));
-    border-color: #fff transparent #fff transparent;
+    border-color: rgba(var(--content)) transparent rgba(var(--content)) transparent;
     animation: spinner 1.2s linear infinite;
 }
 

web/src/lib/components/base/button.svelte

@@ -23,12 +23,13 @@
     on:click
     {type}
 >
-    {#if !loading}
+    <div class:invisible={loading}>
         {#if icon}
             <i class="fa fa-{icon} mr-2"></i>
         {/if}
         <slot />
-    {:else}
+    </div>
-        <div class="spinner"></div>
+    {#if loading}
+        <div class="absolute aspect-square spinner"></div>
     {/if}
 </button>

web/src/lib/components/profile/activity_card.svelte

@@ -24,8 +24,7 @@
         />
         <div>
             <a class="underline" href="/profile/{user.id}"> {user.username} </a>
-            {activity.type === "trail" ? "planned" : "completed"}
+            {activity.type === "trail" ? $_("planned-a-trail") : $_("completed-a-trail")}
-            a trail
             <p class="text-xs text-gray-500 mb-3">
                 {new Date(activity.date).toLocaleDateString(undefined, {
                     month: "long",

web/src/lib/components/trail/trail_card.svelte

@@ -11,6 +11,7 @@
     import { pb } from "$lib/pocketbase";
 
     export let trail: Trail;
+    export let fullWidth: boolean = false;
 
     $: thumbnail = trail.photos.length
         ? getFileURL(trail, trail.photos[trail.thumbnail])
@@ -20,7 +21,9 @@
 </script>
 
 <div
-    class="trail-card relative rounded-2xl border border-input-border min-w-72 cursor-pointer"
+    class="trail-card relative rounded-2xl border border-input-border {fullWidth
+        ? 'min-w-72'
+        : 'w-72'} cursor-pointer"
     on:mouseenter
     on:mouseleave
     role="listitem"
@@ -65,7 +68,8 @@
             {/if}
             {#if trail.expand.author}
                 <p class="text-xs text-gray-500 mb-3">
-                    {$_("by")} <img
+                    {$_("by")}
+                    <img
                         class="rounded-full w-5 aspect-square mx-1 inline"
                         src={getFileURL(
                             trail.expand.author,

web/src/lib/components/trail/trail_list.svelte

@@ -17,8 +17,8 @@
         page: 1,
         totalPages: 1,
     };
-
     export let loading: boolean = false;
+    export let fullWidthCards: boolean = false;
 
     const displayOptions: SelectItem[] = [
         { text: $_("card", { values: { n: 2 } }), value: "cards" },
@@ -180,7 +180,7 @@
                         data-sveltekit-preload-data="off"
                     >
                         {#if selectedDisplayOption === "cards"}
-                            <TrailCard {trail}></TrailCard>
+                            <TrailCard fullWidth={fullWidthCards} {trail}></TrailCard>
                         {:else}
                             <TrailListItem {trail}></TrailListItem>
                         {/if}

web/src/lib/i18n/locales/de.json

@@ -8,6 +8,7 @@
   "about": "Über",
   "account-delete-confirm": "Du bist dabei, dein Konto zu löschen. Alle deine Routen werden ebenfalls gelöscht. Möchtest du fortfahren?",
   "activity": "{n, plural, =1 {Aktivität} other {Aktivitäten}}",
+  "add-bio": "Bio hinzufügen",
   "add-entry": "Eintrag hinzufügen",
   "add-to-list": "Zu Liste hinzufügen",
   "add-waypoint": "Wegpunkt hinzufügen",
@@ -39,10 +40,11 @@
   "close": "Schließen",
   "comment": "{n, plural, =1 {Kommentar} other {Kommentare}}",
   "completed": "Abgeschlossen",
+  "completed-a-trail": "hat eine Route abgeschlossen",
   "completion-status": "Abschlussstatus",
   "confirm": "Bestätigen",
   "confirm-deletion": "Löschen bestätigen",
-  "confirm-publish": "",
+  "confirm-publish": "Veröffentlichen bestätigen",
   "confirm-share": "Teilen bestätigen",
   "contribute": "Mitwirken",
   "copy-link": "Link kopieren",
@@ -80,6 +82,9 @@
   "elevation-gain": "Höhenunterschied (aufw.)",
   "elevation-loss": "Höhenunterschied (abw.)",
   "email": "Email",
+  "empty-activities": "{username} hat noch keine Aktivitäten",
+  "empty-bio": "{username} hat noch keine Biographie hinzugefügt",
+  "empty-lists": "{username} hat keine öffentlichen Listen",
   "english": "Englisch",
   "entry": "Eintrag",
   "error-creating-user": "Fehler beim Erstellen des Nutzers",
@@ -96,13 +101,16 @@
   "explore-some-trails": "Erkunden Sie einige Routen",
   "export": "Exportieren",
   "export-all-trails": "Alle Routen exportieren",
-  "favourite-sport": "",
+  "favourite-sport": "Lieblingssportart",
   "features": "Features",
   "file-format": "Dateiformat",
   "file-too-big": "Datei {file} ist zu groß (max. {size})",
   "filter-categories": "Kategorien filtern",
   "filter-difficulty": "Schwierigkeit filtern",
   "focus-map-on": "Karte fokussieren auf",
+  "follow": "Folgen",
+  "followers": "Folgen dir",
+  "following": "Du folgst",
   "forgot-your-password": "Passwort vergessen?",
   "french": "Französisch",
   "german": "Deutsch",
@@ -124,13 +132,14 @@
   "invalid-date": "Ungültiges Datum",
   "invalid-username": "Ungültiger Nutzername",
   "italian": "Italienisch",
+  "joined": "Beigetreten",
   "language": "Sprache",
   "latitude": "Breitengrad",
   "license": "Lizenz",
   "link-copied": "Link kopiert",
   "list": "{n, plural, =1 {Liste} other {Listen}}",
   "list-not-shared": "Mit niemandem geteilt",
-  "list-public-warning": "",
+  "list-public-warning": "Alle routen in dieser liste werden veröffentlicht.",
   "list-saved-successfully": "Liste gespeichert",
   "list-share-warning": "Durch das Teilen einer Liste werden automatisch alle darin enthaltenen Routen freigegeben.",
   "list-share-warning-update": "Hinzugefügte Routen werden mit allen geteilt, die Zugriff auf diese Liste haben.",
@@ -179,6 +188,7 @@
   "passwords-must-match": "Passwörter müssen übereinstimmen",
   "photos": "Fotos",
   "pick-a-trail": "Route auswählen",
+  "planned-a-trail": "hat eine Route geplant",
   "polish": "Polnisch",
   "portuguese": "Portugiesisch",
   "print": "Drucken",
@@ -211,6 +221,7 @@
   "slope": "Steigung",
   "sort": "Sortieren",
   "speed": "Geschwindigkeit",
+  "statistics": "Statistiken",
   "stop-drawing": "Zeichnen beenden",
   "summit-book": "Gipfelbuch",
   "table": "Tabelle",

web/src/lib/i18n/locales/en.json

@@ -8,6 +8,7 @@
   "about": "About",
   "account-delete-confirm": "You are about to delete your account. All your trails will also be deleted. Do you want to proceed?",
   "activity": "{n, plural, =1 {Activity} other {Activities}}",
+  "add-bio": "Add Bio",
   "add-entry": "Add Entry",
   "add-to-list": "Add to list",
   "add-waypoint": "Add Waypoint",
@@ -39,6 +40,7 @@
   "close": "Close",
   "comment": "{n, plural, =1 {Comment} other {Comments}}",
   "completed": "Completed",
+  "completed-a-trail": "completed a trail",
   "completion-status": "Completion Status",
   "confirm": "Confirm",
   "confirm-deletion": "Confirm Deletion",
@@ -80,6 +82,9 @@
   "elevation-gain": "Elevation Gain",
   "elevation-loss": "Elevation Loss",
   "email": "Email",
+  "empty-activities": "{username} has no activity yet",
+  "empty-bio": "{username} has not added a bio yet",
+  "empty-lists": "{username} has no public lists",
   "english": "English",
   "entry": "Entry",
   "error-creating-user": "Error creating user",
@@ -103,6 +108,9 @@
   "filter-categories": "Filter categories",
   "filter-difficulty": "Filter difficulty",
   "focus-map-on": "Focus map on",
+  "follow": "Follow",
+  "followers": "Followers",
+  "following": "Following",
   "forgot-your-password": "Forgot your password?",
   "french": "French",
   "german": "German",
@@ -124,6 +132,7 @@
   "invalid-date": "Invalid Date",
   "invalid-username": "Invalid username",
   "italian": "Italian",
+  "joined": "Joined",
   "language": "Language",
   "latitude": "Latitude",
   "license": "License",
@@ -179,6 +188,7 @@
   "passwords-must-match": "Passwords must match",
   "photos": "Photos",
   "pick-a-trail": "Pick a trail",
+  "planned-a-trail": "planned a trail",
   "polish": "Polish",
   "portuguese": "Portuguese",
   "print": "Print",
@@ -211,6 +221,7 @@
   "slope": "Slope",
   "sort": "Sort",
   "speed": "Speed",
+  "statistics": "Statistics",
   "stop-drawing": "Stop drawing",
   "summit-book": "Summit Book",
   "table": "Table",

web/src/lib/i18n/locales/fr.json

@@ -8,6 +8,7 @@
   "about": "Informations",
   "account-delete-confirm": "Vous êtes sur le point de supprimer votre compte. Toutes vos trails seront également supprimées. Voulez-vous continuer ?",
   "activity": "",
+  "add-bio": "",
   "add-entry": "Ajouter une entrée",
   "add-to-list": "Ajouter à une liste",
   "add-waypoint": "Ajouter un point de repère",
@@ -39,6 +40,7 @@
   "close": "",
   "comment": "{n, plural, =1 {Commentaire} other {Commentaires}}",
   "completed": "Compléter",
+  "completed-a-trail": "",
   "completion-status": "L'état d'achèvement",
   "confirm": "",
   "confirm-deletion": "",
@@ -80,6 +82,9 @@
   "elevation-gain": "Gain d'altitude",
   "elevation-loss": "",
   "email": "Email",
+  "empty-activities": "",
+  "empty-bio": "",
+  "empty-lists": "",
   "english": "Anglais",
   "entry": "Entrée",
   "error-creating-user": "Erreur durant la création de l'utilisateur",
@@ -103,6 +108,9 @@
   "filter-categories": "",
   "filter-difficulty": "",
   "focus-map-on": "",
+  "follow": "",
+  "followers": "",
+  "following": "",
   "forgot-your-password": "",
   "french": "Français",
   "german": "Allemand",
@@ -124,6 +132,7 @@
   "invalid-date": "Date invalide",
   "invalid-username": "Nom d'utilisateur invalide",
   "italian": "Italien",
+  "joined": "",
   "language": "Langue",
   "latitude": "Latitude",
   "license": "Licence",
@@ -179,6 +188,7 @@
   "passwords-must-match": "",
   "photos": "Photos",
   "pick-a-trail": "Choisir un itinéraire",
+  "planned-a-trail": "",
   "polish": "polonais",
   "portuguese": "Portugais",
   "print": "Imprimer",
@@ -211,6 +221,7 @@
   "slope": "",
   "sort": "Trier",
   "speed": "",
+  "statistics": "",
   "stop-drawing": "",
   "summit-book": "Livre du sommet",
   "table": "Tableau",

web/src/lib/i18n/locales/hu.json

@@ -8,6 +8,7 @@
   "about": "A programról",
   "account-delete-confirm": "Ön most a profilját készül törölni. Minden nyomvonala törlődik. Szeretné folytatni?",
   "activity": "",
+  "add-bio": "",
   "add-entry": "Bejegyzés hozzáadása",
   "add-to-list": "Hozzáadás a listához",
   "add-waypoint": "Útvonalpont hozzáadása",
@@ -39,6 +40,7 @@
   "close": "",
   "comment": "{n, plural, =1 {Megjegyzés} other {Megjegyzés}}",
   "completed": "Teljesítve",
+  "completed-a-trail": "",
   "completion-status": "Befejezés állapota",
   "confirm": "",
   "confirm-deletion": "",
@@ -80,6 +82,9 @@
   "elevation-gain": "Magasságnövekedés",
   "elevation-loss": "",
   "email": "Email",
+  "empty-activities": "",
+  "empty-bio": "",
+  "empty-lists": "",
   "english": "Angol",
   "entry": "Bejegyzés",
   "error-creating-user": "Hiba felhasználó hozzáadása közben",
@@ -103,6 +108,9 @@
   "filter-categories": "",
   "filter-difficulty": "",
   "focus-map-on": "",
+  "follow": "",
+  "followers": "",
+  "following": "",
   "forgot-your-password": "",
   "french": "Francia",
   "german": "Német",
@@ -124,6 +132,7 @@
   "invalid-date": "Érvénytelen dátum",
   "invalid-username": "Érvénytelen felhasználó",
   "italian": "Olasz",
+  "joined": "",
   "language": "Nyelf",
   "latitude": "Szélesség",
   "license": "License",
@@ -179,6 +188,7 @@
   "passwords-must-match": "",
   "photos": "Képek",
   "pick-a-trail": "Válasszon útvonalat",
+  "planned-a-trail": "",
   "polish": "Lengyel",
   "portuguese": "Portugál",
   "print": "",
@@ -211,6 +221,7 @@
   "slope": "",
   "sort": "Rendezés",
   "speed": "",
+  "statistics": "",
   "stop-drawing": "",
   "summit-book": "Csúcspont könyv",
   "table": "Táblázat",

web/src/lib/i18n/locales/it.json

@@ -8,6 +8,7 @@
   "about": "Su di noi",
   "account-delete-confirm": "Stai per eliminare il tuo account. Tutti i tuoi percorsi saranno cancellati. Vuoi procedere?",
   "activity": "",
+  "add-bio": "",
   "add-entry": "Aggiungi voce",
   "add-to-list": "Aggiungi alla lista",
   "add-waypoint": "Aggiungere un waypoint",
@@ -39,6 +40,7 @@
   "close": "Chiudi",
   "comment": "{n, plural, =1 {Commento} other {Commenti}}",
   "completed": "Completato",
+  "completed-a-trail": "",
   "completion-status": "Stato di completamento",
   "confirm": "",
   "confirm-deletion": "",
@@ -80,6 +82,9 @@
   "elevation-gain": "Guadagno di quota",
   "elevation-loss": "",
   "email": "Email",
+  "empty-activities": "",
+  "empty-bio": "",
+  "empty-lists": "",
   "english": "Inglese",
   "entry": "Voce",
   "error-creating-user": "Errore durante la creazione dell'utente",
@@ -103,6 +108,9 @@
   "filter-categories": "",
   "filter-difficulty": "",
   "focus-map-on": "",
+  "follow": "",
+  "followers": "",
+  "following": "",
   "forgot-your-password": "",
   "french": "Francese",
   "german": "Tedesco",
@@ -124,6 +132,7 @@
   "invalid-date": "Data non valida",
   "invalid-username": "Nome utente non valido",
   "italian": "",
+  "joined": "",
   "language": "Lingua",
   "latitude": "Latitudine",
   "license": "Licenza",
@@ -179,6 +188,7 @@
   "passwords-must-match": "",
   "photos": "Foto",
   "pick-a-trail": "Scegli un percorso",
+  "planned-a-trail": "",
   "polish": "Polacco",
   "portuguese": "Portoghese",
   "print": "Stampa",
@@ -211,6 +221,7 @@
   "slope": "Pendenza",
   "sort": "Ordina",
   "speed": "Velocità",
+  "statistics": "",
   "stop-drawing": "Smettere di disegnare",
   "summit-book": "Libro di vetta",
   "table": "Tavolo",

web/src/lib/i18n/locales/nl.json

@@ -8,6 +8,7 @@
   "about": "Over",
   "account-delete-confirm": "Je staat op het punt je account te verwijderen. Al je wandelroutes worden hierdoor eveneens verwijderd. Wil je doorgaan?",
   "activity": "",
+  "add-bio": "",
   "add-entry": "Item toevoegen",
   "add-to-list": "Toevoegen aan lijst",
   "add-waypoint": "Routepunt toevoegen",
@@ -39,6 +40,7 @@
   "close": "",
   "comment": "{n, plural, =1 {Opmerking} other {Opmerkingen}}",
   "completed": "Voltooid",
+  "completed-a-trail": "",
   "completion-status": "Voltooiingsstatus",
   "confirm": "",
   "confirm-deletion": "",
@@ -80,6 +82,9 @@
   "elevation-gain": "Hoogteverschil",
   "elevation-loss": "",
   "email": "E-mail",
+  "empty-activities": "",
+  "empty-bio": "",
+  "empty-lists": "",
   "english": "Engels",
   "entry": "Item",
   "error-creating-user": "Het account kan niet worden aangemaakt",
@@ -103,6 +108,9 @@
   "filter-categories": "",
   "filter-difficulty": "",
   "focus-map-on": "",
+  "follow": "",
+  "followers": "",
+  "following": "",
   "forgot-your-password": "",
   "french": "Frans",
   "german": "Duits",
@@ -124,6 +132,7 @@
   "invalid-date": "Ongeldige datum",
   "invalid-username": "Ongeldige gebruikersnaam",
   "italian": "Italiaans",
+  "joined": "",
   "language": "Taal",
   "latitude": "Breedtegraad",
   "license": "Licentie",
@@ -179,6 +188,7 @@
   "passwords-must-match": "",
   "photos": "Foto's",
   "pick-a-trail": "Kies een wandelroute",
+  "planned-a-trail": "",
   "polish": "Pools",
   "portuguese": "Portugees",
   "print": "Afdrukken",
@@ -211,6 +221,7 @@
   "slope": "",
   "sort": "Sorteren",
   "speed": "",
+  "statistics": "",
   "stop-drawing": "",
   "summit-book": "Bergtopboek",
   "table": "Tabel",

web/src/lib/i18n/locales/pl.json

@@ -8,6 +8,7 @@
   "about": "Na temat",
   "account-delete-confirm": "Usuniesz swoje konto. Wszystkie twoje ścieżki zostaną usunięte. Czy chcesz kontynuować?",
   "activity": "",
+  "add-bio": "",
   "add-entry": "Dodaj Pozycję",
   "add-to-list": "Dodaj do listy",
   "add-waypoint": "Dodaj Punkt",
@@ -39,6 +40,7 @@
   "close": "",
   "comment": "{n, plural, =1 {Komentarz} other {Komentarze}}",
   "completed": "Zakończono",
+  "completed-a-trail": "",
   "completion-status": "Stan ukończenia",
   "confirm": "",
   "confirm-deletion": "",
@@ -80,6 +82,9 @@
   "elevation-gain": "Wzrost Wysokości",
   "elevation-loss": "",
   "email": "Email",
+  "empty-activities": "",
+  "empty-bio": "",
+  "empty-lists": "",
   "english": "Angielski",
   "entry": "Pozycja",
   "error-creating-user": "Błąd tworzenia użytkownika",
@@ -103,6 +108,9 @@
   "filter-categories": "",
   "filter-difficulty": "",
   "focus-map-on": "",
+  "follow": "",
+  "followers": "",
+  "following": "",
   "forgot-your-password": "",
   "french": "Francuski",
   "german": "Niemiecki",
@@ -124,6 +132,7 @@
   "invalid-date": "Nieprawidłowa data",
   "invalid-username": "Błędna nazwa użytkownika",
   "italian": "Włoski",
+  "joined": "",
   "language": "Język",
   "latitude": "Szerokość",
   "license": "Licencja",
@@ -179,6 +188,7 @@
   "passwords-must-match": "",
   "photos": "Zdjęcia",
   "pick-a-trail": "Wybierz ścieżkę",
+  "planned-a-trail": "",
   "polish": "Polski",
   "portuguese": "Portugalski",
   "print": "",
@@ -211,6 +221,7 @@
   "slope": "",
   "sort": "Sortowanie",
   "speed": "",
+  "statistics": "",
   "stop-drawing": "",
   "summit-book": "Logbook",
   "table": "Tabela",

web/src/lib/i18n/locales/pt.json

@@ -8,6 +8,7 @@
   "about": "Sobre",
   "account-delete-confirm": "Você está prestes a excluir sua conta. Todas as suas trilhas também serão excluídas. Queres prosseguir?",
   "activity": "",
+  "add-bio": "",
   "add-entry": "Adicionar entrada",
   "add-to-list": "Adicionar à lista",
   "add-waypoint": "Adicionar ponto de vista",
@@ -39,6 +40,7 @@
   "close": "",
   "comment": "{n, plural, =1 {Comentário} other {Comentários}}",
   "completed": "Completada",
+  "completed-a-trail": "",
   "completion-status": "Status de conclusão",
   "confirm": "",
   "confirm-deletion": "",
@@ -80,6 +82,9 @@
   "elevation-gain": "Ganho de elevação",
   "elevation-loss": "",
   "email": "Email",
+  "empty-activities": "",
+  "empty-bio": "",
+  "empty-lists": "",
   "english": "Inglês",
   "entry": "Entrada",
   "error-creating-user": "Erro ao criar usuário",
@@ -103,6 +108,9 @@
   "filter-categories": "",
   "filter-difficulty": "",
   "focus-map-on": "",
+  "follow": "",
+  "followers": "",
+  "following": "",
   "forgot-your-password": "",
   "french": "Francês",
   "german": "Alemão",
@@ -124,6 +132,7 @@
   "invalid-date": "Data inválida",
   "invalid-username": "Nome de usuário inválido",
   "italian": "Italiano",
+  "joined": "",
   "language": "Língua",
   "latitude": "Latitude",
   "license": "Licença",
@@ -179,6 +188,7 @@
   "passwords-must-match": "",
   "photos": "Fotos",
   "pick-a-trail": "Escolha uma trilha",
+  "planned-a-trail": "",
   "polish": "Polonês",
   "portuguese": "Português",
   "print": "",
@@ -211,6 +221,7 @@
   "slope": "",
   "sort": "Ordenar",
   "speed": "",
+  "statistics": "",
   "stop-drawing": "",
   "summit-book": "Livro da cimeira",
   "table": "Tabela",

web/src/lib/i18n/locales/zh.json

@@ -8,6 +8,7 @@
   "about": "关于",
   "account-delete-confirm": "您现在要删除当前账户，所有的路线都会删除无法恢复，确认继续操作吗？",
   "activity": "",
+  "add-bio": "",
   "add-entry": "添加日程",
   "add-to-list": "添加到列表",
   "add-waypoint": "添加坐标",
@@ -39,6 +40,7 @@
   "close": "",
   "comment": "{n, plural, =1 {评论} other {评论}}",
   "completed": "已完成",
+  "completed-a-trail": "",
   "completion-status": "完成状态",
   "confirm": "",
   "confirm-deletion": "",
@@ -80,6 +82,9 @@
   "elevation-gain": "上升海拔",
   "elevation-loss": "",
   "email": "电子邮箱",
+  "empty-activities": "",
+  "empty-bio": "",
+  "empty-lists": "",
   "english": "英语",
   "entry": "日程",
   "error-creating-user": "创建用户错误",
@@ -103,6 +108,9 @@
   "filter-categories": "",
   "filter-difficulty": "",
   "focus-map-on": "",
+  "follow": "",
+  "followers": "",
+  "following": "",
   "forgot-your-password": "",
   "french": "法语",
   "german": "德语",
@@ -124,6 +132,7 @@
   "invalid-date": "无效日期",
   "invalid-username": "无效用户名",
   "italian": "意大利语",
+  "joined": "",
   "language": "语言",
   "latitude": "维度",
   "license": "开源协议",
@@ -179,6 +188,7 @@
   "passwords-must-match": "",
   "photos": "图片",
   "pick-a-trail": "选择一个路线",
+  "planned-a-trail": "",
   "polish": "波兰语",
   "portuguese": "葡萄牙语",
   "print": "",
@@ -211,6 +221,7 @@
   "slope": "",
   "sort": "排序",
   "speed": "",
+  "statistics": "",
   "stop-drawing": "",
   "summit-book": "详细日程",
   "table": "表格",

web/src/lib/models/follow.ts

@@ -0,0 +1,16 @@
+import type { User, UserAnonymous } from "./user";
+
+export class Follow {
+    id?: string;
+    follower: string;
+    followee: string;
+    expand?: {
+        follower: UserAnonymous,
+        followee: UserAnonymous
+    }
+
+    constructor(follower: string, followee: string) {
+        this.follower = follower;
+        this.followee = followee;
+    }
+}

web/src/lib/stores/follow_store.ts

@@ -0,0 +1,88 @@
+import type { Follow } from "$lib/models/follow";
+import { ClientResponseError, type ListResult } from "pocketbase";
+
+let follows: Follow[] = [];
+
+export async function follows_index(data: { follower?: string, followee?: string }, page: number = 1, perPage: number = 10, f: (url: RequestInfo | URL, config?: RequestInit) => Promise<Response> = fetch) {
+    const r = await f('/api/v1/follow?' + new URLSearchParams({
+        filter: data.follower ? `follower='${data.follower}'` : data.followee ? `followee='${data.followee}'` : '',
+        page: page.toString(),
+        "per-page": perPage.toString()
+    }), {
+        method: 'GET',
+    })
+
+    if (!r.ok) {
+        throw new ClientResponseError(await r.json())
+    }
+
+    const fetchedFollows: ListResult<Follow> = await r.json();
+
+    const result = page > 1 ? [...follows, ...fetchedFollows.items] : fetchedFollows.items
+
+    follows = result;
+
+    return { ...fetchedFollows, items: result };
+}
+
+export async function follows_a_b(a: string, b: string, f: (url: RequestInfo | URL, config?: RequestInit) => Promise<Response> = fetch) {
+    const r = await f('/api/v1/follow?' + new URLSearchParams({
+        filter: `follower='${a}'&&followee='${b}'`,
+    }), {
+        method: 'GET',
+    })
+
+    if (!r.ok) {
+        throw new ClientResponseError(await r.json())
+    }
+
+    const response: ListResult<Follow> = await r.json();
+
+    return response.items.at(0);
+}
+
+export async function follows_counts(id: string, f: (url: RequestInfo | URL, config?: RequestInit) => Promise<Response> = fetch) {
+    const r = await f('/api/v1/follow/count/' + id, {
+        method: 'GET',
+    })
+
+    if (!r.ok) {
+        throw new ClientResponseError(await r.json())
+    }
+
+    const response: { followers: number, following: number } = await r.json();
+
+    return response;
+}
+
+export async function follows_create(follow: Follow) {
+    let r = await fetch('/api/v1/follow', {
+        method: 'PUT',
+        body: JSON.stringify(follow),
+    })
+
+    if (!r.ok) {
+        throw new ClientResponseError(await r.json())
+    }
+}
+
+export async function follows_update(follow: Follow) {
+    let r = await fetch('/api/v1/follow/' + follow.id, {
+        method: 'POST',
+        body: JSON.stringify(follow),
+    })
+
+    if (!r.ok) {
+        throw new ClientResponseError(await r.json())
+    }
+}
+
+export async function follows_delete(follow: Follow) {
+    const r = await fetch('/api/v1/follow/' + follow.id, {
+        method: 'DELETE',
+    })
+
+    if (!r.ok) {
+        throw new ClientResponseError(await r.json())
+    }
+}

web/src/routes/api/v1/follow/+server.ts

@@ -0,0 +1,45 @@
+import type { Follow } from '$lib/models/follow';
+import type { User } from '$lib/models/user';
+import { pb } from '$lib/pocketbase';
+import { error, json, type RequestEvent } from '@sveltejs/kit';
+
+export async function GET(event: RequestEvent) {
+    const page = event.url.searchParams.get("page") ?? "0";
+    const perPage = event.url.searchParams.get("per-page") ?? "10";
+    const sort = event.url.searchParams.get('sort') ?? ""
+    const filter = event.url.searchParams.get("filter") ?? "";
+
+    try {
+        let r;
+        if (parseInt(perPage) < 0) {
+            r = {
+                items: await pb.collection('follows')
+                    .getFullList<Follow>({ sort: sort, filter: filter, requestKey: filter })
+            }
+        } else {
+            r = await pb.collection('follows')
+                .getList<Follow>(parseInt(page), parseInt(perPage), { sort: sort ?? "", filter: filter ?? "", requestKey: filter })
+        }
+        for (const follow of r.items) {
+            const follower = await pb.collection('users_anonymous').getOne<User>(follow.follower, {requestKey: filter})
+            const followee = await pb.collection('users_anonymous').getOne<User>(follow.followee, {requestKey: filter})
+            follow.expand = {
+                follower, followee
+            }
+        }
+        return json(r)
+    } catch (e: any) {
+        throw error(e.status, e);
+    }
+}
+
+export async function PUT(event: RequestEvent) {
+    const data = await event.request.json();
+
+    try {
+        const r = await pb.collection('follows').create<Follow>(data)
+        return json(r);
+    } catch (e: any) {
+        throw error(e.status, e)
+    }
+}

web/src/routes/api/v1/follow/[id]/+server.ts

@@ -0,0 +1,33 @@
+import type { Follow } from "$lib/models/follow";
+import { pb } from "$lib/pocketbase";
+import { error, json, type RequestEvent } from "@sveltejs/kit";
+
+export async function GET(event: RequestEvent) {
+    try {
+        const r = await pb.collection('follows')
+            .getOne<Follow>(event.params.id as string)
+        return json(r)
+    } catch (e: any) {
+        throw error(e.status, e);
+    }
+}
+
+export async function POST(event: RequestEvent) {
+    const data = await event.request.json()
+
+    try {
+        const r = await pb.collection('follows').update<Follow>(event.params.id as string, data)
+        return json(r);
+    } catch (e: any) {
+        throw error(e.status, e)
+    }
+}
+
+export async function DELETE(event: RequestEvent) {
+    try {
+        const r = await pb.collection('follows').delete(event.params.id as string)
+        return json({ 'acknowledged': r });
+    } catch (e: any) {
+        throw error(e.status, e)
+    }
+}

web/src/routes/api/v1/follow/count/[id]/+server.ts

@@ -0,0 +1,12 @@
+import { pb } from "$lib/pocketbase";
+import { error, json, type RequestEvent } from "@sveltejs/kit";
+
+export async function GET(event: RequestEvent) {
+    try {
+        const r = await pb.collection('follow_counts')
+            .getOne(event.params.id as string)
+        return json(r)
+    } catch (e: any) {
+        throw error(e.status, e);
+    }
+}

web/src/routes/profile/[id]/+layout.server.ts

@@ -1,3 +1,4 @@
+import { follows_a_b, follows_counts, follows_index } from "$lib/stores/follow_store";
 import { users_show } from "$lib/stores/user_store";
 import { error, type ServerLoad } from "@sveltejs/kit";
 import { ClientResponseError } from "pocketbase";
@@ -10,10 +11,13 @@ export const load: ServerLoad = async ({ params, locals, fetch }) => {
 
     try {
         const user = await users_show(params.id, fetch);
-
         const isOwnProfile = params.id === locals.user?.id;
 
-        return { user, isOwnProfile }
+
+        const follow = await follows_a_b(locals.user?.id, params.id, fetch) ?? null
+        const followCounts = await follows_counts(params.id, fetch)
+
+        return { user, isOwnProfile, ...followCounts, follow: follow }
     } catch (e) {
         if (e instanceof ClientResponseError && e.status == 404) {
             error(404, {

web/src/routes/profile/[id]/+layout.svelte

@@ -1,29 +1,54 @@
 <script lang="ts">
+    import { invalidateAll } from "$app/navigation";
     import { page } from "$app/stores";
+    import Button from "$lib/components/base/button.svelte";
     import type { SelectItem } from "$lib/components/base/select.svelte";
+    import { follows_create, follows_delete } from "$lib/stores/follow_store";
+    import { currentUser } from "$lib/stores/user_store";
     import { getFileURL } from "$lib/util/file_util";
-    import { onMount } from "svelte";
+    import { _ } from "svelte-i18n";
-
     export let data;
 
+    let followLoading: boolean = false;
+
     const profileLinks: SelectItem[] = [
-        { text: "Profile", value: `/profile/${$page.params.id}` },
+        { text: $_("profile"), value: `/profile/${$page.params.id}` },
-        { text: "Trails", value: `/profile/${$page.params.id}/trails` },
+        {
-        { text: "Activities", value: `/profile/${$page.params.id}/activities` },
+            text: $_("trail", { values: { n: 2 } }),
-        { text: "Stats", value: `/profile/${$page.params.id}/stats` },
+            value: `/profile/${$page.params.id}/trails`,
+        },
+        { text: $_('statistics'), value: `/profile/${$page.params.id}/stats` },
     ];
 
     $: activeIndex = profileLinks.findIndex(
         (l) => l.value === $page.url.pathname,
     );
+
+    async function follow() {
+        if (!$currentUser) {
+            return;
+        }
+        followLoading = true;
+
+        if (data.follow) {
+            await follows_delete(data.follow);
+        } else {
+            await follows_create({
+                follower: $currentUser.id,
+                followee: data.user.id,
+            });
+        }
+        await invalidateAll();
+        followLoading = false;
+    }
 </script>
 
 <div
     class="grid grid-cols-1 lg:grid-cols-[356px_minmax(0,_1fr)] gap-4 max-w-6xl mx-auto items-start"
 >
-    <div class="border border-input-border rounded-xl space-y-8">
+    <div class="border border-input-border rounded-xl">
         {#if data.user}
-            <div class="flex items-center gap-x-6 px-6 mt-6">
+            <div class="flex items-center gap-x-6 px-6 my-6">
                 <img
                     class="rounded-full w-16 aspect-square overflow-hidden"
                     src={getFileURL(data.user, data.user.avatar) ||
@@ -35,7 +60,7 @@
                         {data.user.username}
                     </h4>
                     <p class="text-sm">
-                        <span class="text-gray-500">Joined:</span>
+                        <span class="text-gray-500">{$_("joined")}:</span>
                         {new Date(data.user.created ?? "").toLocaleDateString(
                             undefined,
                             {
@@ -50,16 +75,36 @@
             </div>
         {/if}
         <div class="flex gap-x-6 text-sm px-6">
-            <div>
+            <a
-                <p class="font-semibold">0</p>
+                class:font-bold={$page.url.pathname.endsWith("followers")}
-                <p>Followers</p>
+                href="/profile/{data.user.id}/users/followers"
+            >
+                <p class="font-semibold">{data.followers}</p>
+                <p>{$_('followers')}</p>
+            </a>
+            <a
+                class:font-bold={$page.url.pathname.endsWith("following")}
+                href="/profile/{data.user.id}/users/following"
+            >
+                <p class="font-semibold">{data.following}</p>
+                <p>{$_('following')}</p>
+            </a>
         </div>
-            <div>
+        {#if !data.isOwnProfile}
-                <p class="font-semibold">0</p>
+            <div class="px-6 mt-4">
-                <p>Following</p>
+                <Button
+                    loading={followLoading}
+                    disabled={followLoading}
+                    primary={!data.follow}
+                    secondary={!!data.follow}
+                    icon={data.follow ? "check" : ""}
+                    on:click={() => follow()}
+                >
+                    {data.follow ? $_("following") : $_("follow")}</Button
+                >
             </div>
-        </div>
+        {/if}
-        <div>
+        <div class="mt-6 mb-4">
             {#each profileLinks as link, i}
                 <a
                     class="block mx-2 px-4 py-3 my-1 cursor-pointer hover:bg-menu-item-background-hover focus:bg-menu-item-background-focus transition-colors rounded-md"

web/src/routes/profile/[id]/+page.svelte

@@ -53,8 +53,12 @@
             <p class="whitespace-pre-wrap text-sm">{data.user.bio}</p>
         {:else if data.isOwnProfile}
             <a class="btn-primary inline-block" href="/settings/profile"
-                >+ Add Bio</a
+                >+ {$_("add-bio")}</a
             >
+        {:else}
+            <p class="w-full text-center text-gray-500 text-sm">
+                {$_("empty-bio", { values: { username: data.user.username } })}
+            </p>
         {/if}
     </div>
     <div class="space-y-4">
@@ -62,6 +66,17 @@
             {$_("list", { values: { n: 2 } })}
         </h4>
         <div class="flex gap-x-4 overflow-x-scroll">
+            {#if !data.lists.length && data.isOwnProfile}
+                <a class="btn-primary inline-block" href="/lists/edit/new"
+                    >+ {$_("new-list")}</a
+                >
+            {:else if !data.lists.length}
+                <p class="w-full text-center text-gray-500 text-sm">
+                    {$_("empty-lists", {
+                        values: { username: data.user.username },
+                    })}
+                </p>
+            {/if}
             {#each data.lists as list}
                 <a
                     href="/lists?list={list.id}"
@@ -94,7 +109,17 @@
     </div>
     <div class="space-y-4">
         <h4 class="text-xl font-semibold">Timeline</h4>
-
+        {#if !data.activities.items.length && data.isOwnProfile}
+            <a class="btn-primary inline-block" href="/trails/edit/new"
+                >+ {$_("new-trail")}</a
+            >
+        {:else if !data.activities.items.length}
+            <p class="w-full text-center text-gray-500 text-sm">
+                {$_("empty-activities", {
+                    values: { username: data.user.username },
+                })}
+            </p>
+        {/if}
         {#each data.activities.items as activity}
             <a
                 class="block"

web/src/routes/profile/[id]/trails/+page.svelte

@@ -30,6 +30,7 @@
 <TrailList
     {pagination}
     {loading}
+    fullWidthCards={true}
     trails={data.trails.items}
     filter={data.filter}
     on:update={() => handleFilterUpdate()}

web/src/routes/profile/[id]/users/[type]/+page.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+    import { follows_index } from "$lib/stores/follow_store.js";
+    import { getFileURL } from "$lib/util/file_util.js";
+    import { _ } from "svelte-i18n";
+    export let data;
+
+    let loading: boolean = false;
+
+    $: pagination = {
+        page: data.follows.page,
+        totalPages: data.follows.totalPages,
+    };
+
+    async function onListScroll(e: Event) {
+        if (
+            window.innerHeight + window.scrollY >=
+                0.8 * document.body.offsetHeight &&
+            pagination.page !== pagination.totalPages &&
+            !loading
+        ) {
+            loading = true;
+            await loadNextPage();
+            loading = false;
+        }
+    }
+
+    async function loadNextPage() {
+        pagination.page += 1;
+        data.follows = await follows_index(
+            { followee: $page.params.id },
+            pagination.page,
+        );
+    }
+</script>
+
+<svelte:window on:scroll={onListScroll} />
+<div>
+    <h1 class="text-3xl font-semibold mb-4">{$_($page.params.type)}</h1>
+    <ul class="space-y-4">
+        {#each data.follows.items as follow}
+            <a href="/profile/{follow.expand?.follower.id}">
+                <li
+                    class="flex items-center gap-x-4 hover:bg-menu-item-background-hover p-4"
+                >
+                    <img
+                        class="rounded-full w-10 aspect-square overflow-hidden"
+                        src={getFileURL(
+                            follow.expand?.follower ?? {},
+                            follow.expand?.follower.avatar,
+                        ) ||
+                            `https://api.dicebear.com/7.x/initials/svg?seed=${data.user.username}&backgroundType=gradientLinear`}
+                        alt="avatar"
+                    />
+                    <p class="text-lg font-medium">
+                        {follow.expand?.follower.username}
+                    </p>
+                </li>
+            </a>
+        {/each}
+    </ul>
+</div>

web/src/routes/profile/[id]/users/[type]/+page.ts

@@ -0,0 +1,11 @@
+import { follows_index } from "$lib/stores/follow_store";
+import { error, type Load } from "@sveltejs/kit";
+
+export const load: Load = async ({ params, fetch }) => {
+    if (!params.type || (params.type !== "followers" && params.type !== "following")) {
+        throw error(400, "Missing or wrong type");
+    }
+
+    const follows = await follows_index({ [params.type == "followers" ? "followee" : "follower"]: params.id }, 1, 10, fetch)
+    return { follows }
+};