Slightly improve the media experience (#452)

* Slightly improve the media experience

- Use a grid to display the list of media
- Add icons for non-image media preview
- Paginate the gallery
- Add links to the gallery in the editor and in the profile settings to make it more discoverable when you need it

Fixes #432

* Allow video and audio tags in SafeString

Otherwise we can't display their preview, nor show them in articles

Also show controls by default for these two elements

* Show fallback images for audio and unknown files, to make them more visible

* Add a new constructor to SafeString when the input is trusted and doesn't need to be escaped.

And use it to generate media previews.

* Make it possible to insert video/audio in articles

templates/medias/index.rs.html

@@ -1,10 +1,9 @@
-@use plume_models::medias::Media;
-@use plume_models::safe_string::SafeString;
+@use plume_models::medias::*;
 @use templates::base;
 @use template_utils::*;
 @use routes::*;
 
-@(ctx: BaseContext, medias: Vec<Media>)
+@(ctx: BaseContext, medias: Vec<Media>, page: i32, n_pages: i32)
 
 @:base(ctx, i18n!(ctx.1, "Your media"), {}, {}, {
     <h1>@i18n!(ctx.1, "Your media")</h1>
@@ -12,22 +11,33 @@
         <a href="@uri!(medias::new)" class="inline-block button">@i18n!(ctx.1, "Upload")</a>
     </div>
 
-    <section>
-        @if medias.is_empty() {
-            <p>@i18n!(ctx.1, "You don't have any media yet.")</p>
+    @if medias.is_empty() {
+        <p>@i18n!(ctx.1, "You don't have any media yet.")</p>
+    }
+
+    <div class="cards spaced">
+        @for media in medias {
+          <div class="card">
+              <div class="cover media-preview @media.category().to_string()"
+                @if media.category() == MediaCategory::Image {
+                  style="background-image: url('@media.url(ctx.0).unwrap_or_default()')"
+                }
+              ></div>
+              <main>
+                  <p class="p-summary">@media.alt_text</p>
+                  @if let Some(cw) = media.content_warning {
+                      <p>@i18n!(ctx.1, "Content warning: {0}"; cw)</p>
+                  }
+              </main>
+              <footer>
+                <form action="@uri!(medias::delete: id = media.id)" class="inline" method="POST">
+                    <input type="submit" value="@i18n!(ctx.1, "Delete")"/>
+                </form>
+                &mdash;
+                <a href="@uri!(medias::details: id = media.id)">@i18n!(ctx.1, "Details")</a>
+              </footer>
+          </div>
         }
-        <div class="list">
-            @for media in medias {
-                <div class="card flex">
-                    @Html(media.preview_html(ctx.0).unwrap_or(SafeString::new("")))
-                    <main class="grow">
-                        <p><a href="@uri!(medias::details: id = media.id)">@media.alt_text</a></p>
-                    </main>
-                    <form action="@uri!(medias::delete: id = media.id)" class="inline" method="POST">
-                        <input type="submit" value="@i18n!(ctx.1, "Delete")"/>
-                    </form>
-                </div>
-            }
-        </div>
-    </section>
+    </div>
+    @paginate(ctx.1, page, n_pages)
 })