feat: Add filters to streams

Author: marienfressinaud

locales/fr_FR/LC_MESSAGES/main.mo

@@ -1,8 +1,8 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Flus\n"
-"POT-Creation-Date: 2026-06-26 10:35+0200\n"
-"PO-Revision-Date: 2026-06-26 10:35+0200\n"
+"POT-Creation-Date: 2026-07-22 14:40+0200\n"
+"PO-Revision-Date: 2026-07-22 14:41+0200\n"
 "Last-Translator: Marien Fressinaud <dev@marienfressinaud.fr>\n"
 "Language-Team: \n"
 "Language: fr_FR\n"
@@ -653,7 +653,7 @@ msgstr "aucun lien"
 #: views/collections/_collection.html.twig:26
 #: views/collections/_collection_follow.html.twig:18
 #: views/links/_pagination_count.html.twig:7 views/news/index.html.twig:26
-#: views/news/index.html.twig:132 views/streams/show.html.twig:101
+#: views/news/index.html.twig:132 views/streams/_timeline.html.twig:44
 #, php-format
 msgid "%s link"
 msgid_plural "%s links"
@@ -856,6 +856,7 @@ msgstr ""
 "pour la plupart des flux)."
 
 #: views/collections/filters/edit.html.twig:85
+#: views/streams/_filters.html.twig:122
 msgid "All"
 msgstr "Tout"
 
@@ -1388,7 +1389,7 @@ msgstr "Se déconnecter"
 msgid "Language"
 msgstr "Langue"
 
-#: views/layouts/_header-disconnected.html.twig:60
+#: views/layouts/_header-disconnected.html.twig:59
 #: views/sessions/new.html.twig:104
 msgid "Login"
 msgstr "Se connecter"
@@ -1431,6 +1432,7 @@ msgid "Search links by words, URL or #tag"
 msgstr "Rechercher des liens par mots, URL ou #tag"
 
 #: views/layouts/_search.html.twig:15 views/links/searches/show.html.twig:64
+#: views/streams/_filters.html.twig:53
 msgid "Search"
 msgstr "Rechercher"
 
@@ -2905,6 +2907,38 @@ msgstr "Mot de passe oublié ?"
 msgid "No account yet?"
 msgstr "Pas encore de compte ?"
 
+#: views/streams/_filters.html.twig:12
+msgid "Date"
+msgstr "Date"
+
+#: views/streams/_filters.html.twig:33
+msgid "Number of days"
+msgstr "Nombre de jours"
+
+#: views/streams/_filters.html.twig:63
+#, php-format
+msgid "Sources (%d)"
+msgstr "Sources (%d)"
+
+#: views/streams/_filters.html.twig:82
+#, php-format
+msgid "%s: %d link"
+msgid_plural "%s: %d links"
+msgstr[0] "%s : %d lien"
+msgstr[1] "%s : %d liens"
+
+#: views/streams/_filters.html.twig:82
+msgid "(has unread)"
+msgstr "(contient des non lus)"
+
+#: views/streams/_filters.html.twig:119
+msgid "Status of the links"
+msgstr "Statut des liens"
+
+#: views/streams/_filters.html.twig:123
+msgid "Unread"
+msgstr "Non lus"
+
 #: views/streams/_form.html.twig:12
 msgid "What’s the name of the stream?"
 msgstr "Quelle est le nom du fil ?"
@@ -2913,6 +2947,10 @@ msgstr "Quelle est le nom du fil ?"
 msgid "What’s the purpose of the stream?"
 msgstr "Quelle est la raison d’être du fil ?"
 
+#: views/streams/_timeline.html.twig:66
+msgid "There is no link matching your filters."
+msgstr "Il n’y a aucun lien qui correspond à vos filtres."
+
 #: views/streams/new.html.twig:9
 msgid "Create the stream"
 msgstr "Créer le fil"

locales/fr_FR/LC_MESSAGES/main.po

@@ -21,6 +21,7 @@ import NewsRefresherController from './controllers/news_refresher_controller.js'
 import NotificationController from './controllers/notification_controller.js';
 import PopupController from './controllers/popup_controller.js';
 import SidenavController from './controllers/sidenav_controller.js';
+import StreamController from './controllers/stream_controller.js';
 import TextEditorController from './controllers/text_editor_controller.js';
 import ZindexInverserController from './controllers/zindex_inverser_controller.js';
 
@@ -47,6 +48,7 @@ application.register('news-refresher', NewsRefresherController);
 application.register('notification', NotificationController);
 application.register('popup', PopupController);
 application.register('sidenav', SidenavController);
+application.register('stream', StreamController);
 application.register('text-editor', TextEditorController);
 application.register('zindex-inverser', ZindexInverserController);
 

src/assets/javascripts/application.js

@@ -0,0 +1,44 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['formFilters', 'source', 'sourceInput', 'status', 'statusInput'];
+
+    selectSource (event) {
+        const button = event.currentTarget;
+
+        // The sources are toggle buttons: clicking the selected one unselects it.
+        const willBeSelected = button.getAttribute('aria-pressed') !== 'true';
+
+        this.sourceInputTarget.value = willBeSelected ? button.value : '';
+        this.press(this.sourceTargets, willBeSelected ? button : null);
+
+        this.submit();
+    }
+
+    selectStatus (event) {
+        const button = event.currentTarget;
+
+        // Contrary to the sources, a status is always selected: clicking the
+        // selected one does nothing.
+        if (button.getAttribute('aria-pressed') === 'true') {
+            return;
+        }
+
+        this.statusInputTarget.value = button.value;
+        this.press(this.statusTargets, button);
+
+        this.submit();
+    }
+
+    press (buttons, pressedButton) {
+        buttons.forEach((button) => {
+            button.setAttribute('aria-pressed', button === pressedButton ? 'true' : 'false');
+        });
+    }
+
+    submit () {
+        // requestSubmit() (and not submit()) so Turbo intercepts the
+        // submission and only renders the timeline frame.
+        this.formFiltersTarget.requestSubmit();
+    }
+};

src/assets/javascripts/controllers/stream_controller.js

@@ -7,13 +7,15 @@
 @import url('./components/badges.css');
 @import url('./components/buttons.css');
 @import url('./components/collections.css');
+@import url('./components/filters.css');
 @import url('./components/groups.css');
 @import url('./components/images.css');
 @import url('./components/links.css');
 @import url('./components/notepads.css');
 @import url('./components/shares.css');
 @import url('./components/sources.css');
 @import url('./components/threads.css');
+@import url('./components/timelines.css');
 @import url('./components/topics.css');
 @import url('./components/turbo.css');
 @import url('./components/usernames.css');

src/assets/stylesheets/application.css

@@ -0,0 +1,48 @@
+.filters {
+    background-color: var(--color-background);
+    border: 1px solid var(--color-grey-line);
+    border-radius: var(--border-radius);
+}
+
+.filters__section {
+    padding: var(--space-small);
+}
+
+.filters__section + .filters__section {
+    border-top: 1px solid var(--color-grey-line);
+}
+
+.filters__option {
+    position: relative;
+}
+
+.filters__option button[aria-pressed="true"] {
+    --button-color: var(--color-accent-text-contrast);
+    --button-background-color: var(--color-accent-bg-active);
+    --button-border-color: var(--color-accent-border);
+}
+
+.filters__option .source--button[aria-pressed="true"] {
+    background-color: var(--color-accent-bg-subtle);
+    border-color: var(--color-accent-border);
+}
+
+.filters__option .filters__unselect {
+    display: none;
+}
+
+.filters__option [aria-pressed="true"] .filters__unselect {
+    position: absolute;
+    z-index: 1;
+    top: calc(-1 * var(--space-smaller));
+    right: calc(-1 * var(--space-smaller));
+
+    display: block;
+    padding: 2px;
+
+    font-size: var(--font-size-smaller);
+
+    background-color: var(--color-accent-base);
+    border: 1px solid var(--color-accent-border);
+    border-radius: 100%;
+}

src/assets/stylesheets/components/filters.css

@@ -47,10 +47,58 @@
     border-radius: var(--border-radius);
 }
 
+.source--button {
+    max-width: 17rem;
+    height: 5rem;
+    padding: var(--space-small);
+
+    text-align: left;
+
+    text-decoration: none;
+
+    cursor: pointer;
+}
+
 .source__image {
     width: 64px;
     max-width: none;
 
     background-color: var(--color-base);
     border-radius: var(--border-radius);
 }
+
+.source__body {
+    display: block;
+}
+
+.source__name {
+    overflow: hidden;
+
+    display: -webkit-box;
+    max-height: 2lh;
+
+    color: var(--color-text);
+    font-weight: 600;
+    text-overflow: ellipsis;
+
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.source__count {
+    display: block;
+
+    color: var(--color-grey-text);
+    text-align: right;
+}
+
+.source__unread-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+
+    vertical-align: middle;
+
+    background-color: var(--color-accent-solid);
+    border-radius: 50%;
+}

src/assets/stylesheets/components/sources.css

@@ -0,0 +1,7 @@
+#stream-timeline {
+    transition: opacity 0.2s ease-in-out;
+}
+
+#stream-timeline[aria-busy="true"] {
+    opacity: 0.6;
+}

src/assets/stylesheets/components/timelines.css

@@ -85,7 +85,7 @@ public function show(Request $request): Response
 
         auth\Access::require($user, 'view', $stream);
 
-        $stream_view = models\StreamView::buildFromRequest($stream, $request);
+        $stream_view = models\StreamView::buildFromRequest($stream, $user, $request);
 
         return Response::ok('streams/show.html.twig', [
             'stream_view' => $stream_view,

src/controllers/Streams.php

@@ -134,6 +134,8 @@ public function publicationFrequencyPerYear(): int
      *     context_user?: ?User,
      *     at?: \DateTimeImmutable,
      *     days?: int,
+     *     source?: ?Collection,
+     *     status?: string,
      * } $options
      *
      * @return Link[]
@@ -143,6 +145,34 @@ public function links(array $options = []): array
         return Link::listByStream($this, $options);
     }
 
+    /**
+     * @param array{
+     *     context_user?: ?User,
+     *     at?: \DateTimeImmutable,
+     *     days?: int,
+     * } $options
+     *
+     * @return array<string, int>
+     */
+    public function countLinksPerDay(array $options = []): array
+    {
+        return Link::countByStreamPerDay($this, $options);
+    }
+
+    /**
+     * @param array{
+     *     context_user?: ?User,
+     *     at?: \DateTimeImmutable,
+     *     days?: int,
+     * } $options
+     *
+     * @return array<string, array{int, int}>
+     */
+    public function countLinksPerSource(array $options = []): array
+    {
+        return Link::countByStreamPerSource($this, $options);
+    }
+
     /**
      * Return a tag URI that can be used as Atom id
      *