feat: feed ux improvements

Cargo.lock

@@ -4260,6 +4260,7 @@ dependencies = [
  "chrono",
  "domain",
  "sqlx",
+ "tokio",
  "tracing",
  "uuid",
 ]

crates/adapters/sqlite-federation/Cargo.toml

@@ -13,3 +13,7 @@ uuid = { workspace = true }
 chrono = { workspace = true }
 tracing = { workspace = true }
 async-trait = { workspace = true }
+
+[dev-dependencies]
+tokio = { workspace = true }
+uuid = { workspace = true }

crates/adapters/sqlite-federation/src/lib.rs

@@ -494,3 +494,136 @@ impl RemoteReviewRepository for SqliteFederationRepository {
         Ok(())
     }
 }
+
+#[async_trait]
+impl domain::ports::SocialQueryPort for SqliteFederationRepository {
+    async fn get_accepted_following_urls(
+        &self,
+        user_id: uuid::Uuid,
+    ) -> Result<Vec<String>, domain::errors::DomainError> {
+        let user_id_str = user_id.to_string();
+        let rows = sqlx::query_scalar::<_, String>(
+            "SELECT remote_actor_url FROM ap_following
+             WHERE local_user_id = ? AND status = 'accepted'",
+        )
+        .bind(&user_id_str)
+        .fetch_all(&self.pool)
+        .await
+        .map_err(|e| domain::errors::DomainError::InfrastructureError(e.to_string()))?;
+        Ok(rows)
+    }
+
+    async fn list_all_followed_remote_actors(
+        &self,
+    ) -> Result<Vec<domain::ports::RemoteActorInfo>, domain::errors::DomainError> {
+        let rows = sqlx::query_as::<_, (String, String, Option<String>)>(
+            "SELECT DISTINCT ar.url, ar.handle, ar.display_name
+             FROM ap_remote_actors ar
+             JOIN ap_following f ON f.remote_actor_url = ar.url
+             WHERE f.status = 'accepted'",
+        )
+        .fetch_all(&self.pool)
+        .await
+        .map_err(|e| domain::errors::DomainError::InfrastructureError(e.to_string()))?;
+
+        Ok(rows
+            .into_iter()
+            .map(|(url, handle, display_name)| domain::ports::RemoteActorInfo {
+                url,
+                handle,
+                display_name,
+            })
+            .collect())
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use domain::ports::SocialQueryPort;
+    use sqlx::SqlitePool;
+
+    async fn setup_db(pool: &SqlitePool) {
+        sqlx::query(
+            "CREATE TABLE IF NOT EXISTS ap_remote_actors (
+                url TEXT PRIMARY KEY,
+                handle TEXT NOT NULL,
+                inbox_url TEXT NOT NULL,
+                shared_inbox_url TEXT,
+                display_name TEXT,
+                fetched_at TEXT NOT NULL
+            )",
+        )
+        .execute(pool)
+        .await
+        .unwrap();
+
+        sqlx::query(
+            "CREATE TABLE IF NOT EXISTS ap_following (
+                local_user_id TEXT NOT NULL,
+                remote_actor_url TEXT NOT NULL,
+                follow_activity_id TEXT NOT NULL,
+                status TEXT NOT NULL,
+                PRIMARY KEY (local_user_id, remote_actor_url)
+            )",
+        )
+        .execute(pool)
+        .await
+        .unwrap();
+    }
+
+    #[tokio::test]
+    async fn test_get_accepted_following_urls_returns_only_accepted() {
+        let pool = SqlitePool::connect(":memory:").await.unwrap();
+        setup_db(&pool).await;
+        let repo = SqliteFederationRepository::new(pool.clone());
+        let user_id = uuid::Uuid::new_v4();
+
+        sqlx::query(
+            "INSERT INTO ap_following (local_user_id, remote_actor_url, follow_activity_id, status)
+             VALUES (?, 'https://other.social/users/alice', 'act1', 'accepted'),
+                    (?, 'https://other.social/users/bob', 'act2', 'pending')",
+        )
+        .bind(user_id.to_string())
+        .bind(user_id.to_string())
+        .execute(&pool)
+        .await
+        .unwrap();
+
+        let urls = repo.get_accepted_following_urls(user_id).await.unwrap();
+        assert_eq!(urls.len(), 1);
+        assert_eq!(urls[0], "https://other.social/users/alice");
+    }
+
+    #[tokio::test]
+    async fn test_list_all_followed_remote_actors_deduplicates() {
+        let pool = SqlitePool::connect(":memory:").await.unwrap();
+        setup_db(&pool).await;
+        let repo = SqliteFederationRepository::new(pool.clone());
+        let user1 = uuid::Uuid::new_v4();
+        let user2 = uuid::Uuid::new_v4();
+
+        sqlx::query(
+            "INSERT INTO ap_remote_actors (url, handle, inbox_url, fetched_at, display_name)
+             VALUES ('https://other.social/users/alice', 'alice@other.social', 'https://other.social/inbox', '2024-01-01', 'Alice')",
+        )
+        .execute(&pool)
+        .await
+        .unwrap();
+
+        sqlx::query(
+            "INSERT INTO ap_following (local_user_id, remote_actor_url, follow_activity_id, status)
+             VALUES (?, 'https://other.social/users/alice', 'act1', 'accepted'),
+                    (?, 'https://other.social/users/alice', 'act2', 'accepted')",
+        )
+        .bind(user1.to_string())
+        .bind(user2.to_string())
+        .execute(&pool)
+        .await
+        .unwrap();
+
+        let actors = repo.list_all_followed_remote_actors().await.unwrap();
+        assert_eq!(actors.len(), 1);
+        assert_eq!(actors[0].handle, "alice@other.social");
+    }
+}

crates/adapters/sqlite/src/lib.rs

@@ -214,31 +214,6 @@ impl SqliteMovieRepository {
         .map_err(Self::map_err)
     }
 
-    async fn count_feed_entries(&self) -> Result<i64, DomainError> {
-        sqlx::query_scalar!("SELECT COUNT(*) FROM reviews")
-            .fetch_one(&self.pool)
-            .await
-            .map_err(Self::map_err)
-    }
-
-    async fn fetch_feed_rows(&self, limit: i64, offset: i64) -> Result<Vec<FeedRow>, DomainError> {
-        sqlx::query_as!(
-            FeedRow,
-            r#"SELECT m.id, m.external_metadata_id, m.title, m.release_year, m.director, m.poster_path,
-                    r.id AS review_id, r.movie_id, r.user_id, r.rating, r.comment, r.watched_at, r.created_at, r.remote_actor_url,
-                    COALESCE(u.email, r.remote_actor_url) AS "user_email!: String"
-             FROM reviews r
-             INNER JOIN movies m ON m.id = r.movie_id
-             LEFT JOIN users u ON u.id = r.user_id
-             ORDER BY r.watched_at DESC
-             LIMIT ? OFFSET ?"#,
-            limit, offset
-        )
-        .fetch_all(&self.pool)
-        .await
-        .map_err(Self::map_err)
-    }
-
     async fn fetch_user_totals(&self, user_id: &str) -> Result<UserTotalsRow, DomainError> {
         sqlx::query_as!(
             UserTotalsRow,
@@ -520,13 +495,115 @@ impl DiaryRepository for SqliteMovieRepository {
         &self,
         page: &PageParams,
     ) -> Result<Paginated<FeedEntry>, DomainError> {
+        self.query_activity_feed_filtered(page, &domain::ports::FeedSortBy::Date, None, None)
+            .await
+    }
+
+    async fn query_activity_feed_filtered(
+        &self,
+        page: &PageParams,
+        sort_by: &domain::ports::FeedSortBy,
+        search: Option<&str>,
+        following: Option<&domain::ports::FollowingFilter>,
+    ) -> Result<Paginated<FeedEntry>, DomainError> {
+        use domain::ports::FeedSortBy;
+
         let limit = page.limit as i64;
         let offset = page.offset as i64;
+        let has_search = search.map(|s| !s.is_empty()).unwrap_or(false);
 
-        let (total, rows) = tokio::try_join!(
+        let mut where_parts = vec!["1=1".to_string()];
-            self.count_feed_entries(),
+
-            self.fetch_feed_rows(limit, offset)
+        if has_search {
-        )?;
+            where_parts.push("m.title LIKE '%' || ? || '%'".to_string());
+        }
+
+        if let Some(f) = following {
+            let local_in = if f.local_user_ids.is_empty() {
+                "SELECT NULL WHERE 0".to_string()
+            } else {
+                f.local_user_ids
+                    .iter()
+                    .map(|_| "?")
+                    .collect::<Vec<_>>()
+                    .join(",")
+            };
+            let remote_in = if f.remote_actor_urls.is_empty() {
+                "SELECT NULL WHERE 0".to_string()
+            } else {
+                f.remote_actor_urls
+                    .iter()
+                    .map(|_| "?")
+                    .collect::<Vec<_>>()
+                    .join(",")
+            };
+            where_parts.push(format!(
+                "(r.user_id IN ({}) OR r.remote_actor_url IN ({}))",
+                local_in, remote_in
+            ));
+        }
+
+        let order_clause = match sort_by {
+            FeedSortBy::Date => "r.watched_at DESC",
+            FeedSortBy::DateAsc => "r.watched_at ASC",
+            FeedSortBy::Rating => "r.rating DESC, r.watched_at DESC",
+            FeedSortBy::RatingAsc => "r.rating ASC, r.watched_at ASC",
+        };
+
+        let where_clause = where_parts.join(" AND ");
+
+        let count_sql = format!(
+            "SELECT COUNT(*) FROM reviews r
+             INNER JOIN movies m ON m.id = r.movie_id
+             WHERE {}",
+            where_clause
+        );
+
+        let select_sql = format!(
+            "SELECT m.id, m.external_metadata_id, m.title, m.release_year, m.director, m.poster_path,
+                    r.id AS review_id, r.movie_id, r.user_id, r.rating, r.comment,
+                    r.watched_at, r.created_at, r.remote_actor_url,
+                    COALESCE(u.email, r.remote_actor_url) AS user_email
+             FROM reviews r
+             INNER JOIN movies m ON m.id = r.movie_id
+             LEFT JOIN users u ON u.id = r.user_id
+             WHERE {}
+             ORDER BY {}
+             LIMIT ? OFFSET ?",
+            where_clause, order_clause
+        );
+
+        macro_rules! bind_filter_params {
+            ($q:expr) => {{
+                let mut q = $q;
+                if has_search {
+                    q = q.bind(search.unwrap());
+                }
+                if let Some(f) = following {
+                    for uid in &f.local_user_ids {
+                        q = q.bind(uid.to_string());
+                    }
+                    for url in &f.remote_actor_urls {
+                        q = q.bind(url.as_str());
+                    }
+                }
+                q
+            }};
+        }
+
+        let count_q = bind_filter_params!(sqlx::query_scalar::<_, i64>(&count_sql));
+        let total = count_q
+            .fetch_one(&self.pool)
+            .await
+            .map_err(Self::map_err)?;
+
+        let rows_q = bind_filter_params!(sqlx::query_as::<_, FeedRow>(&select_sql));
+        let rows = rows_q
+            .bind(limit)
+            .bind(offset)
+            .fetch_all(&self.pool)
+            .await
+            .map_err(Self::map_err)?;
 
         let items = rows
             .into_iter()
@@ -672,3 +749,113 @@ impl StatsRepository for SqliteMovieRepository {
         })
     }
 }
+
+#[cfg(test)]
+mod feed_filter_tests {
+    use super::*;
+    use domain::{
+        models::collections::PageParams,
+        ports::{DiaryRepository, FeedSortBy, FollowingFilter},
+    };
+    use sqlx::SqlitePool;
+
+    async fn setup(pool: &SqlitePool) {
+        sqlx::migrate!("./migrations").run(pool).await.unwrap();
+
+        // carol is a remote actor; we still need a non-null user_id for the schema,
+        // so we create a local "ghost" user and link the remote review via remote_actor_url.
+        sqlx::query(
+            "INSERT INTO users (id, email, username, password_hash, created_at) VALUES
+             ('11111111-1111-1111-1111-111111111111', 'alice@example.com', 'alice', 'hash', '2024-01-01 00:00:00'),
+             ('22222222-2222-2222-2222-222222222222', 'bob@example.com', 'bob', 'hash', '2024-01-01 00:00:00'),
+             ('33333333-3333-3333-3333-333333333333', 'carol@remote.social', 'carol', 'hash', '2024-01-01 00:00:00')",
+        )
+        .execute(pool)
+        .await
+        .unwrap();
+
+        sqlx::query(
+            "INSERT INTO movies (id, title, release_year) VALUES
+             ('aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa', 'Inception', 2010),
+             ('bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb', 'Interstellar', 2014),
+             ('cccccccc-cccc-cccc-cccc-cccccccccccc', 'Dune', 2021)",
+        )
+        .execute(pool)
+        .await
+        .unwrap();
+
+        // carol's review: local user_id=33333333, remote_actor_url set → remote review
+        sqlx::query(
+            "INSERT INTO reviews (id, movie_id, user_id, rating, watched_at, created_at, remote_actor_url) VALUES
+             ('a1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1', 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa', '11111111-1111-1111-1111-111111111111', 5, '2024-01-01 00:00:00', '2024-01-01 00:00:00', NULL),
+             ('b2b2b2b2-b2b2-b2b2-b2b2-b2b2b2b2b2b2', 'bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb', '22222222-2222-2222-2222-222222222222', 3, '2024-01-02 00:00:00', '2024-01-02 00:00:00', NULL),
+             ('c3c3c3c3-c3c3-c3c3-c3c3-c3c3c3c3c3c3', 'cccccccc-cccc-cccc-cccc-cccccccccccc', '33333333-3333-3333-3333-333333333333', 4, '2024-01-03 00:00:00', '2024-01-03 00:00:00', 'https://remote.social/users/carol')",
+        )
+        .execute(pool)
+        .await
+        .unwrap();
+    }
+
+    #[tokio::test]
+    async fn test_sort_by_rating_descending() {
+        let pool = SqlitePool::connect(":memory:").await.unwrap();
+        setup(&pool).await;
+        let repo = SqliteMovieRepository::new(pool);
+
+        let page = PageParams::new(Some(10), Some(0)).unwrap();
+        let result = repo
+            .query_activity_feed_filtered(&page, &FeedSortBy::Rating, None, None)
+            .await
+            .unwrap();
+
+        let ratings: Vec<u8> = result
+            .items
+            .iter()
+            .map(|e| e.review().rating().value())
+            .collect();
+        assert_eq!(ratings, vec![5, 4, 3]);
+    }
+
+    #[tokio::test]
+    async fn test_search_by_title() {
+        let pool = SqlitePool::connect(":memory:").await.unwrap();
+        setup(&pool).await;
+        let repo = SqliteMovieRepository::new(pool);
+
+        let page = PageParams::new(Some(10), Some(0)).unwrap();
+        let result = repo
+            .query_activity_feed_filtered(&page, &FeedSortBy::Date, Some("Dune"), None)
+            .await
+            .unwrap();
+
+        assert_eq!(result.items.len(), 1);
+        assert_eq!(result.items[0].movie().title().value(), "Dune");
+    }
+
+    #[tokio::test]
+    async fn test_following_filter() {
+        let pool = SqlitePool::connect(":memory:").await.unwrap();
+        setup(&pool).await;
+        let repo = SqliteMovieRepository::new(pool);
+
+        let filter = FollowingFilter {
+            local_user_ids: vec![uuid::Uuid::parse_str("11111111-1111-1111-1111-111111111111")
+                .unwrap()],
+            remote_actor_urls: vec!["https://remote.social/users/carol".to_string()],
+        };
+        let page = PageParams::new(Some(10), Some(0)).unwrap();
+        let result = repo
+            .query_activity_feed_filtered(&page, &FeedSortBy::Date, None, Some(&filter))
+            .await
+            .unwrap();
+
+        assert_eq!(result.items.len(), 2); // alice + carol, NOT bob
+        let titles: Vec<String> = result
+            .items
+            .iter()
+            .map(|e| e.movie().title().value().to_string())
+            .collect();
+        assert!(titles.contains(&"Inception".to_string()));
+        assert!(titles.contains(&"Dune".to_string()));
+    }
+}

crates/adapters/template-askama/src/lib.rs

@@ -87,6 +87,34 @@ struct ActivityFeedTemplate<'a> {
     has_more: bool,
     ctx: &'a HtmlPageContext,
     page_items: Vec<PageItem>,
+    pub filter: String,
+    pub sort_by: String,
+    pub search: String,
+}
+
+impl<'a> ActivityFeedTemplate<'a> {
+    pub fn filter_qs(&self) -> String {
+        let mut parts = vec![
+            format!("filter={}", self.filter),
+            format!("sort_by={}", self.sort_by),
+        ];
+        if !self.search.is_empty() {
+            let encoded = self.search
+                .replace(' ', "+")
+                .replace('#', "%23")
+                .replace('&', "%26")
+                .replace('=', "%3D");
+            parts.push(format!("search={}", encoded));
+        }
+        format!("&{}", parts.join("&"))
+    }
+}
+
+pub struct RemoteActorDisplay {
+    pub handle: String,
+    pub display_name: String,
+    pub initial: char,
+    pub url: String,
 }
 
 struct UserSummaryView {
@@ -102,6 +130,7 @@ struct UserSummaryView {
 struct UsersTemplate<'a> {
     users: Vec<UserSummaryView>,
     ctx: &'a HtmlPageContext,
+    remote_actors: Vec<RemoteActorDisplay>,
 }
 
 struct MonthlyRatingRow<'a> {
@@ -320,6 +349,9 @@ impl HtmlRenderer for AskamaHtmlRenderer {
             has_more: data.has_more,
             ctx: &data.ctx,
             page_items: build_page_items(total_pages, current_page),
+            filter: data.filter,
+            sort_by: data.sort_by,
+            search: data.search,
         }
         .render()
         .map_err(|e| e.to_string())
@@ -350,9 +382,23 @@ impl HtmlRenderer for AskamaHtmlRenderer {
                 }
             })
             .collect();
+        let remote_actors = data.remote_actors
+            .into_iter()
+            .map(|a| {
+                let name = a.display_name.unwrap_or_else(|| a.handle.clone());
+                let initial = name.chars().next().unwrap_or('?');
+                RemoteActorDisplay {
+                    display_name: name,
+                    initial,
+                    handle: a.handle,
+                    url: a.url,
+                }
+            })
+            .collect();
         UsersTemplate {
             users,
             ctx: &data.ctx,
+            remote_actors,
         }
         .render()
         .map_err(|e| e.to_string())

crates/adapters/template-askama/templates/activity_feed.html

@@ -1,5 +1,35 @@
 {% extends "base.html" %}
 {% block content %}
+<form method="get" class="feed-filters" action="/">
+  {% if ctx.user_email.is_some() %}
+  <label class="pill{% if filter == "all" %} active{% endif %}">
+    <input type="radio" name="filter" value="all"
+           {% if filter == "all" %}checked{% endif %}
+           onchange="this.form.submit()">
+    Global
+  </label>
+  <label class="pill{% if filter == "following" %} active{% endif %}">
+    <input type="radio" name="filter" value="following"
+           {% if filter == "following" %}checked{% endif %}
+           onchange="this.form.submit()">
+    Following
+  </label>
+  {% endif %}
+  <div class="feed-controls">
+    <select name="sort_by" onchange="this.form.submit()">
+      <option value="date"{% if sort_by == "date" %} selected{% endif %}>Date: newest first</option>
+      <option value="date_asc"{% if sort_by == "date_asc" %} selected{% endif %}>Date: oldest first</option>
+      <option value="rating"{% if sort_by == "rating" %} selected{% endif %}>Rating: highest first</option>
+      <option value="rating_asc"{% if sort_by == "rating_asc" %} selected{% endif %}>Rating: lowest first</option>
+    </select>
+    <input type="text" name="search" value="{{ search }}" placeholder="Search movies...">
+    <button type="submit" class="btn-search">Search</button>
+    {% if filter != "all" || sort_by != "date" || !search.is_empty() %}
+    <a href="/" class="clear-filters">Clear</a>
+    {% endif %}
+  </div>
+  <input type="hidden" name="limit" value="{{ limit }}">
+</form>
 <div class="diary">
   {% for entry in entries %}
   <article class="entry">
@@ -37,7 +67,7 @@
       </div>
       {% if ctx.is_current_user(entry.review().user_id().value()) %}
       <form method="post" action="/reviews/{{ entry.review().id().value() }}/delete" class="delete-form">
-        <input type="hidden" name="redirect_after" value="/?offset={{ current_offset }}">
+        <input type="hidden" name="redirect_after" value="/?offset={{ current_offset }}{{ self.filter_qs() }}">
         <input type="hidden" name="_csrf" value="{{ ctx.csrf_token }}">
         <button type="submit">Delete</button>
       </form>
@@ -50,7 +80,7 @@
 </div>
 <nav class="pagination">
   {% if current_offset >= limit %}
-  <a href="/?offset={{ current_offset - limit }}" class="page-nav">&larr; Prev</a>
+  <a href="/?offset={{ current_offset - limit }}{{ self.filter_qs() }}" class="page-nav">&larr; Prev</a>
   {% endif %}
   {% for item in page_items %}
   {% if item.is_ellipsis %}
@@ -58,11 +88,11 @@
   {% elif item.is_current %}
   <span class="page-num current">{{ item.number + 1 }}</span>
   {% else %}
-  <a href="/?offset={{ item.number * limit }}" class="page-num">{{ item.number + 1 }}</a>
+  <a href="/?offset={{ item.number * limit }}{{ self.filter_qs() }}" class="page-num">{{ item.number + 1 }}</a>
   {% endif %}
   {% endfor %}
   {% if has_more %}
-  <a href="/?offset={{ current_offset + limit }}" class="page-nav">Next &rarr;</a>
+  <a href="/?offset={{ current_offset + limit }}{{ self.filter_qs() }}" class="page-nav">Next &rarr;</a>
   {% endif %}
 </nav>
 {% endblock %}

crates/adapters/template-askama/templates/base.html

@@ -1,43 +1,59 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+  <head>
-  <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>{{ ctx.page_title }}</title>
+    <title>{{ ctx.page_title }}</title>
-  <meta name="description" content="A personal movie diary — track what you watch, rate and review films.">
+    <meta
-  <meta property="og:type" content="website">
+      name="description"
-  <meta property="og:site_name" content="Movies Diary">
+      content="A personal movie diary — track what you watch, rate and review films."
-  <meta property="og:title" content="{{ ctx.page_title }}">
+    />
-  <meta property="og:url" content="{{ ctx.canonical_url }}">
+    <meta property="og:type" content="website" />
-  <meta name="twitter:card" content="summary">
+    <meta property="og:site_name" content="Movies Diary" />
-  <meta name="twitter:title" content="{{ ctx.page_title }}">
+    <meta property="og:title" content="{{ ctx.page_title }}" />
-  <link rel="canonical" href="{{ ctx.canonical_url }}">
+    <meta property="og:url" content="{{ ctx.canonical_url }}" />
-  <link rel="preconnect" href="https://fonts.googleapis.com">
+    <meta name="twitter:card" content="summary" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <meta name="twitter:title" content="{{ ctx.page_title }}" />
-  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
+    <link rel="canonical" href="{{ ctx.canonical_url }}" />
-  <link rel="icon" type="image/webp" href="/static/logo.webp">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="stylesheet" href="/static/style.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-</head>
+    <link
-<body>
+      href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap"
-  <header>
+      rel="stylesheet"
-    <a href="/" class="site-title">Movies Diary</a>
+    />
-    <nav>
+    <link rel="icon" type="image/webp" href="/static/logo.webp" />
-      <a href="/">Feed</a>
+    <link rel="stylesheet" href="/static/style.css" />
-      <a href="/users">Users</a>
+  </head>
-      <a href="{{ ctx.rss_url }}">RSS</a>
+  <body>
-      {% if let Some(email) = ctx.user_email %}
+    <header>
+      <a href="/" class="site-title">Movies Diary</a>
+      <nav>
+        <a href="/">Feed</a>
+        <a href="/users">Users</a>
+        {% if let Some(uid) = ctx.user_id %}
+        <a href="/users/{{ uid }}">Profile</a>
         <a href="/reviews/new">Add Review</a>
         <a href="/logout">Logout</a>
-      {% else %}
+        {% else %}
         <a href="/login">Login</a>
         {% if ctx.register_enabled %}
-          <a href="/register">Register</a>
+        <a href="/register">Register</a>
-        {% endif %}
+        {% endif %} {% endif %}
+      </nav>
+    </header>
+    <main>{% block content %}{% endblock %}</main>
+    <footer class="site-footer">
+      <span class="footer-made">Made with passion</span>
+      <span class="footer-sep">·</span>
+      <a href="/feed.rss" class="footer-link">RSS</a>
+      {% if let Some(uid) = ctx.user_id %}
+      <span class="footer-sep">·</span>
+      <a href="/users/{{ uid }}" class="footer-link">My Profile</a>
+      <span class="footer-sep">·</span>
+      <a href="/users/{{ uid }}/feed.rss" class="footer-link">My RSS</a>
       {% endif %}
-    </nav>
+      <span class="footer-sep">·</span>
-  </header>
+      <a href="/docs" target="_blank" class="footer-link">API Docs</a>
-  <main>
+    </footer>
-    {% block content %}{% endblock %}
+  </body>
-  </main>
-</body>
 </html>

crates/adapters/template-askama/templates/users.html

@@ -14,5 +14,21 @@
   {% else %}
   <p class="empty">No users yet.</p>
   {% endfor %}
+
+  {% if !remote_actors.is_empty() %}
+  <h2 class="page-title federated-title">Federated</h2>
+  {% for actor in remote_actors %}
+  <div class="user-row">
+    <div class="user-avatar federated-avatar">{{ actor.initial }}</div>
+    <div class="user-info">
+      <div class="user-name">{{ actor.display_name }}</div>
+      <div class="user-meta muted">{{ actor.handle }}</div>
+    </div>
+    <a href="{{ actor.url }}" target="_blank" rel="noopener noreferrer" class="btn-secondary">
+      View profile ↗
+    </a>
+  </div>
+  {% endfor %}
+  {% endif %}
 </div>
 {% endblock %}

crates/application/src/ports.rs

@@ -48,11 +48,15 @@ pub struct ActivityFeedPageData {
     pub current_offset: u32,
     pub has_more: bool,
     pub limit: u32,
+    pub filter: String,
+    pub sort_by: String,
+    pub search: String,
 }
 
 pub struct UsersPageData {
     pub ctx: HtmlPageContext,
     pub users: Vec<UserSummary>,
+    pub remote_actors: Vec<RemoteActorView>,
 }
 
 pub struct ProfilePageData {

crates/application/src/queries.rs

@@ -14,8 +14,11 @@ pub struct GetReviewHistoryQuery {
 }
 
 pub struct GetActivityFeedQuery {
-    pub limit: Option<u32>,
+    pub limit: u32,
-    pub offset: Option<u32>,
+    pub offset: u32,
+    pub sort_by: domain::ports::FeedSortBy,
+    pub search: Option<String>,
+    pub following: Option<domain::ports::FollowingFilter>,
 }
 
 pub struct GetUsersQuery;

crates/application/src/use_cases/get_activity_feed.rs

@@ -11,6 +11,13 @@ pub async fn execute(
     ctx: &AppContext,
     query: GetActivityFeedQuery,
 ) -> Result<Paginated<FeedEntry>, DomainError> {
-    let page = PageParams::new(query.limit, query.offset)?;
+    let page = PageParams::new(Some(query.limit), Some(query.offset))?;
-    ctx.diary_repository.query_activity_feed(&page).await
+    ctx.diary_repository
+        .query_activity_feed_filtered(
+            &page,
+            &query.sort_by,
+            query.search.as_deref(),
+            query.following.as_ref(),
+        )
+        .await
 }

crates/domain/src/ports.rs

@@ -15,6 +15,54 @@ use crate::{
     },
 };
 
+#[derive(Debug, Clone, Default, PartialEq)]
+pub enum FeedSortBy {
+    #[default]
+    Date,
+    DateAsc,
+    Rating,
+    RatingAsc,
+}
+
+impl FeedSortBy {
+    pub fn from_str(s: &str) -> Self {
+        match s {
+            "date_asc" => Self::DateAsc,
+            "rating" => Self::Rating,
+            "rating_asc" => Self::RatingAsc,
+            _ => Self::Date,
+        }
+    }
+}
+
+#[derive(Debug, Clone, Default)]
+pub struct FollowingFilter {
+    pub local_user_ids: Vec<uuid::Uuid>,
+    pub remote_actor_urls: Vec<String>,
+}
+
+#[derive(Debug, Clone)]
+pub struct RemoteActorInfo {
+    pub url: String,
+    pub handle: String,
+    pub display_name: Option<String>,
+}
+
+/// New trait for social/federation read queries
+#[async_trait]
+pub trait SocialQueryPort: Send + Sync {
+    /// Returns all accepted remote_actor_urls followed by `user_id`.
+    async fn get_accepted_following_urls(
+        &self,
+        user_id: uuid::Uuid,
+    ) -> Result<Vec<String>, DomainError>;
+
+    /// Returns all distinct remote actors followed by any local user on this instance.
+    async fn list_all_followed_remote_actors(
+        &self,
+    ) -> Result<Vec<RemoteActorInfo>, DomainError>;
+}
+
 #[async_trait]
 pub trait MovieRepository: Send + Sync {
     async fn get_movie_by_external_id(
@@ -47,6 +95,13 @@ pub trait DiaryRepository: Send + Sync {
         &self,
         page: &PageParams,
     ) -> Result<Paginated<FeedEntry>, DomainError>;
+    async fn query_activity_feed_filtered(
+        &self,
+        page: &PageParams,
+        sort_by: &FeedSortBy,
+        search: Option<&str>,
+        following: Option<&FollowingFilter>,
+    ) -> Result<Paginated<FeedEntry>, DomainError>;
     async fn get_review_history(&self, movie_id: &MovieId) -> Result<ReviewHistory, DomainError>;
     async fn get_user_history(&self, user_id: &UserId) -> Result<Vec<DiaryEntry>, DomainError>;
 }

crates/presentation/src/dtos.rs

@@ -67,6 +67,18 @@ pub struct ErrorQuery {
     pub error: Option<String>,
 }
 
+#[derive(serde::Deserialize, Default)]
+pub struct FeedQueryParams {
+    #[serde(default)]
+    pub filter: String,
+    #[serde(default)]
+    pub sort_by: String,
+    #[serde(default)]
+    pub search: String,
+    pub limit: Option<u32>,
+    pub offset: Option<u32>,
+}
+
 #[derive(Deserialize, Default)]
 pub struct DeleteRedirectForm {
     #[serde(default)]

crates/presentation/src/extractors.rs

@@ -177,6 +177,15 @@ mod tests {
         ) -> Result<Paginated<FeedEntry>, DomainError> {
             panic!()
         }
+        async fn query_activity_feed_filtered(
+            &self,
+            _: &PageParams,
+            _: &domain::ports::FeedSortBy,
+            _: Option<&str>,
+            _: Option<&domain::ports::FollowingFilter>,
+        ) -> Result<Paginated<FeedEntry>, DomainError> {
+            panic!()
+        }
         async fn get_review_history(&self, _: &MovieId) -> Result<ReviewHistory, DomainError> {
             panic!()
         }
@@ -185,6 +194,20 @@ mod tests {
         }
     }
     #[async_trait::async_trait]
+    impl domain::ports::SocialQueryPort for Panic {
+        async fn get_accepted_following_urls(
+            &self,
+            _: uuid::Uuid,
+        ) -> Result<Vec<String>, DomainError> {
+            panic!()
+        }
+        async fn list_all_followed_remote_actors(
+            &self,
+        ) -> Result<Vec<domain::ports::RemoteActorInfo>, DomainError> {
+            panic!()
+        }
+    }
+    #[async_trait::async_trait]
     impl StatsRepository for Panic {
         async fn get_user_stats(&self, _: &UserId) -> Result<UserStats, DomainError> {
             panic!()
@@ -386,6 +409,7 @@ mod tests {
             html_renderer: Arc::new(Panic),
             rss_renderer: Arc::new(Panic),
             ap_service: Arc::new(activitypub::NoopActivityPubService),
+            social_query: Arc::new(Panic),
         }
     }
 

crates/presentation/src/handlers.rs

@@ -30,7 +30,7 @@ pub mod html {
     use crate::{
         csrf::CsrfToken,
         dtos::{
-            DiaryQueryParams, ErrorQuery, FollowForm, FollowerActionForm, LogReviewData,
+            ErrorQuery, FeedQueryParams, FollowForm, FollowerActionForm, LogReviewData,
             LogReviewForm, LoginForm, RegisterForm, UnfollowForm,
         },
         extractors::{OptionalCookieUser, RequiredCookieUser},
@@ -338,29 +338,87 @@ pub mod html {
     pub async fn get_activity_feed(
         OptionalCookieUser(user_id): OptionalCookieUser,
         State(state): State<AppState>,
-        Query(params): Query<DiaryQueryParams>,
+        Query(params): Query<FeedQueryParams>,
         Extension(csrf): Extension<CsrfToken>,
     ) -> impl IntoResponse {
-        let ctx = build_page_context(&state, user_id, csrf.0).await;
+        let ctx = build_page_context(&state, user_id.clone(), csrf.0).await;
-        let query = application::queries::GetActivityFeedQuery {
+        let limit = params.limit.unwrap_or(20);
-            limit: params.limit,
+        let offset = params.offset.unwrap_or(0);
-            offset: params.offset,
+
+        let filter_str = if params.filter == "following" && user_id.is_some() {
+            "following"
+        } else {
+            "all"
         };
+        let sort_by_str = match params.sort_by.as_str() {
+            "date_asc" => "date_asc",
+            "rating" => "rating",
+            "rating_asc" => "rating_asc",
+            _ => "date",
+        };
+
+        let following = if filter_str == "following" {
+            if let Some(uid) = user_id {
+                let urls = state.social_query
+                    .get_accepted_following_urls(uid.value())
+                    .await
+                    .unwrap_or_default();
+                let base_url = &state.app_ctx.config.base_url;
+                let mut local_ids = vec![uid.value()];
+                let mut remote_urls = Vec::new();
+                for url in urls {
+                    if let Some(suffix) = url.strip_prefix(&format!("{}/users/", base_url)) {
+                        if let Ok(parsed_id) = uuid::Uuid::parse_str(suffix) {
+                            local_ids.push(parsed_id);
+                            continue;
+                        }
+                    }
+                    remote_urls.push(url);
+                }
+                Some(domain::ports::FollowingFilter {
+                    local_user_ids: local_ids,
+                    remote_actor_urls: remote_urls,
+                })
+            } else {
+                None
+            }
+        } else {
+            None
+        };
+
+        let search_opt = if params.search.is_empty() {
+            None
+        } else {
+            Some(params.search.clone())
+        };
+
+        let query = application::queries::GetActivityFeedQuery {
+            limit,
+            offset,
+            sort_by: domain::ports::FeedSortBy::from_str(sort_by_str),
+            search: search_opt,
+            following,
+        };
+
         match application::use_cases::get_activity_feed::execute(&state.app_ctx, query).await {
             Ok(entries) => {
-                let limit = entries.limit;
+                let entry_limit = entries.limit;
-                let offset = entries.offset;
+                let entry_offset = entries.offset;
-                let has_more = (offset as u64).saturating_add(limit as u64) < entries.total_count;
+                let has_more = (entry_offset as u64).saturating_add(entry_limit as u64)
+                    < entries.total_count;
                 let data = application::ports::ActivityFeedPageData {
                     ctx,
-                    current_offset: offset,
+                    current_offset: entry_offset,
                     has_more,
-                    limit,
+                    limit: entry_limit,
                     entries,
+                    filter: filter_str.to_string(),
+                    sort_by: sort_by_str.to_string(),
+                    search: params.search,
                 };
                 match state.html_renderer.render_activity_feed_page(data) {
                     Ok(html) => Html(html).into_response(),
-                    Err(e) => (StatusCode::INTERNAL_SERVER_ERROR, e).into_response(),
+                    Err(e) => (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()).into_response(),
                 }
             }
             Err(e) => (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()).into_response(),
@@ -375,20 +433,37 @@ pub mod html {
         let mut ctx = build_page_context(&state, user_id, csrf.0).await;
         ctx.page_title = "Members — Movies Diary".to_string();
         ctx.canonical_url = format!("{}/users", state.app_ctx.config.base_url);
-        match application::use_cases::get_users::execute(
+
-            &state.app_ctx,
+        let (users_result, actors_result) = tokio::join!(
-            application::queries::GetUsersQuery,
+            application::use_cases::get_users::execute(
-        )
+                &state.app_ctx,
-        .await
+                application::queries::GetUsersQuery,
-        {
+            ),
-            Ok(users) => {
+            state.social_query.list_all_followed_remote_actors()
-                let data = application::ports::UsersPageData { ctx, users };
+        );
+
+        match (users_result, actors_result) {
+            (Ok(users), Ok(remote_actors)) => {
+                let actor_views = remote_actors
+                    .into_iter()
+                    .map(|a| application::ports::RemoteActorView {
+                        handle: a.handle,
+                        display_name: a.display_name,
+                        url: a.url,
+                    })
+                    .collect();
+                let data = application::ports::UsersPageData {
+                    ctx,
+                    users,
+                    remote_actors: actor_views,
+                };
                 match state.html_renderer.render_users_page(data) {
                     Ok(html) => Html(html).into_response(),
                     Err(e) => (StatusCode::INTERNAL_SERVER_ERROR, e).into_response(),
                 }
             }
-            Err(e) => (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()).into_response(),
+            (Err(e), _) => (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()).into_response(),
+            (_, Err(e)) => (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()).into_response(),
         }
     }
 
@@ -1352,7 +1427,13 @@ pub mod api {
     ) -> Result<Json<ActivityFeedResponse>, ApiError> {
         let page = get_feed_uc::execute(
             &state.app_ctx,
-            GetActivityFeedQuery { limit: params.limit, offset: params.offset },
+            GetActivityFeedQuery {
+                limit: params.limit.unwrap_or(20),
+                offset: params.offset.unwrap_or(0),
+                sort_by: domain::ports::FeedSortBy::Date,
+                search: None,
+                following: None,
+            },
         )
         .await?;
         Ok(Json(ActivityFeedResponse {

crates/presentation/src/main.rs

@@ -114,6 +114,7 @@ async fn wire_dependencies() -> anyhow::Result<(AppState, axum::Router)> {
 
     // Federation
     let federation_repo = Arc::new(SqliteFederationRepository::new(pool));
+    let social_query: Arc<dyn domain::ports::SocialQueryPort> = Arc::clone(&federation_repo) as _;
     let user_repo_adapter = Arc::new(DomainUserRepoAdapter(Arc::clone(&user_repository)));
     let review_handler = Arc::new(ReviewObjectHandler {
         movie_repository: Arc::clone(&movie_repository),
@@ -170,6 +171,7 @@ async fn wire_dependencies() -> anyhow::Result<(AppState, axum::Router)> {
             std::env::var("BASE_URL").unwrap_or_else(|_| "http://localhost:3000".into()),
         )),
         ap_service,
+        social_query,
     };
     Ok((state, ap_router))
 }

crates/presentation/src/routes.rs

@@ -1,4 +1,3 @@
-use std::net::SocketAddr;
 use std::num::NonZeroU32;
 
 use axum::{Router, routing};
@@ -130,17 +129,38 @@ fn api_routes(rate_limit: u64) -> Router<AppState> {
             .route("/auth/login", routing::post(handlers::api::login))
             .route("/auth/register", routing::post(handlers::api::register))
             .route("/diary/export", routing::get(handlers::api::export_diary))
-            .route("/activity-feed", routing::get(handlers::api::get_activity_feed))
+            .route(
+                "/activity-feed",
+                routing::get(handlers::api::get_activity_feed),
+            )
             .route("/users", routing::get(handlers::api::list_users))
             .route("/users/{id}", routing::get(handlers::api::get_user_profile))
-            .route("/social/following", routing::get(handlers::api::get_following))
+            .route(
-            .route("/social/followers", routing::get(handlers::api::get_followers))
+                "/social/following",
-            .route("/social/followers/pending", routing::get(handlers::api::get_pending_followers))
+                routing::get(handlers::api::get_following),
+            )
+            .route(
+                "/social/followers",
+                routing::get(handlers::api::get_followers),
+            )
+            .route(
+                "/social/followers/pending",
+                routing::get(handlers::api::get_pending_followers),
+            )
             .route("/social/follow", routing::post(handlers::api::follow))
             .route("/social/unfollow", routing::post(handlers::api::unfollow))
-            .route("/social/followers/accept", routing::post(handlers::api::accept_follower))
+            .route(
-            .route("/social/followers/reject", routing::post(handlers::api::reject_follower))
+                "/social/followers/accept",
-            .route("/social/followers/remove", routing::post(handlers::api::remove_follower))
+                routing::post(handlers::api::accept_follower),
+            )
+            .route(
+                "/social/followers/reject",
+                routing::post(handlers::api::reject_follower),
+            )
+            .route(
+                "/social/followers/remove",
+                routing::post(handlers::api::remove_follower),
+            )
             .layer(GovernorLayer::new(cfg)),
     )
 }

crates/presentation/src/state.rs

@@ -11,4 +11,5 @@ pub struct AppState {
     pub html_renderer: Arc<dyn HtmlRenderer>,
     pub rss_renderer: Arc<dyn RssFeedRenderer>,
     pub ap_service: Arc<dyn ActivityPubPort>,
+    pub social_query: Arc<dyn domain::ports::SocialQueryPort>,
 }

crates/presentation/tests/api_test.rs

@@ -125,6 +125,22 @@ impl domain::ports::DiaryExporter for PanicExporter {
     }
 }
 
+struct PanicSocialQuery;
+#[async_trait::async_trait]
+impl domain::ports::SocialQueryPort for PanicSocialQuery {
+    async fn get_accepted_following_urls(
+        &self,
+        _: uuid::Uuid,
+    ) -> Result<Vec<String>, DomainError> {
+        panic!()
+    }
+    async fn list_all_followed_remote_actors(
+        &self,
+    ) -> Result<Vec<domain::ports::RemoteActorInfo>, DomainError> {
+        panic!()
+    }
+}
+
 async fn test_app() -> Router {
     let pool = SqlitePool::connect("sqlite::memory:")
         .await
@@ -156,6 +172,7 @@ async fn test_app() -> Router {
         html_renderer: Arc::new(AskamaHtmlRenderer::new()),
         rss_renderer: Arc::new(RssAdapter::new("http://localhost:3000".into())),
         ap_service: Arc::new(activitypub::NoopActivityPubService),
+        social_query: Arc::new(PanicSocialQuery),
     };
 
     routes::build_router(state, axum::Router::new())

static/style.css

@@ -29,7 +29,7 @@ body {
   font-family: "Nunito", sans-serif;
   max-width: 720px;
   margin: 0 auto;
-  padding: 20px;
+  padding: 20px 20px 56px;
   color: var(--text);
   background: url("/static/background.avif") center / cover no-repeat fixed;
   min-height: 100%;
@@ -192,7 +192,9 @@ nav a:hover {
 
 .star.filled {
   color: var(--primary);
-  text-shadow: 0 0 8px var(--primary-glow), 0 0 2px var(--primary);
+  text-shadow:
+    0 0 8px var(--primary-glow),
+    0 0 2px var(--primary);
 }
 
 .star.empty {
@@ -411,118 +413,272 @@ form button[type="submit"]:hover {
   text-decoration: none;
   font-weight: 600;
 }
-.feed-user:hover { text-decoration: underline; }
+.feed-user:hover {
-.feed-time { opacity: 0.6; }
+  text-decoration: underline;
+}
+.feed-time {
+  opacity: 0.6;
+}
 
 /* ---- Users list ---- */
-.users-list { display: flex; flex-direction: column; gap: 0.75rem; }
+.users-list {
-.page-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; opacity: 0.9; }
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.page-title {
+  font-size: 1.2rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  opacity: 0.9;
+}
 .user-row {
   display: flex;
   align-items: center;
   gap: 1rem;
-  background: rgba(255,255,255,0.07);
+  background: rgba(255, 255, 255, 0.07);
   border-radius: 12px;
   padding: 0.75rem 1rem;
 }
 .user-avatar {
-  width: 40px; height: 40px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
-  background: rgba(74,158,255,0.2);
+  background: rgba(74, 158, 255, 0.2);
-  display: flex; align-items: center; justify-content: center;
+  display: flex;
-  font-size: 1.1rem; font-weight: 700;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.1rem;
+  font-weight: 700;
   flex-shrink: 0;
 }
-.user-info { flex: 1; }
+.user-info {
-.user-name { font-weight: 600; font-size: 0.95rem; }
+  flex: 1;
-.user-meta { font-size: 0.8rem; opacity: 0.6; margin-top: 0.1rem; }
+}
+.user-name {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+.user-meta {
+  font-size: 0.8rem;
+  opacity: 0.6;
+  margin-top: 0.1rem;
+}
 .btn-secondary {
   color: var(--primary);
   font-size: 0.85rem;
   text-decoration: none;
   white-space: nowrap;
 }
-.btn-secondary:hover { text-decoration: underline; }
+.btn-secondary:hover {
+  text-decoration: underline;
+}
 
 /* ---- Profile stats header ---- */
-.profile { display: flex; flex-direction: column; gap: 1rem; }
+.profile {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
 .stats-header {
-  background: rgba(255,255,255,0.06);
+  background: rgba(255, 255, 255, 0.06);
   border-radius: 14px;
   padding: 1rem 1.25rem;
 }
-.profile-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.75rem; }
+.profile-name {
-.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+}
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5rem;
+}
 .stat-tile {
-  background: rgba(255,255,255,0.06);
+  background: rgba(255, 255, 255, 0.06);
   border-radius: 10px;
   padding: 0.6rem 0.5rem;
   text-align: center;
 }
-.stat-value { font-size: 1.1rem; font-weight: 700; color: var(--primary); }
+.stat-value {
-.stat-label { font-size: 0.7rem; opacity: 0.5; margin-top: 0.1rem; }
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--primary);
+}
+.stat-label {
+  font-size: 0.7rem;
+  opacity: 0.5;
+  margin-top: 0.1rem;
+}
 
 /* ---- View tabs ---- */
-.view-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
+.view-tabs {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
 .view-tab {
   padding: 0.3rem 0.75rem;
   border-radius: 8px;
   font-size: 0.85rem;
   text-decoration: none;
-  color: rgba(255,255,255,0.7);
+  color: rgba(255, 255, 255, 0.7);
-  background: rgba(255,255,255,0.08);
+  background: rgba(255, 255, 255, 0.08);
   transition: background 0.15s;
 }
-.view-tab:hover { background: rgba(255,255,255,0.14); }
+.view-tab:hover {
-.view-tab.active { background: var(--primary); color: #fff; font-weight: 600; }
+  background: rgba(255, 255, 255, 0.14);
+}
+.view-tab.active {
+  background: var(--primary);
+  color: #fff;
+  font-weight: 600;
+}
 
 /* ---- History heatmap ---- */
-.heatmap-section { background: rgba(255,255,255,0.06); border-radius: 12px; padding: 1rem; }
+.heatmap-section {
-.heatmap-label { font-size: 0.8rem; opacity: 0.5; margin-bottom: 0.6rem; }
+  background: rgba(255, 255, 255, 0.06);
-.heatmap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
+  border-radius: 12px;
+  padding: 1rem;
+}
+.heatmap-label {
+  font-size: 0.8rem;
+  opacity: 0.5;
+  margin-bottom: 0.6rem;
+}
+.heatmap {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 4px;
+}
 .heatmap-cell {
   border-radius: 6px;
   padding: 0.4rem 0.2rem;
   text-align: center;
   min-height: 48px;
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   background: oklch(85.2% 0.199 91.936 / var(--alpha, 0.05));
 }
-.heatmap-count { font-size: 0.85rem; font-weight: 700; }
+.heatmap-count {
-.heatmap-month { font-size: 0.65rem; opacity: 0.6; margin-top: 2px; }
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+.heatmap-month {
+  font-size: 0.65rem;
+  opacity: 0.6;
+  margin-top: 2px;
+}
 
 /* ---- History month sections ---- */
-.history-month { margin-top: 1rem; }
+.history-month {
-.month-heading { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.5rem; opacity: 0.8; }
+  margin-top: 1rem;
-.month-count { font-size: 0.8rem; opacity: 0.5; font-weight: 400; }
+}
+.month-heading {
+  font-size: 0.95rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  opacity: 0.8;
+}
+.month-count {
+  font-size: 0.8rem;
+  opacity: 0.5;
+  font-weight: 400;
+}
 
 /* ---- Trends charts ---- */
-.trends-section { display: flex; flex-direction: column; gap: 1.25rem; }
+.trends-section {
-.chart-block { background: rgba(255,255,255,0.06); border-radius: 12px; padding: 1rem; }
+  display: flex;
-.chart-label { font-size: 0.8rem; opacity: 0.5; margin-bottom: 0.75rem; }
+  flex-direction: column;
+  gap: 1.25rem;
+}
+.chart-block {
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 12px;
+  padding: 1rem;
+}
+.chart-label {
+  font-size: 0.8rem;
+  opacity: 0.5;
+  margin-bottom: 0.75rem;
+}
 
 .bar-chart {
   display: flex;
   align-items: flex-end;
   gap: 4px;
 }
-.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
+.bar-col {
-.bar-value { font-size: 0.6rem; color: var(--primary); opacity: 0.9; line-height: 1; }
+  flex: 1;
-.bar-fill { width: 100%; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 3px; opacity: 0.8; }
+  display: flex;
-.bar-month { font-size: 0.65rem; opacity: 0.5; }
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+.bar-value {
+  font-size: 0.6rem;
+  color: var(--primary);
+  opacity: 0.9;
+  line-height: 1;
+}
+.bar-fill {
+  width: 100%;
+  background: var(--primary);
+  border-radius: 3px 3px 0 0;
+  min-height: 3px;
+  opacity: 0.8;
+}
+.bar-month {
+  font-size: 0.65rem;
+  opacity: 0.5;
+}
 
-.director-chart { display: flex; flex-direction: column; gap: 6px; }
+.director-chart {
-.director-row { display: flex; align-items: center; gap: 0.6rem; }
+  display: flex;
-.director-name { font-size: 0.85rem; width: 140px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  flex-direction: column;
-.director-bar { flex: 1; background: rgba(255,255,255,0.08); border-radius: 4px; height: 10px; overflow: hidden; }
+  gap: 6px;
-.director-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; opacity: 0.8; }
+}
-.director-count { font-size: 0.8rem; opacity: 0.5; width: 20px; text-align: right; }
+.director-row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+.director-name {
+  font-size: 0.85rem;
+  width: 140px;
+  flex-shrink: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.director-bar {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 4px;
+  height: 10px;
+  overflow: hidden;
+}
+.director-bar-fill {
+  height: 100%;
+  background: var(--primary);
+  border-radius: 4px;
+  opacity: 0.8;
+}
+.director-count {
+  font-size: 0.8rem;
+  opacity: 0.5;
+  width: 20px;
+  text-align: right;
+}
 
 /* ---- ActivityPub federation ---- */
 .remote-badge {
   font-size: 0.7rem;
-  color: rgba(255,255,255,0.5);
+  color: rgba(255, 255, 255, 0.5);
-  background: rgba(255,255,255,0.08);
+  background: rgba(255, 255, 255, 0.08);
   border-radius: 3px;
   padding: 1px 5px;
   margin-left: 4px;
@@ -531,20 +687,23 @@ form button[type="submit"]:hover {
 .follow-section {
   margin-top: 1.5rem;
   padding-top: 1rem;
-  border-top: 1px solid rgba(255,255,255,0.1);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 .follow-section input[type="text"] {
   padding: 0.4rem;
-  border: 1px solid rgba(255,255,255,0.2);
+  border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 3px;
   min-width: 280px;
-  background: rgba(255,255,255,0.08);
+  background: rgba(255, 255, 255, 0.08);
   color: inherit;
 }
-.following-list { list-style: none; padding: 0; }
+.following-list {
+  list-style: none;
+  padding: 0;
+}
 .following-item {
   padding: 0.5rem 0;
-  border-bottom: 1px solid rgba(255,255,255,0.07);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -554,7 +713,7 @@ form button[type="submit"]:hover {
 .pending-followers {
   margin-top: 1.5rem;
   padding-top: 1rem;
-  border-top: 1px solid rgba(255,255,255,0.1);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .pending-list {
@@ -567,7 +726,7 @@ form button[type="submit"]:hover {
   align-items: center;
   gap: 0.5rem;
   padding: 0.4rem 0;
-  border-bottom: 1px solid rgba(255,255,255,0.07);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
   flex-wrap: wrap;
 }
 
@@ -618,3 +777,210 @@ form button[type="submit"]:hover {
 .btn-reject:hover {
   background: rgba(220, 60, 60, 0.85);
 }
+
+/* ── Feed filter bar ─────────────────────────────── */
+.feed-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  max-width: none; /* override global form { max-width: 400px } */
+  background: var(--glass-bg, rgba(255, 255, 255, 0.06));
+  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
+  border-radius: 12px;
+  backdrop-filter: blur(8px);
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.35rem 0.85rem;
+  border-radius: 999px;
+  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
+  background: transparent;
+  color: var(--text-muted, rgba(255, 255, 255, 0.55));
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+  user-select: none;
+}
+
+.pill input[type="radio"] {
+  display: none;
+}
+
+.pill:hover {
+  background: var(--glass-bg, rgba(255, 255, 255, 0.08));
+  color: var(--text-primary, #fff);
+}
+
+.pill.active {
+  background: var(--primary);
+  border-color: transparent;
+  color: #fff;
+}
+
+.feed-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.feed-controls select {
+  background: var(--glass-bg, rgba(255, 255, 255, 0.06));
+  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
+  border-radius: 8px;
+  color: inherit;
+  font-size: 0.875rem;
+  padding: 0.3rem 0.6rem;
+  cursor: pointer;
+  color-scheme: dark;
+}
+
+.feed-controls select option {
+  background: #1e1a2e;
+  color: #fff;
+}
+
+.feed-controls input[type="text"] {
+  background: var(--glass-bg, rgba(255, 255, 255, 0.06));
+  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
+  border-radius: 8px;
+  color: inherit;
+  font-size: 0.875rem;
+  padding: 0.3rem 0.7rem;
+  width: 180px;
+}
+
+.feed-controls input[type="text"]::placeholder {
+  color: var(--text-muted, rgba(255, 255, 255, 0.4));
+}
+
+.btn-search {
+  background: var(--glass-bg, rgba(255, 255, 255, 0.08));
+  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
+  border-radius: 8px;
+  color: inherit;
+  font-size: 0.875rem;
+  padding: 0.3rem 0.8rem;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-search:hover {
+  background: var(--glass-bg-hover, rgba(255, 255, 255, 0.14));
+}
+
+.clear-filters {
+  font-size: 0.8rem;
+  color: var(--text-muted, rgba(255, 255, 255, 0.45));
+  text-decoration: none;
+  padding: 0.3rem 0.5rem;
+  border-radius: 6px;
+  transition: color 0.15s;
+}
+
+.clear-filters:hover {
+  color: var(--text-primary, #fff);
+}
+
+/* ── Users — federated section ───────────────────── */
+.federated-title {
+  margin-top: 2rem;
+}
+
+.federated-avatar {
+  opacity: 0.75;
+}
+
+.user-meta.muted,
+.muted {
+  color: var(--text-muted, rgba(255, 255, 255, 0.45));
+  font-size: 0.8rem;
+}
+
+/* ── Site footer ─────────────────────────────────── */
+.site-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem 0.75rem;
+  padding: 0.6rem 1rem;
+  border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
+  font-size: 0.8rem;
+  color: var(--text-muted, rgba(255, 255, 255, 0.4));
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  z-index: 100;
+}
+
+.footer-link {
+  color: var(--text-muted, rgba(255, 255, 255, 0.45));
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.footer-link:hover {
+  color: var(--text-primary, #fff);
+}
+
+.footer-sep {
+  color: var(--text-muted, rgba(255, 255, 255, 0.25));
+}
+
+/* ── Responsive: mobile ──────────────────────────── */
+@media (max-width: 560px) {
+  header {
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  nav {
+    flex-wrap: wrap;
+    width: 100%;
+    gap: 6px;
+  }
+
+  nav a {
+    font-size: 0.8em;
+    padding: 3px 10px;
+  }
+}
+
+@media (max-width: 480px) {
+  .feed-filters {
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+  }
+
+  .feed-controls {
+    width: 100%;
+  }
+
+  .feed-controls select,
+  .feed-controls input[type="text"] {
+    flex: 1;
+    width: auto;
+  }
+
+  .pill {
+    flex: 1;
+    justify-content: center;
+  }
+}