Move all user picture logic to sas

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 %}

sas/templates/sas/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 %}

sas/templates/sas/user_pictures.jinja

@@ -0,0 +1,53 @@
+{% extends "core/base.jinja" %}
+{% 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/sas/user/pictures-index.ts') }}"></script>
+{% endblock %}
+
+{% block title %}
+  {% trans user_name=profile.get_display_name() %}{{ user_name }}'s pictures{% endtrans %}
+{% endblock %}
+
+{% block content %}
+  <main x-data="user_pictures({ userId: {{ object.id }} })">
+    {% if user.id == object.id %}
+      {{ download_button() }}
+    {% endif %}
+
+    <template x-for="[album, pictures] in Object.entries(albums)" x-cloak>
+      <section>
+        <br />
+        <h4 x-text="album"></h4>
+        <div class="photos">
+          <template x-for="picture in pictures">
+            <a :href="`/sas/picture/${picture.id}`">
+              <div
+                class="photo"
+                :class="{not_moderated: !picture.is_moderated}"
+                :style="`background-image: url(${picture.thumb_url})`"
+              >
+                <template x-if="!picture.is_moderated">
+                  <div class="overlay">&nbsp;</div>
+                  <div class="text">{% trans %}To be moderated{% endtrans %}</div>
+                </template>
+                <template x-if="picture.is_moderated">
+                  <div class="text">&nbsp;</div>
+                </template>
+              </div>
+            </a>
+          </template>
+        </div>
+      </section>
+    </template>
+    <div class="photos" :aria-busy="loading"></div>
+  </main>
+{% endblock content %}
+
+{% block script %}
+  {{ super() }}
+{% endblock script %}