From 8cb53ceba279cc8d53c75dea2a6f98164b6ea2b1 Mon Sep 17 00:00:00 2001
From: Kenneth SOARES <kensoares@gmail.com>
Date: Mon, 17 Feb 2025 14:57:00 +0100
Subject: [PATCH 01/12] download button for user pictures and albums

---
 core/static/bundled/user/pictures-index.js  | 15 ++++++++++++---
 core/templates/core/download_pictures.jinja | 13 +++++++++++++
 core/templates/core/user_pictures.jinja     | 17 ++++-------------
 sas/templates/sas/album.jinja               | 11 +++++++++--
 4 files changed, 38 insertions(+), 18 deletions(-)
 create mode 100644 core/templates/core/download_pictures.jinja

diff --git a/core/static/bundled/user/pictures-index.js b/core/static/bundled/user/pictures-index.js
index 68f08d25..5ee95b90 100644
--- a/core/static/bundled/user/pictures-index.js
+++ b/core/static/bundled/user/pictures-index.js
@@ -30,7 +30,8 @@ import { picturesFetchPictures } from "#openapi";
 
 /**
  * @typedef PicturePageConfig
- * @property {number} userId Id of the user to get the pictures from
+ * @property {number} userId Id of the user to get the pictures from (optional if albumId defined)
+ * @property {number} albumId Id of the album to get the pictures from (optinal if userId defined)
  **/
 
 /**
@@ -46,9 +47,17 @@ window.loadPicturePage = (config) => {
       albums: {},
 
       async init() {
-        this.pictures = await paginated(picturesFetchPictures, {
+        let query = {};
+
+        if (config.userId) {
           // biome-ignore lint/style/useNamingConvention: api is in snake_case
-          query: { users_identified: [config.userId] },
+          query = { users_identified: [config.userId] };
+        } else {
+          // biome-ignore lint/style/useNamingConvention: api is in snake_case
+          query = { album_id: config.albumId };
+        }
+        this.pictures = await paginated(picturesFetchPictures, {
+          query,
         });
         this.albums = this.pictures.reduce((acc, picture) => {
           if (!acc[picture.album]) {
diff --git a/core/templates/core/download_pictures.jinja b/core/templates/core/download_pictures.jinja
new file mode 100644
index 00000000..d66c0063
--- /dev/null
+++ b/core/templates/core/download_pictures.jinja
@@ -0,0 +1,13 @@
+{% macro download_button() %}
+<div x-show="pictures.length > 0" x-cloak>
+<button
+  :disabled="isDownloading"
+  class="btn btn-blue"
+  @click="downloadZip()"
+>
+  <i class="fa fa-download"></i>
+  {% trans %}Download all pictures{% endtrans %}
+</button>
+<progress x-ref="progress" x-show="isDownloading"></progress>
+</div>
+{% endmacro %}
diff --git a/core/templates/core/user_pictures.jinja b/core/templates/core/user_pictures.jinja
index a06ea757..2cd17b93 100644
--- a/core/templates/core/user_pictures.jinja
+++ b/core/templates/core/user_pictures.jinja
@@ -1,4 +1,5 @@
 {% extends "core/base.jinja" %}
+{% from "core/download_pictures.jinja" import download_button %}
 
 {%- block additional_css -%}
   <link rel="stylesheet" href="{{ static('sas/css/album.scss') }}">
@@ -14,19 +15,9 @@
 
 {% block content %}
   <main x-data="user_pictures">
-    {% if user.id == object.id %}
-      <div x-show="pictures.length > 0" x-cloak>
-        <button
-          :disabled="isDownloading"
-          class="btn btn-blue"
-          @click="downloadZip()"
-        >
-          <i class="fa fa-download"></i>
-          {% trans %}Download all my pictures{% endtrans %}
-        </button>
-        <progress x-ref="progress" x-show="isDownloading"></progress>
-      </div>
-    {% endif %}
+  {% if user.id == object.id %}
+    {{ download_button() }}
+  {% endif %}
 
     <template x-for="[album, pictures] in Object.entries(albums)" x-cloak>
       <section>
diff --git a/sas/templates/sas/album.jinja b/sas/templates/sas/album.jinja
index 70aa79df..602ccd1f 100644
--- a/sas/templates/sas/album.jinja
+++ b/sas/templates/sas/album.jinja
@@ -1,5 +1,6 @@
 {% extends "core/base.jinja" %}
 {% from 'core/macros.jinja' import paginate_alpine %}
+{% from "core/download_pictures.jinja" import download_button %}
 
 {%- block additional_css -%}
   <link rel="stylesheet" href="{{ static('sas/css/album.scss') }}">
@@ -7,6 +8,7 @@
 
 {%- block additional_js -%}
   <script type="module" src="{{ static('bundled/sas/album-index.js') }}"></script>
+  <script type="module" src="{{ static('bundled/user/pictures-index.js') }}"></script>
 {%- endblock -%}
 
 {% block title %}
@@ -27,7 +29,6 @@
   {% if is_sas_admin %}
     <form action="" method="post" enctype="multipart/form-data">
       {% csrf_token %}
-
       <div class="album-navbar">
         <h3>{{ album.get_display_name() }}</h3>
 
@@ -63,6 +64,10 @@
     <br>
   {% endif %}
 
+  <div x-data="user_pictures">
+      {{ download_button() }}
+  </div>
+
   <div x-data="pictures">
     <h4>{% trans %}Pictures{% endtrans %}</h4>
     <div class="photos" :aria-busy="loading">
@@ -117,6 +122,9 @@
         albumId: {{ album.id }},
         maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }},
       });
+
+      loadPicturePage({ albumId: {{ album.id }} })
+
     });
 
     // Todo: migrate to alpine.js if we have some time
@@ -225,6 +233,5 @@
       }
     });
   </script>
-
 {% endblock %}
 

From 86c68eeb32c2ccfa05d33c85db650b67de43422f Mon Sep 17 00:00:00 2001
From: Kenneth SOARES <kensoares@gmail.com>
Date: Mon, 17 Feb 2025 15:13:38 +0100
Subject: [PATCH 02/12] fix indenting

---
 core/templates/core/download_pictures.jinja | 22 ++++++++++-----------
 core/templates/core/user_pictures.jinja     |  6 +++---
 sas/templates/sas/album.jinja               |  2 +-
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/core/templates/core/download_pictures.jinja b/core/templates/core/download_pictures.jinja
index d66c0063..3b4520af 100644
--- a/core/templates/core/download_pictures.jinja
+++ b/core/templates/core/download_pictures.jinja
@@ -1,13 +1,13 @@
 {% macro download_button() %}
-<div x-show="pictures.length > 0" x-cloak>
-<button
-  :disabled="isDownloading"
-  class="btn btn-blue"
-  @click="downloadZip()"
->
-  <i class="fa fa-download"></i>
-  {% trans %}Download all pictures{% endtrans %}
-</button>
-<progress x-ref="progress" x-show="isDownloading"></progress>
-</div>
+  <div x-show="pictures.length > 0" x-cloak>
+    <button
+      :disabled="isDownloading"
+      class="btn btn-blue"
+      @click="downloadZip()"
+    >
+      <i class="fa fa-download"></i>
+      {% trans %}Download all pictures{% endtrans %}
+    </button>
+    <progress x-ref="progress" x-show="isDownloading"></progress>
+  </div>
 {% endmacro %}
diff --git a/core/templates/core/user_pictures.jinja b/core/templates/core/user_pictures.jinja
index 2cd17b93..7f1d6f0b 100644
--- a/core/templates/core/user_pictures.jinja
+++ b/core/templates/core/user_pictures.jinja
@@ -15,9 +15,9 @@
 
 {% block content %}
   <main x-data="user_pictures">
-  {% if user.id == object.id %}
-    {{ download_button() }}
-  {% endif %}
+    {% if user.id == object.id %}
+      {{ download_button() }}
+    {% endif %}
 
     <template x-for="[album, pictures] in Object.entries(albums)" x-cloak>
       <section>
diff --git a/sas/templates/sas/album.jinja b/sas/templates/sas/album.jinja
index 602ccd1f..d1b32e95 100644
--- a/sas/templates/sas/album.jinja
+++ b/sas/templates/sas/album.jinja
@@ -65,7 +65,7 @@
   {% endif %}
 
   <div x-data="user_pictures">
-      {{ download_button() }}
+    {{ download_button() }}
   </div>
 
   <div x-data="pictures">

From 2bed89aaba88860476728536e9a2e000c9132675 Mon Sep 17 00:00:00 2001
From: Kenneth SOARES <kensoares@gmail.com>
Date: Mon, 17 Feb 2025 16:47:30 +0100
Subject: [PATCH 03/12] typescriptification de picture-index et bonne
 instantiation alpine-data

---
 core/static/bundled/user/pictures-index.js | 110 --------------------
 core/static/bundled/user/pictures-index.ts | 111 +++++++++++++++++++++
 core/templates/core/user_pictures.jinja    |   2 +-
 sas/templates/sas/album.jinja              |   4 +-
 4 files changed, 114 insertions(+), 113 deletions(-)
 delete mode 100644 core/static/bundled/user/pictures-index.js
 create mode 100644 core/static/bundled/user/pictures-index.ts

diff --git a/core/static/bundled/user/pictures-index.js b/core/static/bundled/user/pictures-index.js
deleted file mode 100644
index 5ee95b90..00000000
--- a/core/static/bundled/user/pictures-index.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import { paginated } from "#core:utils/api";
-import { HttpReader, ZipWriter } from "@zip.js/zip.js";
-import { showSaveFilePicker } from "native-file-system-adapter";
-import { picturesFetchPictures } from "#openapi";
-
-/**
- * @typedef UserProfile
- * @property {number} id
- * @property {string} first_name
- * @property {string} last_name
- * @property {string} nick_name
- * @property {string} display_name
- * @property {string} profile_url
- * @property {string} profile_pict
- */
-/**
- * @typedef Picture
- * @property {number} id
- * @property {string} name
- * @property {number} size
- * @property {string} date
- * @property {UserProfile} owner
- * @property {string} full_size_url
- * @property {string} compressed_url
- * @property {string} thumb_url
- * @property {string} album
- * @property {boolean} is_moderated
- * @property {boolean} asked_for_removal
- */
-
-/**
- * @typedef PicturePageConfig
- * @property {number} userId Id of the user to get the pictures from (optional if albumId defined)
- * @property {number} albumId Id of the album to get the pictures from (optinal if userId defined)
- **/
-
-/**
- * Load user picture page with a nice download bar
- * @param {PicturePageConfig} config
- **/
-window.loadPicturePage = (config) => {
-  document.addEventListener("alpine:init", () => {
-    Alpine.data("user_pictures", () => ({
-      isDownloading: false,
-      loading: true,
-      pictures: [],
-      albums: {},
-
-      async init() {
-        let query = {};
-
-        if (config.userId) {
-          // biome-ignore lint/style/useNamingConvention: api is in snake_case
-          query = { users_identified: [config.userId] };
-        } else {
-          // biome-ignore lint/style/useNamingConvention: api is in snake_case
-          query = { album_id: config.albumId };
-        }
-        this.pictures = await paginated(picturesFetchPictures, {
-          query,
-        });
-        this.albums = this.pictures.reduce((acc, picture) => {
-          if (!acc[picture.album]) {
-            acc[picture.album] = [];
-          }
-          acc[picture.album].push(picture);
-          return acc;
-        }, {});
-        this.loading = false;
-      },
-
-      async downloadZip() {
-        this.isDownloading = true;
-        const bar = this.$refs.progress;
-        bar.value = 0;
-        bar.max = this.pictures.length;
-
-        const incrementProgressBar = () => {
-          bar.value++;
-        };
-
-        const fileHandle = await showSaveFilePicker({
-          _preferPolyfill: false,
-          suggestedName: interpolate(
-            gettext("pictures.%(extension)s"),
-            { extension: "zip" },
-            true,
-          ),
-          types: {},
-          excludeAcceptAllOption: false,
-        });
-        const zipWriter = new ZipWriter(await fileHandle.createWritable());
-
-        await Promise.all(
-          this.pictures.map((p) => {
-            const imgName = `${p.album}/IMG_${p.date.replaceAll(/[:\-]/g, "_")}${p.name.slice(p.name.lastIndexOf("."))}`;
-            return zipWriter.add(imgName, new HttpReader(p.full_size_url), {
-              level: 9,
-              lastModDate: new Date(p.date),
-              onstart: incrementProgressBar,
-            });
-          }),
-        );
-
-        await zipWriter.close();
-        this.isDownloading = false;
-      },
-    }));
-  });
-};
diff --git a/core/static/bundled/user/pictures-index.ts b/core/static/bundled/user/pictures-index.ts
new file mode 100644
index 00000000..34140323
--- /dev/null
+++ b/core/static/bundled/user/pictures-index.ts
@@ -0,0 +1,111 @@
+import { paginated } from "#core:utils/api";
+import { HttpReader, ZipWriter } from "@zip.js/zip.js";
+import { showSaveFilePicker } from "native-file-system-adapter";
+import { picturesFetchPictures } from "#openapi";
+
+/**
+ * @typedef UserProfile
+ * @property {number} id
+ * @property {string} first_name
+ * @property {string} last_name
+ * @property {string} nick_name
+ * @property {string} display_name
+ * @property {string} profile_url
+ * @property {string} profile_pict
+ */
+/**
+ * @typedef Picture
+ * @property {number} id
+ * @property {string} name
+ * @property {number} size
+ * @property {string} date
+ * @property {UserProfile} owner
+ * @property {string} full_size_url
+ * @property {string} compressed_url
+ * @property {string} thumb_url
+ * @property {string} album
+ * @property {boolean} is_moderated
+ * @property {boolean} asked_for_removal
+ */
+
+/**
+ * @typedef PicturePageConfig
+ * @property {number} userId Id of the user to get the pictures from (optional if albumId defined)
+ * @property {number} albumId Id of the album to get the pictures from (optinal if userId defined)
+ **/
+
+/**
+ * Load user picture page with a nice download bar
+ * @param {PicturePageConfig} config
+ **/
+
+interface PagePictureConfig {
+  userId?: number;
+  albumId?: number;
+}
+
+document.addEventListener("alpine:init", () => {
+  Alpine.data("user_pictures", (config: PagePictureConfig) => ({
+    isDownloading: false,
+    loading: true,
+    pictures: [],
+    albums: {},
+
+    async init() {
+      const query: Record<string, number> = {};
+
+      if (config.userId) {
+        query.user_identified = config.userId;
+      } else {
+        query.album_id = config.albumId;
+      }
+      this.pictures = await paginated(picturesFetchPictures, { query: query });
+
+      this.albums = this.pictures.reduce((acc, picture) => {
+        if (!acc[picture.album]) {
+          acc[picture.album] = [];
+        }
+        acc[picture.album].push(picture);
+        return acc;
+      }, {});
+      this.loading = false;
+    },
+
+    async downloadZip() {
+      this.isDownloading = true;
+      const bar = this.$refs.progress;
+      bar.value = 0;
+      bar.max = this.pictures.length;
+
+      const incrementProgressBar = () => {
+        bar.value++;
+      };
+
+      const fileHandle = await showSaveFilePicker({
+        _preferPolyfill: false,
+        suggestedName: interpolate(
+          gettext("pictures.%(extension)s"),
+          { extension: "zip" },
+          true,
+        ),
+        types: {},
+        excludeAcceptAllOption: false,
+      });
+      const zipWriter = new ZipWriter(await fileHandle.createWritable());
+
+      await Promise.all(
+        this.pictures.map((p) => {
+          const imgName = `${p.album}/IMG_${p.date.replaceAll(/[:\-]/g, "_")}${p.name.slice(p.name.lastIndexOf("."))}`;
+          return zipWriter.add(imgName, new HttpReader(p.full_size_url), {
+            level: 9,
+            lastModDate: new Date(p.date),
+            onstart: incrementProgressBar,
+          });
+        }),
+      );
+
+      await zipWriter.close();
+      this.isDownloading = false;
+    },
+  }));
+});
diff --git a/core/templates/core/user_pictures.jinja b/core/templates/core/user_pictures.jinja
index 7f1d6f0b..e5fd36ce 100644
--- a/core/templates/core/user_pictures.jinja
+++ b/core/templates/core/user_pictures.jinja
@@ -6,7 +6,7 @@
 {%- endblock -%}
 
 {% block additional_js %}
-  <script type="module" src="{{ static('bundled/user/pictures-index.js') }}"></script>
+  <script type="module" src="{{ static('bundled/user/pictures-index.ts') }}"></script>
 {% endblock %}
 
 {% block title %}
diff --git a/sas/templates/sas/album.jinja b/sas/templates/sas/album.jinja
index d1b32e95..f1fc565d 100644
--- a/sas/templates/sas/album.jinja
+++ b/sas/templates/sas/album.jinja
@@ -8,7 +8,7 @@
 
 {%- block additional_js -%}
   <script type="module" src="{{ static('bundled/sas/album-index.js') }}"></script>
-  <script type="module" src="{{ static('bundled/user/pictures-index.js') }}"></script>
+  <script type="module" src="{{ static('bundled/user/pictures-index.ts') }}"></script>
 {%- endblock -%}
 
 {% block title %}
@@ -64,7 +64,7 @@
     <br>
   {% endif %}
 
-  <div x-data="user_pictures">
+  <div x-data="user_pictures({ albumId: {{ album.id }} })">
     {{ download_button() }}
   </div>
 

From b1db52d2b6b2ffad097490074cc0ff2457239d37 Mon Sep 17 00:00:00 2001
From: Kenneth SOARES <kensoares@gmail.com>
Date: Mon, 17 Feb 2025 17:51:42 +0100
Subject: [PATCH 04/12] clean typescript

---
 core/static/bundled/user/pictures-index.ts | 75 +++++++---------------
 core/templates/core/user_pictures.jinja    |  8 +--
 sas/templates/sas/album.jinja              |  3 -
 3 files changed, 24 insertions(+), 62 deletions(-)

diff --git a/core/static/bundled/user/pictures-index.ts b/core/static/bundled/user/pictures-index.ts
index 34140323..64af694d 100644
--- a/core/static/bundled/user/pictures-index.ts
+++ b/core/static/bundled/user/pictures-index.ts
@@ -1,43 +1,11 @@
 import { paginated } from "#core:utils/api";
 import { HttpReader, ZipWriter } from "@zip.js/zip.js";
 import { showSaveFilePicker } from "native-file-system-adapter";
-import { picturesFetchPictures } from "#openapi";
-
-/**
- * @typedef UserProfile
- * @property {number} id
- * @property {string} first_name
- * @property {string} last_name
- * @property {string} nick_name
- * @property {string} display_name
- * @property {string} profile_url
- * @property {string} profile_pict
- */
-/**
- * @typedef Picture
- * @property {number} id
- * @property {string} name
- * @property {number} size
- * @property {string} date
- * @property {UserProfile} owner
- * @property {string} full_size_url
- * @property {string} compressed_url
- * @property {string} thumb_url
- * @property {string} album
- * @property {boolean} is_moderated
- * @property {boolean} asked_for_removal
- */
-
-/**
- * @typedef PicturePageConfig
- * @property {number} userId Id of the user to get the pictures from (optional if albumId defined)
- * @property {number} albumId Id of the album to get the pictures from (optinal if userId defined)
- **/
-
-/**
- * Load user picture page with a nice download bar
- * @param {PicturePageConfig} config
- **/
+import {
+  type PicturesFetchPicturesData,
+  type PictureSchema,
+  picturesFetchPictures,
+} from "#openapi";
 
 interface PagePictureConfig {
   userId?: number;
@@ -48,26 +16,29 @@ document.addEventListener("alpine:init", () => {
   Alpine.data("user_pictures", (config: PagePictureConfig) => ({
     isDownloading: false,
     loading: true,
-    pictures: [],
-    albums: {},
+    pictures: [] as PictureSchema[],
+    albums: {} as Record<string, PictureSchema[]>,
 
     async init() {
-      const query: Record<string, number> = {};
+      const query: PicturesFetchPicturesData["query"] = {};
 
       if (config.userId) {
-        query.user_identified = config.userId;
+        query.users_identified = [config.userId];
       } else {
         query.album_id = config.albumId;
       }
       this.pictures = await paginated(picturesFetchPictures, { query: query });
 
-      this.albums = this.pictures.reduce((acc, picture) => {
-        if (!acc[picture.album]) {
-          acc[picture.album] = [];
-        }
-        acc[picture.album].push(picture);
-        return acc;
-      }, {});
+      this.albums = this.pictures.reduce(
+        (acc: Record<string, PictureSchema[]>, picture: PictureSchema) => {
+          if (!acc[picture.album]) {
+            acc[picture.album] = [];
+          }
+          acc[picture.album].push(picture);
+          return acc;
+        },
+        {},
+      );
       this.loading = false;
     },
 
@@ -77,8 +48,9 @@ document.addEventListener("alpine:init", () => {
       bar.value = 0;
       bar.max = this.pictures.length;
 
-      const incrementProgressBar = () => {
+      const incrementProgressBar = (_total: number): undefined => {
         bar.value++;
+        return undefined;
       };
 
       const fileHandle = await showSaveFilePicker({
@@ -88,14 +60,13 @@ document.addEventListener("alpine:init", () => {
           { extension: "zip" },
           true,
         ),
-        types: {},
         excludeAcceptAllOption: false,
       });
       const zipWriter = new ZipWriter(await fileHandle.createWritable());
 
       await Promise.all(
-        this.pictures.map((p) => {
-          const imgName = `${p.album}/IMG_${p.date.replaceAll(/[:\-]/g, "_")}${p.name.slice(p.name.lastIndexOf("."))}`;
+        this.pictures.map((p: PictureSchema) => {
+          const imgName = `${p.album}/IMG_${p.date.replace(/[:\-]/g, "_")}${p.name.slice(p.name.lastIndexOf("."))}`;
           return zipWriter.add(imgName, new HttpReader(p.full_size_url), {
             level: 9,
             lastModDate: new Date(p.date),
diff --git a/core/templates/core/user_pictures.jinja b/core/templates/core/user_pictures.jinja
index e5fd36ce..c51d2f0e 100644
--- a/core/templates/core/user_pictures.jinja
+++ b/core/templates/core/user_pictures.jinja
@@ -14,7 +14,7 @@
 {% endblock %}
 
 {% block content %}
-  <main x-data="user_pictures">
+  <main x-data="user_pictures({ userId: {{ object.id }} })">
     {% if user.id == object.id %}
       {{ download_button() }}
     {% endif %}
@@ -49,11 +49,5 @@
 {% endblock content %}
 
 {% block script %}
-
   {{ super() }}
-  <script>
-    window.addEventListener("DOMContentLoaded", () => {
-      loadPicturePage({ userId: {{ object.id }} });
-    })
-  </script>
 {% endblock script %}
diff --git a/sas/templates/sas/album.jinja b/sas/templates/sas/album.jinja
index f1fc565d..07c0836b 100644
--- a/sas/templates/sas/album.jinja
+++ b/sas/templates/sas/album.jinja
@@ -122,9 +122,6 @@
         albumId: {{ album.id }},
         maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }},
       });
-
-      loadPicturePage({ albumId: {{ album.id }} })
-
     });
 
     // Todo: migrate to alpine.js if we have some time

From ba21738bd938a6475d194bd81241d6330562ea77 Mon Sep 17 00:00:00 2001
From: Kenneth SOARES <kensoares@gmail.com>
Date: Mon, 17 Feb 2025 17:56:22 +0100
Subject: [PATCH 05/12] biome reformat

---
 core/static/bundled/user/pictures-index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/static/bundled/user/pictures-index.ts b/core/static/bundled/user/pictures-index.ts
index 64af694d..8b5ecda5 100644
--- a/core/static/bundled/user/pictures-index.ts
+++ b/core/static/bundled/user/pictures-index.ts
@@ -2,8 +2,8 @@ import { paginated } from "#core:utils/api";
 import { HttpReader, ZipWriter } from "@zip.js/zip.js";
 import { showSaveFilePicker } from "native-file-system-adapter";
 import {
-  type PicturesFetchPicturesData,
   type PictureSchema,
+  type PicturesFetchPicturesData,
   picturesFetchPictures,
 } from "#openapi";
 

From e46cba7a06613192ba920b20046300ebd735489c Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Tue, 18 Feb 2025 20:10:51 +0100
Subject: [PATCH 06/12] Move all user picture logic to sas

---
 core/tests/test_files.py                      | 34 -------------------
 core/urls.py                                  |  4 ---
 core/views/user.py                            | 12 +------
 sas/api.py                                    |  2 +-
 .../bundled/sas}/user/pictures-index.ts       |  0
 sas/templates/sas/album.jinja                 |  4 +--
 .../templates/sas}/download_pictures.jinja    |  0
 .../templates/sas}/user_pictures.jinja        |  4 +--
 sas/tests/test_views.py                       | 34 +++++++++++++++++++
 sas/urls.py                                   |  4 +++
 sas/views.py                                  | 11 ++++++
 11 files changed, 55 insertions(+), 54 deletions(-)
 rename {core/static/bundled => sas/static/bundled/sas}/user/pictures-index.ts (100%)
 rename {core/templates/core => sas/templates/sas}/download_pictures.jinja (100%)
 rename {core/templates/core => sas/templates/sas}/user_pictures.jinja (90%)

diff --git a/core/tests/test_files.py b/core/tests/test_files.py
index 998ceab5..2f86507a 100644
--- a/core/tests/test_files.py
+++ b/core/tests/test_files.py
@@ -64,40 +64,6 @@ class TestImageAccess:
         assert not picture.is_owned_by(user)
 
 
-@pytest.mark.django_db
-class TestUserPicture:
-    def test_anonymous_user_unauthorized(self, client):
-        """An anonymous user shouldn't have access to an user's photo page."""
-        response = client.get(
-            reverse(
-                "core:user_pictures",
-                kwargs={"user_id": User.objects.get(username="sli").pk},
-            )
-        )
-        assert response.status_code == 403
-
-    @pytest.mark.parametrize(
-        ("username", "status"),
-        [
-            ("guy", 403),
-            ("root", 200),
-            ("skia", 200),
-            ("sli", 200),
-        ],
-    )
-    def test_page_is_working(self, client, username, status):
-        """Only user that subscribed (or admins) should be able to see the page."""
-        # Test for simple user
-        client.force_login(User.objects.get(username=username))
-        response = client.get(
-            reverse(
-                "core:user_pictures",
-                kwargs={"user_id": User.objects.get(username="sli").pk},
-            )
-        )
-        assert response.status_code == status
-
-
 # TODO: many tests on the pages:
 #   - renaming a page
 #   - changing a page's parent --> check that page's children's full_name
diff --git a/core/urls.py b/core/urls.py
index a3b4f7d8..5a758d4e 100644
--- a/core/urls.py
+++ b/core/urls.py
@@ -68,7 +68,6 @@ from core.views import (
     UserGodfathersView,
     UserListView,
     UserMiniView,
-    UserPicturesView,
     UserPreferencesView,
     UserStatsView,
     UserToolsView,
@@ -143,9 +142,6 @@ urlpatterns = [
     path("user/", UserListView.as_view(), name="user_list"),
     path("user/<int:user_id>/mini/", UserMiniView.as_view(), name="user_profile_mini"),
     path("user/<int:user_id>/", UserView.as_view(), name="user_profile"),
-    path(
-        "user/<int:user_id>/pictures/", UserPicturesView.as_view(), name="user_pictures"
-    ),
     path(
         "user/<int:user_id>/godfathers/",
         UserGodfathersView.as_view(),
diff --git a/core/views/user.py b/core/views/user.py
index d742a6f5..8e7b092c 100644
--- a/core/views/user.py
+++ b/core/views/user.py
@@ -200,7 +200,7 @@ class UserTabsMixin(TabedViewMixin):
                 "name": _("Family"),
             },
             {
-                "url": reverse("core:user_pictures", kwargs={"user_id": user.id}),
+                "url": reverse("sas:user_pictures", kwargs={"user_id": user.id}),
                 "slug": "pictures",
                 "name": _("Pictures"),
             },
@@ -297,16 +297,6 @@ class UserView(UserTabsMixin, CanViewMixin, DetailView):
         return kwargs
 
 
-class UserPicturesView(UserTabsMixin, CanViewMixin, DetailView):
-    """Display a user's pictures."""
-
-    model = User
-    pk_url_kwarg = "user_id"
-    context_object_name = "profile"
-    template_name = "core/user_pictures.jinja"
-    current_tab = "pictures"
-
-
 def delete_user_godfather(request, user_id, godfather_id, is_father):
     user_is_admin = request.user.is_root or request.user.is_board_member
     if user_id != request.user.id and not user_is_admin:
diff --git a/sas/api.py b/sas/api.py
index 96bafb87..11355de5 100644
--- a/sas/api.py
+++ b/sas/api.py
@@ -104,7 +104,7 @@ class PicturesController(ControllerBase):
                 viewed=False,
                 type="NEW_PICTURES",
                 defaults={
-                    "url": reverse("core:user_pictures", kwargs={"user_id": u.id})
+                    "url": reverse("sas:user_pictures", kwargs={"user_id": u.id})
                 },
             )
 
diff --git a/core/static/bundled/user/pictures-index.ts b/sas/static/bundled/sas/user/pictures-index.ts
similarity index 100%
rename from core/static/bundled/user/pictures-index.ts
rename to sas/static/bundled/sas/user/pictures-index.ts
diff --git a/sas/templates/sas/album.jinja b/sas/templates/sas/album.jinja
index 07c0836b..fa2592e8 100644
--- a/sas/templates/sas/album.jinja
+++ b/sas/templates/sas/album.jinja
@@ -1,6 +1,6 @@
 {% extends "core/base.jinja" %}
 {% from 'core/macros.jinja' import paginate_alpine %}
-{% from "core/download_pictures.jinja" import download_button %}
+{% from "sas/download_pictures.jinja" import download_button %}
 
 {%- block additional_css -%}
   <link rel="stylesheet" href="{{ static('sas/css/album.scss') }}">
@@ -8,7 +8,7 @@
 
 {%- block additional_js -%}
   <script type="module" src="{{ static('bundled/sas/album-index.js') }}"></script>
-  <script type="module" src="{{ static('bundled/user/pictures-index.ts') }}"></script>
+  <script type="module" src="{{ static('bundled/sas/user/pictures-index.ts') }}"></script>
 {%- endblock -%}
 
 {% block title %}
diff --git a/core/templates/core/download_pictures.jinja b/sas/templates/sas/download_pictures.jinja
similarity index 100%
rename from core/templates/core/download_pictures.jinja
rename to sas/templates/sas/download_pictures.jinja
diff --git a/core/templates/core/user_pictures.jinja b/sas/templates/sas/user_pictures.jinja
similarity index 90%
rename from core/templates/core/user_pictures.jinja
rename to sas/templates/sas/user_pictures.jinja
index c51d2f0e..1d7655b2 100644
--- a/core/templates/core/user_pictures.jinja
+++ b/sas/templates/sas/user_pictures.jinja
@@ -1,12 +1,12 @@
 {% extends "core/base.jinja" %}
-{% from "core/download_pictures.jinja" import download_button %}
+{% from "sas/download_pictures.jinja" import download_button %}
 
 {%- block additional_css -%}
   <link rel="stylesheet" href="{{ static('sas/css/album.scss') }}">
 {%- endblock -%}
 
 {% block additional_js %}
-  <script type="module" src="{{ static('bundled/user/pictures-index.ts') }}"></script>
+  <script type="module" src="{{ static('bundled/sas/user/pictures-index.ts') }}"></script>
 {% endblock %}
 
 {% block title %}
diff --git a/sas/tests/test_views.py b/sas/tests/test_views.py
index ff8dd21d..a689c326 100644
--- a/sas/tests/test_views.py
+++ b/sas/tests/test_views.py
@@ -171,3 +171,37 @@ class TestSasModeration(TestCase):
             "Vous avez déjà déposé une demande de retrait pour cette photo.</li></ul>",
             res.content.decode(),
         )
+
+
+@pytest.mark.django_db
+class TestUserPicture:
+    def test_anonymous_user_unauthorized(self, client):
+        """An anonymous user shouldn't have access to an user's photo page."""
+        response = client.get(
+            reverse(
+                "sas:user_pictures",
+                kwargs={"user_id": User.objects.get(username="sli").pk},
+            )
+        )
+        assert response.status_code == 403
+
+    @pytest.mark.parametrize(
+        ("username", "status"),
+        [
+            ("guy", 403),
+            ("root", 200),
+            ("skia", 200),
+            ("sli", 200),
+        ],
+    )
+    def test_page_is_working(self, client, username, status):
+        """Only user that subscribed (or admins) should be able to see the page."""
+        # Test for simple user
+        client.force_login(User.objects.get(username=username))
+        response = client.get(
+            reverse(
+                "sas:user_pictures",
+                kwargs={"user_id": User.objects.get(username="sli").pk},
+            )
+        )
+        assert response.status_code == status
diff --git a/sas/urls.py b/sas/urls.py
index 01bc2384..5fb57ccf 100644
--- a/sas/urls.py
+++ b/sas/urls.py
@@ -24,6 +24,7 @@ from sas.views import (
     PictureEditView,
     PictureView,
     SASMainView,
+    UserPicturesView,
     send_album,
     send_compressed,
     send_pict,
@@ -55,4 +56,7 @@ urlpatterns = [
         name="download_compressed",
     ),
     path("picture/<int:picture_id>/download/thumb/", send_thumb, name="download_thumb"),
+    path(
+        "user/<int:user_id>/pictures/", UserPicturesView.as_view(), name="user_pictures"
+    ),
 ]
diff --git a/sas/views.py b/sas/views.py
index 7c8c8ea2..7d7740cb 100644
--- a/sas/views.py
+++ b/sas/views.py
@@ -26,6 +26,7 @@ from django.views.generic.edit import FormMixin, FormView, UpdateView
 from core.auth.mixins import CanEditMixin, CanViewMixin
 from core.models import SithFile, User
 from core.views.files import FileView, send_file
+from core.views.user import UserTabsMixin
 from sas.forms import (
     AlbumEditForm,
     PictureEditForm,
@@ -193,6 +194,16 @@ class AlbumView(CanViewMixin, DetailView, FormMixin):
         return kwargs
 
 
+class UserPicturesView(UserTabsMixin, CanViewMixin, DetailView):
+    """Display a user's pictures."""
+
+    model = User
+    pk_url_kwarg = "user_id"
+    context_object_name = "profile"
+    template_name = "sas/user_pictures.jinja"
+    current_tab = "pictures"
+
+
 # Admin views
 
 

From 93a5c3a02ae9ae9fe34c97c12765b44eb62c3cb5 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Tue, 18 Feb 2025 13:54:48 +0100
Subject: [PATCH 07/12] Separate album downloading logic from user display.
 Allow downloading individual user albums.

---
 sas/static/bundled/sas/album-index.js         | 59 -------------------
 sas/static/bundled/sas/album-index.ts         | 52 ++++++++++++++++
 .../bundled/sas/pictures-download-index.ts    | 46 +++++++++++++++
 sas/static/bundled/sas/user/pictures-index.ts | 57 +++---------------
 sas/templates/sas/album.jinja                 | 25 ++++----
 sas/templates/sas/download_pictures.jinja     | 39 ++++++++----
 sas/templates/sas/user_pictures.jinja         | 16 ++---
 7 files changed, 152 insertions(+), 142 deletions(-)
 delete mode 100644 sas/static/bundled/sas/album-index.js
 create mode 100644 sas/static/bundled/sas/album-index.ts
 create mode 100644 sas/static/bundled/sas/pictures-download-index.ts

diff --git a/sas/static/bundled/sas/album-index.js b/sas/static/bundled/sas/album-index.js
deleted file mode 100644
index f09fa6b2..00000000
--- a/sas/static/bundled/sas/album-index.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { History, initialUrlParams, updateQueryString } from "#core:utils/history";
-import { picturesFetchPictures } from "#openapi";
-
-/**
- * @typedef AlbumConfig
- * @property {number} albumId id of the album to visualize
- * @property {number} maxPageSize maximum number of elements to show on a page
- **/
-
-/**
- * Create a family graph of an user
- * @param {AlbumConfig} config
- **/
-window.loadAlbum = (config) => {
-  document.addEventListener("alpine:init", () => {
-    Alpine.data("pictures", () => ({
-      pictures: {},
-      page: Number.parseInt(initialUrlParams.get("page")) || 1,
-      pushstate: History.Push /* Used to avoid pushing a state on a back action */,
-      loading: false,
-
-      async init() {
-        await this.fetchPictures();
-        this.$watch("page", () => {
-          updateQueryString("page", this.page === 1 ? null : this.page, this.pushstate);
-          this.pushstate = History.Push;
-          this.fetchPictures();
-        });
-
-        window.addEventListener("popstate", () => {
-          this.pushstate = History.Replace;
-          this.page =
-            Number.parseInt(new URLSearchParams(window.location.search).get("page")) ||
-            1;
-        });
-      },
-
-      async fetchPictures() {
-        this.loading = true;
-        this.pictures = (
-          await picturesFetchPictures({
-            query: {
-              // biome-ignore lint/style/useNamingConvention: API is in snake_case
-              album_id: config.albumId,
-              page: this.page,
-              // biome-ignore lint/style/useNamingConvention: API is in snake_case
-              page_size: config.maxPageSize,
-            },
-          })
-        ).data;
-        this.loading = false;
-      },
-
-      nbPages() {
-        return Math.ceil(this.pictures.count / config.maxPageSize);
-      },
-    }));
-  });
-};
diff --git a/sas/static/bundled/sas/album-index.ts b/sas/static/bundled/sas/album-index.ts
new file mode 100644
index 00000000..8f0b119f
--- /dev/null
+++ b/sas/static/bundled/sas/album-index.ts
@@ -0,0 +1,52 @@
+import { paginated } from "#core:utils/api";
+import { History, initialUrlParams, updateQueryString } from "#core:utils/history";
+import {
+  type PictureSchema,
+  type PicturesFetchPicturesData,
+  picturesFetchPictures,
+} from "#openapi";
+
+interface AlbumConfig {
+  albumId: number;
+  maxPageSize: number;
+}
+
+document.addEventListener("alpine:init", () => {
+  Alpine.data("pictures", (config: AlbumConfig) => ({
+    pictures: [] as PictureSchema[],
+    page: Number.parseInt(initialUrlParams.get("page")) || 1,
+    pushstate: History.Push /* Used to avoid pushing a state on a back action */,
+    loading: false,
+    config: {} as AlbumConfig,
+
+    async init() {
+      await this.fetchPictures();
+      this.$watch("page", () => {
+        updateQueryString("page", this.page === 1 ? null : this.page, this.pushstate);
+        this.pushstate = History.Push;
+      });
+
+      window.addEventListener("popstate", () => {
+        this.pushstate = History.Replace;
+        this.page =
+          Number.parseInt(new URLSearchParams(window.location.search).get("page")) || 1;
+      });
+      this.config = config;
+    },
+
+    async fetchPictures() {
+      this.loading = true;
+      this.pictures = await paginated(picturesFetchPictures, {
+        query: {
+          // biome-ignore lint/style/useNamingConvention: API is in snake_case
+          album_id: config.albumId,
+        } as PicturesFetchPicturesData["query"],
+      });
+      this.loading = false;
+    },
+
+    nbPages() {
+      return Math.ceil(this.pictures.length / config.maxPageSize);
+    },
+  }));
+});
diff --git a/sas/static/bundled/sas/pictures-download-index.ts b/sas/static/bundled/sas/pictures-download-index.ts
new file mode 100644
index 00000000..21ee9989
--- /dev/null
+++ b/sas/static/bundled/sas/pictures-download-index.ts
@@ -0,0 +1,46 @@
+import { HttpReader, ZipWriter } from "@zip.js/zip.js";
+import { showSaveFilePicker } from "native-file-system-adapter";
+import type { PictureSchema } from "#openapi";
+
+document.addEventListener("alpine:init", () => {
+  Alpine.data("pictures_download", () => ({
+    isDownloading: false,
+
+    async downloadZip() {
+      this.isDownloading = true;
+      const bar = this.$refs.progress;
+      bar.value = 0;
+      bar.max = this.pictures.length;
+
+      const incrementProgressBar = (_total: number): undefined => {
+        bar.value++;
+        return undefined;
+      };
+
+      const fileHandle = await showSaveFilePicker({
+        _preferPolyfill: false,
+        suggestedName: interpolate(
+          gettext("pictures.%(extension)s"),
+          { extension: "zip" },
+          true,
+        ),
+        excludeAcceptAllOption: false,
+      });
+      const zipWriter = new ZipWriter(await fileHandle.createWritable());
+
+      await Promise.all(
+        this.pictures.map((p: PictureSchema) => {
+          const imgName = `${p.album}/IMG_${p.date.replace(/[:\-]/g, "_")}${p.name.slice(p.name.lastIndexOf("."))}`;
+          return zipWriter.add(imgName, new HttpReader(p.full_size_url), {
+            level: 9,
+            lastModDate: new Date(p.date),
+            onstart: incrementProgressBar,
+          });
+        }),
+      );
+
+      await zipWriter.close();
+      this.isDownloading = false;
+    },
+  }));
+});
diff --git a/sas/static/bundled/sas/user/pictures-index.ts b/sas/static/bundled/sas/user/pictures-index.ts
index 8b5ecda5..d3cd83ae 100644
--- a/sas/static/bundled/sas/user/pictures-index.ts
+++ b/sas/static/bundled/sas/user/pictures-index.ts
@@ -1,6 +1,4 @@
 import { paginated } from "#core:utils/api";
-import { HttpReader, ZipWriter } from "@zip.js/zip.js";
-import { showSaveFilePicker } from "native-file-system-adapter";
 import {
   type PictureSchema,
   type PicturesFetchPicturesData,
@@ -8,26 +6,22 @@ import {
 } from "#openapi";
 
 interface PagePictureConfig {
-  userId?: number;
-  albumId?: number;
+  userId: number;
 }
 
 document.addEventListener("alpine:init", () => {
   Alpine.data("user_pictures", (config: PagePictureConfig) => ({
-    isDownloading: false,
     loading: true,
     pictures: [] as PictureSchema[],
     albums: {} as Record<string, PictureSchema[]>,
 
     async init() {
-      const query: PicturesFetchPicturesData["query"] = {};
-
-      if (config.userId) {
-        query.users_identified = [config.userId];
-      } else {
-        query.album_id = config.albumId;
-      }
-      this.pictures = await paginated(picturesFetchPictures, { query: query });
+      this.pictures = await paginated(picturesFetchPictures, {
+        query: {
+          // biome-ignore lint/style/useNamingConvention: from python api
+          users_identified: [config.userId],
+        } as PicturesFetchPicturesData["query"],
+      });
 
       this.albums = this.pictures.reduce(
         (acc: Record<string, PictureSchema[]>, picture: PictureSchema) => {
@@ -41,42 +35,5 @@ document.addEventListener("alpine:init", () => {
       );
       this.loading = false;
     },
-
-    async downloadZip() {
-      this.isDownloading = true;
-      const bar = this.$refs.progress;
-      bar.value = 0;
-      bar.max = this.pictures.length;
-
-      const incrementProgressBar = (_total: number): undefined => {
-        bar.value++;
-        return undefined;
-      };
-
-      const fileHandle = await showSaveFilePicker({
-        _preferPolyfill: false,
-        suggestedName: interpolate(
-          gettext("pictures.%(extension)s"),
-          { extension: "zip" },
-          true,
-        ),
-        excludeAcceptAllOption: false,
-      });
-      const zipWriter = new ZipWriter(await fileHandle.createWritable());
-
-      await Promise.all(
-        this.pictures.map((p: PictureSchema) => {
-          const imgName = `${p.album}/IMG_${p.date.replace(/[:\-]/g, "_")}${p.name.slice(p.name.lastIndexOf("."))}`;
-          return zipWriter.add(imgName, new HttpReader(p.full_size_url), {
-            level: 9,
-            lastModDate: new Date(p.date),
-            onstart: incrementProgressBar,
-          });
-        }),
-      );
-
-      await zipWriter.close();
-      this.isDownloading = false;
-    },
   }));
 });
diff --git a/sas/templates/sas/album.jinja b/sas/templates/sas/album.jinja
index fa2592e8..402881e0 100644
--- a/sas/templates/sas/album.jinja
+++ b/sas/templates/sas/album.jinja
@@ -7,8 +7,8 @@
 {%- endblock -%}
 
 {%- block additional_js -%}
-  <script type="module" src="{{ static('bundled/sas/album-index.js') }}"></script>
-  <script type="module" src="{{ static('bundled/sas/user/pictures-index.ts') }}"></script>
+  <script type="module" src="{{ static('bundled/sas/album-index.ts') }}"></script>
+  <script type="module" src="{{ static('bundled/sas/pictures-download-index.ts') }}"></script>
 {%- endblock -%}
 
 {% block title %}
@@ -64,15 +64,17 @@
     <br>
   {% endif %}
 
-  <div x-data="user_pictures({ albumId: {{ album.id }} })">
-    {{ download_button() }}
-  </div>
+  <div x-data="pictures({
+               albumId: {{ album.id }},
+               maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }},
+               })">
+
+    {{ download_button("Download album") }}
 
-  <div x-data="pictures">
     <h4>{% trans %}Pictures{% endtrans %}</h4>
     <div class="photos" :aria-busy="loading">
-      <template x-for="picture in pictures.results">
-        <a :href="`/sas/picture/${picture.id}`">
+      <template x-for="picture in pictures.slice((page - 1) * config.maxPageSize, config.maxPageSize * page)">
+        <a :href="picture.sas_url">
           <div
             class="photo"
             :class="{not_moderated: !picture.is_moderated}"
@@ -117,13 +119,6 @@
 {% block script %}
   {{ super() }}
   <script>
-    window.addEventListener("DOMContentLoaded", () => {
-      loadAlbum({
-        albumId: {{ album.id }},
-        maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }},
-      });
-    });
-
     // Todo: migrate to alpine.js if we have some time
     $("form#upload_form").submit(function (event) {
       let formData = new FormData($(this)[0]);
diff --git a/sas/templates/sas/download_pictures.jinja b/sas/templates/sas/download_pictures.jinja
index 3b4520af..cc25ded7 100644
--- a/sas/templates/sas/download_pictures.jinja
+++ b/sas/templates/sas/download_pictures.jinja
@@ -1,13 +1,30 @@
-{% macro download_button() %}
-  <div x-show="pictures.length > 0" x-cloak>
-    <button
-      :disabled="isDownloading"
-      class="btn btn-blue"
-      @click="downloadZip()"
-    >
-      <i class="fa fa-download"></i>
-      {% trans %}Download all pictures{% endtrans %}
-    </button>
-    <progress x-ref="progress" x-show="isDownloading"></progress>
+{# Helper macro to create a download button for a
+  record of albums with alpine
+
+  This needs to be used inside an alpine environment.
+  Downloaded pictures will be `pictures` from the 
+  parent data store.
+
+  Note:
+    This requires importing `bundled/sas/pictures-download-index.ts`
+
+  Parameters:
+    name (str): name displayed on the button, will be translated
+ #}
+{% macro download_button(name) %}
+  <div x-data="pictures_download">
+    <div x-show="pictures.length > 0" x-cloak>
+      <button
+        :disabled="isDownloading"
+        class="btn btn-blue"
+        @click="downloadZip()"
+      >
+        <i class="fa fa-download"></i>
+        {%- if name != "" -%}
+          {% trans %}{{ name }}{% endtrans %}
+        {%- endif -%}
+      </button>
+      <progress x-ref="progress" x-show="isDownloading"></progress>
+    </div>
   </div>
 {% endmacro %}
diff --git a/sas/templates/sas/user_pictures.jinja b/sas/templates/sas/user_pictures.jinja
index 1d7655b2..b45bf8e5 100644
--- a/sas/templates/sas/user_pictures.jinja
+++ b/sas/templates/sas/user_pictures.jinja
@@ -7,6 +7,7 @@
 
 {% block additional_js %}
   <script type="module" src="{{ static('bundled/sas/user/pictures-index.ts') }}"></script>
+  <script type="module" src="{{ static('bundled/sas/pictures-download-index.ts') }}"></script>
 {% endblock %}
 
 {% block title %}
@@ -16,16 +17,21 @@
 {% block content %}
   <main x-data="user_pictures({ userId: {{ object.id }} })">
     {% if user.id == object.id %}
-      {{ download_button() }}
+      {{ download_button("Download all my pictures") }}
     {% endif %}
 
     <template x-for="[album, pictures] in Object.entries(albums)" x-cloak>
       <section>
         <br />
-        <h4 x-text="album"></h4>
+        <div class="row">
+          <h4 x-text="album"></h4>
+          {% if user.id == object.id %}
+            {{ download_button("") }}
+          {% endif %}
+        </div>
         <div class="photos">
           <template x-for="picture in pictures">
-            <a :href="`/sas/picture/${picture.id}`">
+            <a :href="picture.sas_url">
               <div
                 class="photo"
                 :class="{not_moderated: !picture.is_moderated}"
@@ -47,7 +53,3 @@
     <div class="photos" :aria-busy="loading"></div>
   </main>
 {% endblock content %}
-
-{% block script %}
-  {{ super() }}
-{% endblock script %}

From e8db68b960ca3bef19100b489a65af6056db3111 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Tue, 18 Feb 2025 15:05:23 +0100
Subject: [PATCH 08/12] Add missing translations

---
 locale/fr/LC_MESSAGES/django.po           | 54 +++++++++++++----------
 sas/templates/sas/album.jinja             |  2 +-
 sas/templates/sas/download_pictures.jinja |  4 +-
 sas/templates/sas/user_pictures.jinja     |  2 +-
 4 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/locale/fr/LC_MESSAGES/django.po b/locale/fr/LC_MESSAGES/django.po
index 25f49724..ea259ce0 100644
--- a/locale/fr/LC_MESSAGES/django.po
+++ b/locale/fr/LC_MESSAGES/django.po
@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-02-12 15:55+0100\n"
+"POT-Creation-Date: 2025-02-18 15:03+0100\n"
 "PO-Revision-Date: 2016-07-18\n"
 "Last-Translator: Maréchal <thomas.girod@utbm.fr\n"
 "Language-Team: AE info <ae.info@utbm.fr>\n"
@@ -935,6 +935,10 @@ msgstr "rôle"
 msgid "description"
 msgstr "description"
 
+#: club/models.py
+msgid "past member"
+msgstr "ancien membre"
+
 #: club/models.py
 msgid "Email address"
 msgstr "Adresse email"
@@ -1425,8 +1429,9 @@ msgstr ""
 #: com/templates/com/macros.jinja
 #, python-format
 msgid ""
-"This event will take place every week for %(nb)s weeks. If you moderate or delete "
-"this event, it will also be moderated (or deleted) for the following weeks."
+"This event will take place every week for %(nb)s weeks. If you moderate or "
+"delete this event, it will also be moderated (or deleted) for the following "
+"weeks."
 msgstr ""
 "Cet événement se déroulera chaque semaine pendant %(nb)s semaines. Si vous "
 "modérez ou supprimez cet événement, il sera également modéré (ou supprimé) "
@@ -3070,20 +3075,6 @@ msgstr "Éditer les groupes pour %(user_name)s"
 msgid "User list"
 msgstr "Liste d'utilisateurs"
 
-#: core/templates/core/user_pictures.jinja
-#, python-format
-msgid "%(user_name)s's pictures"
-msgstr "Photos de %(user_name)s"
-
-#: core/templates/core/user_pictures.jinja
-msgid "Download all my pictures"
-msgstr "Télécharger toutes mes photos"
-
-#: core/templates/core/user_pictures.jinja sas/templates/sas/album.jinja
-#: sas/templates/sas/macros.jinja
-msgid "To be moderated"
-msgstr "A modérer"
-
 #: core/templates/core/user_preferences.jinja core/views/user.py
 msgid "Preferences"
 msgstr "Préférences"
@@ -3336,8 +3327,8 @@ msgstr "Nom d'utilisateur, email, ou numéro de compte AE"
 
 #: core/views/forms.py
 msgid ""
-"Profile: you need to be visible on the picture, in order to be recognized (e."
-"g. by the barmen)"
+"Profile: you need to be visible on the picture, in order to be recognized "
+"(e.g. by the barmen)"
 msgstr ""
 "Photo de profil: vous devez être visible sur la photo afin d'être reconnu "
 "(par exemple par les barmen)"
@@ -3947,8 +3938,8 @@ msgstr ""
 #: counter/templates/counter/mails/account_dump.jinja
 msgid "If you think this was a mistake, please mail us at ae@utbm.fr."
 msgstr ""
-"Si vous pensez qu'il s'agit d'une erreur, veuillez envoyer un mail à ae@utbm."
-"fr."
+"Si vous pensez qu'il s'agit d'une erreur, veuillez envoyer un mail à "
+"ae@utbm.fr."
 
 #: counter/templates/counter/mails/account_dump.jinja
 msgid ""
@@ -5217,6 +5208,15 @@ msgstr "SAS"
 msgid "Albums"
 msgstr "Albums"
 
+#: sas/templates/sas/album.jinja
+msgid "Download album"
+msgstr "Télécharger l'album"
+
+#: sas/templates/sas/album.jinja sas/templates/sas/macros.jinja
+#: sas/templates/sas/user_pictures.jinja
+msgid "To be moderated"
+msgstr "A modérer"
+
 #: sas/templates/sas/album.jinja
 msgid "Upload"
 msgstr "Envoyer"
@@ -5286,6 +5286,15 @@ msgstr "Personne(s)"
 msgid "Identify users on pictures"
 msgstr "Identifiez les utilisateurs sur les photos"
 
+#: sas/templates/sas/user_pictures.jinja
+#, python-format
+msgid "%(user_name)s's pictures"
+msgstr "Photos de %(user_name)s"
+
+#: sas/templates/sas/user_pictures.jinja
+msgid "Download all my pictures"
+msgstr "Télécharger toutes mes photos"
+
 #: sith/settings.py
 msgid "English"
 msgstr "Anglais"
@@ -6022,6 +6031,3 @@ msgstr "Vous ne pouvez plus écrire de commentaires, la date est passée."
 #, python-format
 msgid "Maximum characters: %(max_length)s"
 msgstr "Nombre de caractères max: %(max_length)s"
-
-#~ msgid "past member"
-#~ msgstr "ancien membre"
diff --git a/sas/templates/sas/album.jinja b/sas/templates/sas/album.jinja
index 402881e0..fb1a4a80 100644
--- a/sas/templates/sas/album.jinja
+++ b/sas/templates/sas/album.jinja
@@ -69,7 +69,7 @@
                maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }},
                })">
 
-    {{ download_button("Download album") }}
+    {{ download_button(_("Download album")) }}
 
     <h4>{% trans %}Pictures{% endtrans %}</h4>
     <div class="photos" :aria-busy="loading">
diff --git a/sas/templates/sas/download_pictures.jinja b/sas/templates/sas/download_pictures.jinja
index cc25ded7..d89b1b41 100644
--- a/sas/templates/sas/download_pictures.jinja
+++ b/sas/templates/sas/download_pictures.jinja
@@ -9,7 +9,7 @@
     This requires importing `bundled/sas/pictures-download-index.ts`
 
   Parameters:
-    name (str): name displayed on the button, will be translated
+    name (str): name displayed on the button
  #}
 {% macro download_button(name) %}
   <div x-data="pictures_download">
@@ -21,7 +21,7 @@
       >
         <i class="fa fa-download"></i>
         {%- if name != "" -%}
-          {% trans %}{{ name }}{% endtrans %}
+          {{ name }}
         {%- endif -%}
       </button>
       <progress x-ref="progress" x-show="isDownloading"></progress>
diff --git a/sas/templates/sas/user_pictures.jinja b/sas/templates/sas/user_pictures.jinja
index b45bf8e5..d7c8d61d 100644
--- a/sas/templates/sas/user_pictures.jinja
+++ b/sas/templates/sas/user_pictures.jinja
@@ -17,7 +17,7 @@
 {% block content %}
   <main x-data="user_pictures({ userId: {{ object.id }} })">
     {% if user.id == object.id %}
-      {{ download_button("Download all my pictures") }}
+      {{ download_button(_("Download all my pictures")) }}
     {% endif %}
 
     <template x-for="[album, pictures] in Object.entries(albums)" x-cloak>

From f7ff77b88f17d448a7e2c1cc729519b31b5de6fb Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Wed, 19 Feb 2025 00:12:30 +0100
Subject: [PATCH 09/12] Use real images with lazy loading in sas albums and
 user pictures

---
 sas/schemas.py                        | 10 +++++
 sas/static/sas/css/album.scss         | 55 +++++++++++++++------------
 sas/templates/sas/album.jinja         |  2 +-
 sas/templates/sas/macros.jinja        |  8 +++-
 sas/templates/sas/picture.jinja       |  4 +-
 sas/templates/sas/user_pictures.jinja |  2 +-
 6 files changed, 51 insertions(+), 30 deletions(-)

diff --git a/sas/schemas.py b/sas/schemas.py
index 5e049858..d606219b 100644
--- a/sas/schemas.py
+++ b/sas/schemas.py
@@ -39,6 +39,8 @@ class PictureSchema(ModelSchema):
     compressed_url: str
     thumb_url: str
     album: str
+    report_url: str
+    edit_url: str
 
     @staticmethod
     def resolve_sas_url(obj: Picture) -> str:
@@ -56,6 +58,14 @@ class PictureSchema(ModelSchema):
     def resolve_thumb_url(obj: Picture) -> str:
         return obj.get_download_thumb_url()
 
+    @staticmethod
+    def resolve_report_url(obj: Picture) -> str:
+        return reverse("sas:picture_ask_removal", kwargs={"picture_id": obj.id})
+
+    @staticmethod
+    def resolve_edit_url(obj: Picture) -> str:
+        return reverse("sas:picture_edit", kwargs={"picture_id": obj.id})
+
 
 class PictureRelationCreationSchema(Schema):
     picture: NonNegativeInt
diff --git a/sas/static/sas/css/album.scss b/sas/static/sas/css/album.scss
index fdc317c2..cec61de8 100644
--- a/sas/static/sas/css/album.scss
+++ b/sas/static/sas/css/album.scss
@@ -20,8 +20,8 @@ main {
   flex-wrap: wrap;
   gap: 5px;
 
-  > a,
-  > input {
+  >a,
+  >input {
     padding: 0.4em;
     margin: 0.1em;
     font-size: 1.2em;
@@ -46,14 +46,14 @@ main {
   display: flex;
   flex-direction: column;
 
-  > .inputs {
+  >.inputs {
     align-items: flex-end;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 10px;
 
-    > p {
+    >p {
       box-sizing: border-box;
       max-width: 300px;
       width: 100%;
@@ -62,7 +62,7 @@ main {
         max-width: 100%;
       }
 
-      > input {
+      >input {
         box-sizing: border-box;
         max-width: 100%;
         width: 100%;
@@ -72,8 +72,8 @@ main {
       }
     }
 
-    > div > input,
-    > input {
+    >div>input,
+    >input {
       box-sizing: border-box;
       height: 40px;
       width: 100%;
@@ -84,12 +84,12 @@ main {
       }
     }
 
-    > div {
+    >div {
       width: 100%;
       max-width: 300px;
     }
 
-    > input[type=submit]:hover {
+    >input[type=submit]:hover {
       background-color: #287fb8;
       color: white;
     }
@@ -100,27 +100,27 @@ main {
 .clipboard {
   margin-top: 10px;
   padding: 10px;
-  background-color: rgba(0,0,0,.1);
+  background-color: rgba(0, 0, 0, .1);
   border-radius: 10px;
 }
 
 .photos,
 .albums {
   margin: 20px;
-  min-height: 50px;  // To contain the aria-busy loading wheel, even if empty
+  min-height: 50px; // To contain the aria-busy loading wheel, even if empty
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 5px;
 
-  > div {
+  >div {
     background: rgba(0, 0, 0, .5);
     cursor: not-allowed;
   }
 
-  > div,
-  > a {
+  >div,
+  >a {
     box-sizing: border-box;
     position: relative;
     height: 128px;
@@ -138,7 +138,7 @@ main {
       background: rgba(0, 0, 0, .5);
     }
 
-    > input[type=checkbox] {
+    >input[type=checkbox] {
       position: absolute;
       top: 0;
       right: 0;
@@ -149,8 +149,8 @@ main {
       cursor: pointer;
     }
 
-    > .photo,
-    > .album {
+    >.photo,
+    >.album {
       box-sizing: border-box;
       background-color: #333333;
       background-size: contain;
@@ -166,25 +166,32 @@ main {
 
       border: 1px solid rgba(0, 0, 0, .3);
 
+      >img {
+        object-position: top bottom;
+        object-fit: contain;
+        height: 100%;
+        width: 100%
+      }
+
       @media (max-width: 500px) {
         width: 100%;
         height: 100%;
       }
 
-      &:hover > .text {
+      &:hover>.text {
         background-color: rgba(0, 0, 0, .5);
       }
 
-      &:hover > .overlay {
+      &:hover>.overlay {
         -webkit-backdrop-filter: blur(2px);
         backdrop-filter: blur(2px);
 
-        ~ .text {
+        ~.text {
           background-color: transparent;
         }
       }
 
-      > .text {
+      >.text {
         position: absolute;
         box-sizing: border-box;
         top: 0;
@@ -201,7 +208,7 @@ main {
         color: white;
       }
 
-      > .overlay {
+      >.overlay {
         position: absolute;
         width: 100%;
         height: 100%;
@@ -227,14 +234,14 @@ main {
       }
     }
 
-    > .album > div {
+    >.album>div {
       background: rgba(0, 0, 0, .5);
       background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
       text-align: left;
       word-break: break-word;
     }
 
-    > .photo > .text {
+    >.photo>.text {
       align-items: center;
       padding-bottom: 30px;
     }
diff --git a/sas/templates/sas/album.jinja b/sas/templates/sas/album.jinja
index fb1a4a80..0e5762b8 100644
--- a/sas/templates/sas/album.jinja
+++ b/sas/templates/sas/album.jinja
@@ -78,8 +78,8 @@
           <div
             class="photo"
             :class="{not_moderated: !picture.is_moderated}"
-            :style="`background-image: url(${picture.thumb_url})`"
           >
+            <img :src="picture.thumb_url" :alt="picture.name" loading="lazy" />
             <template x-if="!picture.is_moderated">
               <div class="overlay">&nbsp;</div>
               <div class="text">{% trans %}To be moderated{% endtrans %}</div>
diff --git a/sas/templates/sas/macros.jinja b/sas/templates/sas/macros.jinja
index a7f48618..a16f5da5 100644
--- a/sas/templates/sas/macros.jinja
+++ b/sas/templates/sas/macros.jinja
@@ -2,15 +2,19 @@
   <a href="{{ url('sas:album', album_id=a.id) }}">
     {% if a.file %}
       {% set img = a.get_download_url() %}
+      {% set src = a.name %}
     {% elif a.children.filter(is_folder=False, is_moderated=True).exists() %}
-      {% set img = a.children.filter(is_folder=False).first().as_picture.get_download_thumb_url() %}
+      {% set picture = a.children.filter(is_folder=False).first().as_picture %}
+      {% set img = picture.get_download_thumb_url()  %}
+      {% set src = picture.name %}
     {% else %}
       {% set img = static('core/img/sas.jpg') %}
+      {% set src = "sas.jpg" %}
     {% endif %}
     <div
       class="album{% if not a.is_moderated %} not_moderated{% endif %}"
-      style="background-image: url('{{ img }}');"
     >
+      <img src="{{ img }}" alt="{{ src }}" loading="lazy" />
       {% if not a.is_moderated %}
         <div class="overlay">&nbsp;</div>
         <div class="text">{% trans %}To be moderated{% endtrans %}</div>
diff --git a/sas/templates/sas/picture.jinja b/sas/templates/sas/picture.jinja
index c0fe4dd4..f86c7959 100644
--- a/sas/templates/sas/picture.jinja
+++ b/sas/templates/sas/picture.jinja
@@ -114,12 +114,12 @@
                   {% trans %}HD version{% endtrans %}
                 </a>
                 <br>
-                <a class="text danger" :href="`/sas/picture/${currentPicture.id}/report`">
+                <a class="text danger" :href="currentPicture.report_url">
                   {% trans %}Ask for removal{% endtrans %}
                 </a>
               </div>
               <div class="buttons">
-                <a class="button" :href="`/sas/picture/${currentPicture.id}/edit/`"><i class="fa-regular fa-pen-to-square edit-action"></i></a>
+                <a class="button" :href="currentPicture.edit_url"><i class="fa-regular fa-pen-to-square edit-action"></i></a>
                 <a class="button" href="?rotate_left"><i class="fa-solid fa-rotate-left"></i></a>
                 <a class="button" href="?rotate_right"><i class="fa-solid fa-rotate-right"></i></a>
               </div>
diff --git a/sas/templates/sas/user_pictures.jinja b/sas/templates/sas/user_pictures.jinja
index d7c8d61d..1350c7d9 100644
--- a/sas/templates/sas/user_pictures.jinja
+++ b/sas/templates/sas/user_pictures.jinja
@@ -35,8 +35,8 @@
               <div
                 class="photo"
                 :class="{not_moderated: !picture.is_moderated}"
-                :style="`background-image: url(${picture.thumb_url})`"
               >
+                <img :src="picture.thumb_url" :alt="picture.name" loading="lazy" />
                 <template x-if="!picture.is_moderated">
                   <div class="overlay">&nbsp;</div>
                   <div class="text">{% trans %}To be moderated{% endtrans %}</div>

From a87016a23f95455ceaff5249d5ff26279cb5f6c7 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Thu, 20 Feb 2025 18:13:40 +0100
Subject: [PATCH 10/12] Apply some review comments

---
 sas/static/bundled/sas/album-index.ts     |  8 +++++-
 sas/templates/sas/album.jinja             |  4 +--
 sas/templates/sas/download_pictures.jinja | 30 -----------------------
 sas/templates/sas/macros.jinja            | 30 ++++++++++++++++++++++-
 sas/templates/sas/user_pictures.jinja     |  2 +-
 5 files changed, 39 insertions(+), 35 deletions(-)
 delete mode 100644 sas/templates/sas/download_pictures.jinja

diff --git a/sas/static/bundled/sas/album-index.ts b/sas/static/bundled/sas/album-index.ts
index 8f0b119f..ff0976d9 100644
--- a/sas/static/bundled/sas/album-index.ts
+++ b/sas/static/bundled/sas/album-index.ts
@@ -17,7 +17,6 @@ document.addEventListener("alpine:init", () => {
     page: Number.parseInt(initialUrlParams.get("page")) || 1,
     pushstate: History.Push /* Used to avoid pushing a state on a back action */,
     loading: false,
-    config: {} as AlbumConfig,
 
     async init() {
       await this.fetchPictures();
@@ -34,6 +33,13 @@ document.addEventListener("alpine:init", () => {
       this.config = config;
     },
 
+    getPage(page: number) {
+      return this.pictures.slice(
+        (page - 1) * config.maxPageSize,
+        config.maxPageSize * page,
+      );
+    },
+
     async fetchPictures() {
       this.loading = true;
       this.pictures = await paginated(picturesFetchPictures, {
diff --git a/sas/templates/sas/album.jinja b/sas/templates/sas/album.jinja
index 0e5762b8..172e81ab 100644
--- a/sas/templates/sas/album.jinja
+++ b/sas/templates/sas/album.jinja
@@ -1,6 +1,6 @@
 {% extends "core/base.jinja" %}
 {% from 'core/macros.jinja' import paginate_alpine %}
-{% from "sas/download_pictures.jinja" import download_button %}
+{% from "sas/macros.jinja" import download_button %}
 
 {%- block additional_css -%}
   <link rel="stylesheet" href="{{ static('sas/css/album.scss') }}">
@@ -73,7 +73,7 @@
 
     <h4>{% trans %}Pictures{% endtrans %}</h4>
     <div class="photos" :aria-busy="loading">
-      <template x-for="picture in pictures.slice((page - 1) * config.maxPageSize, config.maxPageSize * page)">
+      <template x-for="picture in getPage(page)">
         <a :href="picture.sas_url">
           <div
             class="photo"
diff --git a/sas/templates/sas/download_pictures.jinja b/sas/templates/sas/download_pictures.jinja
deleted file mode 100644
index d89b1b41..00000000
--- a/sas/templates/sas/download_pictures.jinja
+++ /dev/null
@@ -1,30 +0,0 @@
-{# Helper macro to create a download button for a
-  record of albums with alpine
-
-  This needs to be used inside an alpine environment.
-  Downloaded pictures will be `pictures` from the 
-  parent data store.
-
-  Note:
-    This requires importing `bundled/sas/pictures-download-index.ts`
-
-  Parameters:
-    name (str): name displayed on the button
- #}
-{% macro download_button(name) %}
-  <div x-data="pictures_download">
-    <div x-show="pictures.length > 0" x-cloak>
-      <button
-        :disabled="isDownloading"
-        class="btn btn-blue"
-        @click="downloadZip()"
-      >
-        <i class="fa fa-download"></i>
-        {%- if name != "" -%}
-          {{ name }}
-        {%- endif -%}
-      </button>
-      <progress x-ref="progress" x-show="isDownloading"></progress>
-    </div>
-  </div>
-{% endmacro %}
diff --git a/sas/templates/sas/macros.jinja b/sas/templates/sas/macros.jinja
index a16f5da5..665813fb 100644
--- a/sas/templates/sas/macros.jinja
+++ b/sas/templates/sas/macros.jinja
@@ -33,4 +33,32 @@
     {{ print_path(file.parent) }}
     <a href="{{ url('sas:album', album_id=file.id) }}">{{ file.get_display_name() }}</a> /
   {% endif %}
-{% endmacro %}
\ No newline at end of file
+{% endmacro %}
+
+{# Helper macro to create a download button for a
+  record of albums with alpine
+
+  This needs to be used inside an alpine environment.
+  Downloaded pictures will be `pictures` from the 
+  parent data store.
+
+  Note:
+    This requires importing `bundled/sas/pictures-download-index.ts`
+
+  Parameters:
+    name (str): name displayed on the button
+ #}
+{% macro download_button(name) %}
+  <div x-data="pictures_download">
+    <div x-show="pictures.length > 0" x-cloak>
+      <button
+        :disabled="isDownloading"
+        class="btn btn-blue"
+        @click="downloadZip()"
+      >
+        <i class="fa fa-download"></i>{{ name }}
+      </button>
+      <progress x-ref="progress" x-show="isDownloading"></progress>
+    </div>
+  </div>
+{% endmacro %}
diff --git a/sas/templates/sas/user_pictures.jinja b/sas/templates/sas/user_pictures.jinja
index 1350c7d9..0d896652 100644
--- a/sas/templates/sas/user_pictures.jinja
+++ b/sas/templates/sas/user_pictures.jinja
@@ -1,5 +1,5 @@
 {% extends "core/base.jinja" %}
-{% from "sas/download_pictures.jinja" import download_button %}
+{% from "sas/macros.jinja" import download_button %}
 
 {%- block additional_css -%}
   <link rel="stylesheet" href="{{ static('sas/css/album.scss') }}">

From 2918048b167dc51cf39bea0939efb8c55a830267 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Thu, 20 Feb 2025 18:51:08 +0100
Subject: [PATCH 11/12] Improve download user album button

---
 core/static/core/style.scss           | 7 +++++--
 sas/templates/sas/macros.jinja        | 2 +-
 sas/templates/sas/user_pictures.jinja | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index 06208579..22c8a583 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -272,9 +272,12 @@ body {
       }
     }
 
-    i {
-      margin-right: 4px;
+    &:not(.btn-no-text) {
+      i {
+        margin-right: 4px;
+      }
     }
+
   }
 
   /**
diff --git a/sas/templates/sas/macros.jinja b/sas/templates/sas/macros.jinja
index 665813fb..aa4afa48 100644
--- a/sas/templates/sas/macros.jinja
+++ b/sas/templates/sas/macros.jinja
@@ -53,7 +53,7 @@
     <div x-show="pictures.length > 0" x-cloak>
       <button
         :disabled="isDownloading"
-        class="btn btn-blue"
+        class="btn btn-blue {% if name == "" %}btn-no-text{% endif %}"
         @click="downloadZip()"
       >
         <i class="fa fa-download"></i>{{ name }}
diff --git a/sas/templates/sas/user_pictures.jinja b/sas/templates/sas/user_pictures.jinja
index 0d896652..cb1f98c5 100644
--- a/sas/templates/sas/user_pictures.jinja
+++ b/sas/templates/sas/user_pictures.jinja
@@ -26,7 +26,7 @@
         <div class="row">
           <h4 x-text="album"></h4>
           {% if user.id == object.id %}
-            {{ download_button("") }}
+            &nbsp;{{ download_button("") }}
           {% endif %}
         </div>
         <div class="photos">

From 219700f0bc45ace2ac5c759a1636c104d44bb0f8 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Thu, 20 Feb 2025 18:54:50 +0100
Subject: [PATCH 12/12] Add redirect for user picture url

---
 core/urls.py | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/core/urls.py b/core/urls.py
index 5a758d4e..23fa9f11 100644
--- a/core/urls.py
+++ b/core/urls.py
@@ -23,6 +23,7 @@
 #
 
 from django.urls import path, re_path, register_converter
+from django.views.generic import RedirectView
 
 from core.converters import (
     BooleanStringConverter,
@@ -142,6 +143,10 @@ urlpatterns = [
     path("user/", UserListView.as_view(), name="user_list"),
     path("user/<int:user_id>/mini/", UserMiniView.as_view(), name="user_profile_mini"),
     path("user/<int:user_id>/", UserView.as_view(), name="user_profile"),
+    path(
+        "user/<int:user_id>/pictures/",
+        RedirectView.as_view(pattern_name="sas:user_pictures", permanent=True),
+    ),
     path(
         "user/<int:user_id>/godfathers/",
         UserGodfathersView.as_view(),