adding community tab

site/src/components/CommunityView.svelte

@@ -0,0 +1,348 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { BASIndex, ActivitySummary } from '../lib/types';
+  import { formatDistance, formatDuration, sportIcon } from '../lib/format';
+
+  export let base: string = '/';
+
+  type Period = 'week' | 'month' | 'year' | 'all';
+
+  interface UserRaw {
+    handle: string;
+    display_name: string;
+    activities: ActivitySummary[];
+  }
+
+  interface UserStat {
+    handle: string;
+    display_name: string;
+    count: number;
+    distance_m: number;
+    elevation_m: number;
+    duration_s: number;
+    sports: string[];
+    streak: number;
+  }
+
+  interface Totals {
+    count: number;
+    distance_m: number;
+    elevation_m: number;
+    duration_s: number;
+    users: number;
+  }
+
+  let period: Period = 'month';
+  let users: UserRaw[] = [];
+  let stats: UserStat[] = [];
+  let totals: Totals = { count: 0, distance_m: 0, elevation_m: 0, duration_s: 0, users: 0 };
+  let loading = true;
+  let error: string | null = null;
+
+  // ── Helpers ───────────────────────────────────────────────────────────────
+
+  function periodStart(p: Period): Date {
+    const now = new Date();
+    if (p === 'all') return new Date(0);
+    if (p === 'year') return new Date(now.getFullYear(), 0, 1);
+    if (p === 'month') return new Date(now.getFullYear(), now.getMonth(), 1);
+    // week: Monday
+    const d = new Date(now);
+    const day = d.getDay();
+    d.setDate(d.getDate() - (day === 0 ? 6 : day - 1));
+    d.setHours(0, 0, 0, 0);
+    return d;
+  }
+
+  /** Max consecutive active days across all public activities (all-time). */
+  function maxStreak(activities: ActivitySummary[]): number {
+    if (!activities.length) return 0;
+    const days = [...new Set(activities.map(a => a.started_at.slice(0, 10)))].sort();
+    let max = 1, cur = 1;
+    for (let i = 1; i < days.length; i++) {
+      const diff = (new Date(days[i]).getTime() - new Date(days[i - 1]).getTime()) / 86_400_000;
+      cur = diff === 1 ? cur + 1 : 1;
+      if (cur > max) max = cur;
+    }
+    return max;
+  }
+
+  function computeStats(rawUsers: UserRaw[], p: Period): { stats: UserStat[]; totals: Totals } {
+    const start = periodStart(p);
+    const result: UserStat[] = [];
+    const tot: Totals = { count: 0, distance_m: 0, elevation_m: 0, duration_s: 0, users: 0 };
+
+    for (const u of rawUsers) {
+      const pub = u.activities.filter(a => a.privacy !== 'private');
+      const filtered = pub.filter(a => new Date(a.started_at) >= start);
+      if (filtered.length === 0) continue;
+
+      const stat: UserStat = {
+        handle: u.handle,
+        display_name: u.display_name,
+        count: filtered.length,
+        distance_m: filtered.reduce((s, a) => s + (a.distance_m ?? 0), 0),
+        elevation_m: filtered.reduce((s, a) => s + (a.elevation_gain_m ?? 0), 0),
+        duration_s: filtered.reduce((s, a) => s + (a.duration_s ?? 0), 0),
+        sports: [...new Set(filtered.map(a => a.sport))],
+        streak: maxStreak(pub),
+      };
+
+      tot.count += stat.count;
+      tot.distance_m += stat.distance_m;
+      tot.elevation_m += stat.elevation_m;
+      tot.duration_s += stat.duration_s;
+      tot.users++;
+
+      result.push(stat);
+    }
+
+    return { stats: result, totals: tot };
+  }
+
+  // ── Data loading ──────────────────────────────────────────────────────────
+
+  async function fetchShard(url: string): Promise<ActivitySummary[]> {
+    const data: BASIndex = await fetch(url).then(r => { if (!r.ok) throw new Error(String(r.status)); return r.json(); });
+    const own = data.activities ?? [];
+    if (!data.shards?.length) return own;
+    const shardBase = url.substring(0, url.lastIndexOf('/') + 1);
+    const nested = await Promise.allSettled(
+      data.shards.map(s => fetchShard(s.url.startsWith('http') ? s.url : `${shardBase}${s.url}`))
+    );
+    return [...own, ...nested.flatMap(r => r.status === 'fulfilled' ? r.value : [])];
+  }
+
+  async function loadData() {
+    try {
+      const rootUrl = `${base}data/index.json`;
+      const root: BASIndex = await fetch(rootUrl).then(r => r.json());
+
+      const userShards = (root.shards ?? []).filter(s => s.handle);
+      if (userShards.length === 0) {
+        error = 'No community members found.';
+        return;
+      }
+
+      const results = await Promise.allSettled(
+        userShards.map(async shard => {
+          const shardBase = `${base}data/`;
+          const url = shard.url.startsWith('http') ? shard.url : `${shardBase}${shard.url}`;
+          const shardIndex: BASIndex = await fetch(url).then(r => r.json());
+          const activities = await fetchShard(url);
+          return {
+            handle: shard.handle!,
+            display_name: shardIndex.owner?.display_name ?? shard.handle!,
+            activities,
+          } as UserRaw;
+        })
+      );
+
+      users = results.flatMap(r => r.status === 'fulfilled' ? [r.value] : []);
+      ({ stats, totals } = computeStats(users, period));
+    } catch (e: any) {
+      error = e.message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  $: if (users.length) {
+    ({ stats, totals } = computeStats(users, period));
+  }
+
+  onMount(loadData);
+
+  // ── Ranking helpers ───────────────────────────────────────────────────────
+
+  function top3<K extends keyof UserStat>(key: K, min = 0): UserStat[] {
+    return [...stats]
+      .filter(u => (u[key] as number) > min)
+      .sort((a, b) => (b[key] as number) - (a[key] as number))
+      .slice(0, 3);
+  }
+
+  function top3Sports(): UserStat[] {
+    return [...stats]
+      .filter(u => u.sports.length > 1)
+      .sort((a, b) => b.sports.length - a.sports.length)
+      .slice(0, 3);
+  }
+
+  const MEDAL = ['🥇', '🥈', '🥉'];
+
+  $: rowsCount     = top3('count', 0);
+  $: rowsDistance  = top3('distance_m', 0);
+  $: rowsElevation = top3('elevation_m', 0);
+  $: rowsDuration  = top3('duration_s', 0);
+  $: rowsSports    = top3Sports();
+  $: rowsStreak    = [...stats].filter(u => u.streak > 1).sort((a, b) => b.streak - a.streak).slice(0, 3);
+
+  const PERIODS: { key: Period; label: string }[] = [
+    { key: 'week',  label: 'This week'  },
+    { key: 'month', label: 'This month' },
+    { key: 'year',  label: 'This year'  },
+    { key: 'all',   label: 'All time'   },
+  ];
+</script>
+
+<div class="space-y-8">
+  <!-- Header -->
+  <div>
+    <h1 class="text-2xl font-bold text-white mb-1">Community</h1>
+    <p class="text-zinc-400 text-sm">What everyone's been up to — together.</p>
+  </div>
+
+  {#if loading}
+    <p class="text-zinc-400 text-sm">Loading…</p>
+  {:else if error}
+    <p class="text-red-400 text-sm">{error}</p>
+  {:else}
+
+    <!-- Period selector -->
+    <div class="flex gap-2 flex-wrap">
+      {#each PERIODS as p}
+        <button
+          on:click={() => period = p.key}
+          class="px-3 py-1.5 rounded-full text-sm font-medium border transition-colors"
+          class:bg-blue-500={period === p.key}
+          class:border-blue-500={period === p.key}
+          class:text-white={period === p.key}
+          class:border-zinc-700={period !== p.key}
+          class:text-zinc-400={period !== p.key}
+          class:hover:text-white={period !== p.key}
+        >{p.label}</button>
+      {/each}
+    </div>
+
+    <!-- Community totals banner -->
+    {#if totals.users > 0}
+      <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        {#each [
+          { label: 'Activities', value: totals.count.toLocaleString() },
+          { label: 'Distance',   value: formatDistance(totals.distance_m) },
+          { label: 'Elevation',  value: `${Math.round(totals.elevation_m / 1000).toLocaleString()} km↑` },
+          { label: 'Time',       value: formatDuration(totals.duration_s) },
+        ] as item}
+          <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-4 text-center">
+            <div class="text-xl font-bold text-white">{item.value}</div>
+            <div class="text-xs text-zinc-500 mt-0.5">{item.label}</div>
+          </div>
+        {/each}
+      </div>
+    {/if}
+
+    <!-- Leaderboard sections -->
+    {#if totals.users === 0}
+      <p class="text-zinc-500 text-sm">No public activities in this period yet.</p>
+    {:else}
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+
+        <!-- Out there -->
+        {#if rowsCount.length}
+          <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-4 space-y-3">
+            <h2 class="text-sm font-semibold text-zinc-300 uppercase tracking-wide">Out there</h2>
+            <p class="text-xs text-zinc-500 -mt-1">Who kept showing up</p>
+            {#each rowsCount as u, i}
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2 min-w-0">
+                  <span class="text-base leading-none">{MEDAL[i]}</span>
+                  <a href="{base}u/{u.handle}/" class="text-sm text-zinc-200 hover:text-white truncate">{u.display_name}</a>
+                </div>
+                <span class="text-sm font-medium text-white ml-2 shrink-0">{u.count} {u.count === 1 ? 'activity' : 'activities'}</span>
+              </div>
+            {/each}
+          </div>
+        {/if}
+
+        <!-- Going far -->
+        {#if rowsDistance.length}
+          <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-4 space-y-3">
+            <h2 class="text-sm font-semibold text-zinc-300 uppercase tracking-wide">Going far</h2>
+            <p class="text-xs text-zinc-500 -mt-1">Who covered the most ground</p>
+            {#each rowsDistance as u, i}
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2 min-w-0">
+                  <span class="text-base leading-none">{MEDAL[i]}</span>
+                  <a href="{base}u/{u.handle}/" class="text-sm text-zinc-200 hover:text-white truncate">{u.display_name}</a>
+                </div>
+                <span class="text-sm font-medium text-white ml-2 shrink-0">{formatDistance(u.distance_m)}</span>
+              </div>
+            {/each}
+          </div>
+        {/if}
+
+        <!-- Reaching new heights -->
+        {#if rowsElevation.length}
+          <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-4 space-y-3">
+            <h2 class="text-sm font-semibold text-zinc-300 uppercase tracking-wide">Reaching new heights</h2>
+            <p class="text-xs text-zinc-500 -mt-1">Who climbed the most</p>
+            {#each rowsElevation as u, i}
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2 min-w-0">
+                  <span class="text-base leading-none">{MEDAL[i]}</span>
+                  <a href="{base}u/{u.handle}/" class="text-sm text-zinc-200 hover:text-white truncate">{u.display_name}</a>
+                </div>
+                <span class="text-sm font-medium text-white ml-2 shrink-0">{Math.round(u.elevation_m).toLocaleString()} m</span>
+              </div>
+            {/each}
+          </div>
+        {/if}
+
+        <!-- Hours on the move -->
+        {#if rowsDuration.length}
+          <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-4 space-y-3">
+            <h2 class="text-sm font-semibold text-zinc-300 uppercase tracking-wide">Hours on the move</h2>
+            <p class="text-xs text-zinc-500 -mt-1">Who invested the most time</p>
+            {#each rowsDuration as u, i}
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2 min-w-0">
+                  <span class="text-base leading-none">{MEDAL[i]}</span>
+                  <a href="{base}u/{u.handle}/" class="text-sm text-zinc-200 hover:text-white truncate">{u.display_name}</a>
+                </div>
+                <span class="text-sm font-medium text-white ml-2 shrink-0">{formatDuration(u.duration_s)}</span>
+              </div>
+            {/each}
+          </div>
+        {/if}
+
+        <!-- Explorer -->
+        {#if rowsSports.length}
+          <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-4 space-y-3">
+            <h2 class="text-sm font-semibold text-zinc-300 uppercase tracking-wide">Explorer</h2>
+            <p class="text-xs text-zinc-500 -mt-1">Who tried the most sports</p>
+            {#each rowsSports as u, i}
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2 min-w-0">
+                  <span class="text-base leading-none">{MEDAL[i]}</span>
+                  <a href="{base}u/{u.handle}/" class="text-sm text-zinc-200 hover:text-white truncate">{u.display_name}</a>
+                </div>
+                <span class="text-sm font-medium text-white ml-2 shrink-0 flex gap-1">
+                  {#each u.sports as s}{sportIcon(s)}{/each}
+                </span>
+              </div>
+            {/each}
+          </div>
+        {/if}
+
+        <!-- Longest streak (all-time, shown in all periods as context) -->
+        {#if rowsStreak.length}
+          <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-4 space-y-3">
+            <h2 class="text-sm font-semibold text-zinc-300 uppercase tracking-wide">Never stopped</h2>
+            <p class="text-xs text-zinc-500 -mt-1">Longest streak of consecutive days (all time)</p>
+            {#each rowsStreak as u, i}
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2 min-w-0">
+                  <span class="text-base leading-none">{MEDAL[i]}</span>
+                  <a href="{base}u/{u.handle}/" class="text-sm text-zinc-200 hover:text-white truncate">{u.display_name}</a>
+                </div>
+                <span class="text-sm font-medium text-white ml-2 shrink-0">{u.streak} days</span>
+              </div>
+            {/each}
+          </div>
+        {/if}
+
+      </div>
+    {/if}
+  {/if}
+</div>

site/src/layouts/Base.astro

@@ -176,6 +176,9 @@ try {
           <!-- Per-user nav links — updated by user-widget script in multi-user mode -->
           <a id="nav-stats"   href={singleHandle ? `${baseUrl}u/${singleHandle}/stats/`   : `${baseUrl}stats/`}   data-user-path="stats/"   class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Stats</a>
           <a id="nav-athlete" href={singleHandle ? `${baseUrl}u/${singleHandle}/athlete/` : `${baseUrl}athlete/`} data-user-path="athlete/" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Athlete</a>
+          {!singleHandle && (
+            <a href={`${baseUrl}community/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Community</a>
+          )}
           {mobileApp && (
             <a id="nav-record" href={singleHandle ? `${baseUrl}u/${singleHandle}/record/` : `${baseUrl}record/`} data-user-path="record/" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Record</a>
           )}
@@ -183,7 +186,6 @@ try {
             <a href={`${baseUrl}convert/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Convert</a>
           )}
           <a href={`${baseUrl}about/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">About</a>
-          <a id="nav-feedback" href={`${baseUrl}feedback/`} style="display:none" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Feedback</a>
         </div>
       )}
 
@@ -423,11 +425,9 @@ try {
             el.href = baseUrl + 'u/' + user.handle + '/' + el.getAttribute('data-user-path');
           });
 
-          // Show logout button and feedback link
+          // Show logout button
           const logoutEl = document.getElementById('nav-logout');
           if (logoutEl) logoutEl.style.display = '';
-          const feedbackEl = document.getElementById('nav-feedback');
-          if (feedbackEl) feedbackEl.style.display = '';
 
           // Pre-populate the "keep original" checkbox from the instance default
           const chk = document.getElementById('upload-keep-original');

site/src/pages/about/ca/index.astro

@@ -23,15 +23,25 @@ const labels = {
       </div>
     </div>
     <p class="text-sm text-zinc-500 mb-4">Seguiment d'activitats de codi obert i allotjament propi</p>
+    <div class="flex flex-wrap gap-2 mb-8">
       <a
         href="https://ko-fi.com/brutsalvadi"
         target="_blank"
         rel="noopener noreferrer"
-      class="inline-flex items-center gap-2 mb-8 px-4 py-2 rounded-lg text-sm font-medium transition-opacity hover:opacity-90"
+        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-opacity hover:opacity-90"
         style="background:#FF5E5B; color:#fff;"
       >
         ☕ Dona suport a Ko-fi
       </a>
+      <a
+        id="feedback-btn"
+        href="/feedback/"
+        style="display:none"
+        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border border-zinc-700 text-zinc-300 hover:text-white hover:border-zinc-500 transition-colors"
+      >
+        💬 Envia comentaris
+      </a>
+    </div>
 
     <div class="space-y-8 text-sm text-zinc-400 leading-relaxed">
 
@@ -146,6 +156,8 @@ const labels = {
   try {
     const me = await fetch('/api/me', { credentials: 'include' });
     if (!me.ok) return;
+    const feedbackBtn = document.getElementById('feedback-btn');
+    if (feedbackBtn) feedbackBtn.style.display = '';
   } catch { return; }
   let data;
   try {

site/src/pages/about/es/index.astro

@@ -23,15 +23,25 @@ const labels = {
       </div>
     </div>
     <p class="text-sm text-zinc-500 mb-4">Seguimiento de actividades open-source y autoalojado</p>
+    <div class="flex flex-wrap gap-2 mb-8">
       <a
         href="https://ko-fi.com/brutsalvadi"
         target="_blank"
         rel="noopener noreferrer"
-      class="inline-flex items-center gap-2 mb-8 px-4 py-2 rounded-lg text-sm font-medium transition-opacity hover:opacity-90"
+        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-opacity hover:opacity-90"
         style="background:#FF5E5B; color:#fff;"
       >
         ☕ Apoya en Ko-fi
       </a>
+      <a
+        id="feedback-btn"
+        href="/feedback/"
+        style="display:none"
+        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border border-zinc-700 text-zinc-300 hover:text-white hover:border-zinc-500 transition-colors"
+      >
+        💬 Enviar comentarios
+      </a>
+    </div>
 
     <div class="space-y-8 text-sm text-zinc-400 leading-relaxed">
 
@@ -145,6 +155,8 @@ const labels = {
   try {
     const me = await fetch('/api/me', { credentials: 'include' });
     if (!me.ok) return;
+    const feedbackBtn = document.getElementById('feedback-btn');
+    if (feedbackBtn) feedbackBtn.style.display = '';
   } catch { return; }
   let data;
   try {

site/src/pages/about/index.astro

@@ -24,15 +24,25 @@ const labels = {
       </div>
     </div>
     <p class="text-sm text-zinc-500 mb-4">Open-source, self-hosted activity tracking</p>
+    <div class="flex flex-wrap gap-2 mb-8">
       <a
         href="https://ko-fi.com/brutsalvadi"
         target="_blank"
         rel="noopener noreferrer"
-      class="inline-flex items-center gap-2 mb-8 px-4 py-2 rounded-lg text-sm font-medium transition-opacity hover:opacity-90"
+        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-opacity hover:opacity-90"
         style="background:#FF5E5B; color:#fff;"
       >
         ☕ Support on Ko-fi
       </a>
+      <a
+        id="feedback-btn"
+        href="/feedback/"
+        style="display:none"
+        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border border-zinc-700 text-zinc-300 hover:text-white hover:border-zinc-500 transition-colors"
+      >
+        💬 Send feedback
+      </a>
+    </div>
 
     <div class="space-y-8 text-sm text-zinc-400 leading-relaxed">
 
@@ -142,6 +152,8 @@ const labels = {
   try {
     const me = await fetch('/api/me', { credentials: 'include' });
     if (!me.ok) return;          // not logged in — hide community section
+    const feedbackBtn = document.getElementById('feedback-btn');
+    if (feedbackBtn) feedbackBtn.style.display = '';
   } catch { return; }
   let data;
   try {

site/src/pages/about/it/index.astro

@@ -23,15 +23,25 @@ const labels = {
       </div>
     </div>
     <p class="text-sm text-zinc-500 mb-4">Tracciamento attività open-source e self-hosted</p>
+    <div class="flex flex-wrap gap-2 mb-8">
       <a
         href="https://ko-fi.com/brutsalvadi"
         target="_blank"
         rel="noopener noreferrer"
-      class="inline-flex items-center gap-2 mb-8 px-4 py-2 rounded-lg text-sm font-medium transition-opacity hover:opacity-90"
+        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-opacity hover:opacity-90"
         style="background:#FF5E5B; color:#fff;"
       >
         ☕ Supporta su Ko-fi
       </a>
+      <a
+        id="feedback-btn"
+        href="/feedback/"
+        style="display:none"
+        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border border-zinc-700 text-zinc-300 hover:text-white hover:border-zinc-500 transition-colors"
+      >
+        💬 Invia feedback
+      </a>
+    </div>
 
     <div class="space-y-8 text-sm text-zinc-400 leading-relaxed">
 
@@ -145,6 +155,8 @@ const labels = {
   try {
     const me = await fetch('/api/me', { credentials: 'include' });
     if (!me.ok) return;
+    const feedbackBtn = document.getElementById('feedback-btn');
+    if (feedbackBtn) feedbackBtn.style.display = '';
   } catch { return; }
   let data;
   try {

site/src/pages/community/index.astro

@@ -0,0 +1,7 @@
+---
+import Base from '../../layouts/Base.astro';
+import CommunityView from '../../components/CommunityView.svelte';
+---
+<Base title="Community — BincioActivity">
+  <CommunityView base={import.meta.env.BASE_URL} client:only="svelte" />
+</Base>