From 793efd9ab61a73fa0584eed6d5eba6922c89da1d Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Mon, 16 Dec 2024 00:39:49 +1000
Subject: [PATCH] [frontend] Move drive entries into DriveEntry component

---
 .../Components/DriveEntry.razor               | 54 +++++++++++++++++++
 .../Components/DriveEntry.razor.css           | 42 +++++++++++++++
 Iceshrimp.Frontend/Pages/DrivePage.razor      | 40 ++------------
 Iceshrimp.Frontend/Pages/DrivePage.razor.css  | 43 ---------------
 4 files changed, 101 insertions(+), 78 deletions(-)
 create mode 100644 Iceshrimp.Frontend/Components/DriveEntry.razor
 create mode 100644 Iceshrimp.Frontend/Components/DriveEntry.razor.css

diff --git a/Iceshrimp.Frontend/Components/DriveEntry.razor b/Iceshrimp.Frontend/Components/DriveEntry.razor
new file mode 100644
index 00000000..82f04ba3
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/DriveEntry.razor
@@ -0,0 +1,54 @@
+@using Iceshrimp.Frontend.Localization
+@using Iceshrimp.Shared.Schemas.Web
+@using Microsoft.Extensions.Localization
+@using Iceshrimp.Assets.PhosphorIcons
+@inject IStringLocalizer<Localization> Loc;
+
+@if (File != null && Folder == null)
+{
+    <div class="drive-entry">
+        <div class="labels">
+            @if (File.Description != null)
+            {
+                <Icon Name="Icons.ClosedCaptioning" title="@Loc["Has alt text"]"/>
+            }
+            else
+            {
+                <Icon Name="Icons.Warning" title="@Loc["No alt text"]"/>
+            }
+            @if (File.Sensitive)
+            {
+                <Icon Name="Icons.EyeSlash" title="@Loc["Sensitive"]"/>
+            }
+        </div>
+        @if (File.ContentType.StartsWith("image"))
+        {
+            <img class="thumbnail" src="@File.ThumbnailUrl" alt="@File.Description"/>
+        }
+        else if (File.ContentType.StartsWith("audio"))
+        {
+            <Icon Name="Icons.FileAudio" Size="5em"/>
+        }
+        else if (File.ContentType.StartsWith("video"))
+        {
+            <Icon Name="Icons.FileVideo" Size="5em"/>
+        }
+        else
+        {
+            <Icon Name="Icons.File" Size="5em"/>
+        }
+        <span>@File.Filename</span>
+    </div>
+}
+@if (Folder != null && File == null)
+{
+    <div class="drive-entry">
+        <Icon Name="Icons.FolderOpen" Size="5em" Pack="IconStyle.Fill"/>
+        <span>@Folder.Name</span>
+    </div>
+}
+
+@code {
+    [Parameter] public DriveFileResponse?   File   { get; set; } = null;
+    [Parameter] public DriveFolderResponse? Folder { get; set; } = null;
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/DriveEntry.razor.css b/Iceshrimp.Frontend/Components/DriveEntry.razor.css
new file mode 100644
index 00000000..102cbda2
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/DriveEntry.razor.css
@@ -0,0 +1,42 @@
+.drive-entry {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    width: 10em;
+    text-align: center;
+    text-wrap: wrap;
+    word-break: break-word;
+    border-radius: 0.5rem;
+}
+
+::deep {
+    .ph {
+        display: block;
+        vertical-align: middle;
+        line-height: 1;
+        color: var(--notice-color);
+    }
+}
+
+.labels {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+}
+
+::deep {
+    .labels .ph {
+        display: inline-block;
+        vertical-align: text-top;
+    }
+}
+
+img.thumbnail {
+    display: block;
+    height: 5em;
+    width: auto;
+    aspect-ratio: 3/2;
+    object-fit: contain;
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Pages/DrivePage.razor b/Iceshrimp.Frontend/Pages/DrivePage.razor
index 6171bf5f..d5abe481 100644
--- a/Iceshrimp.Frontend/Pages/DrivePage.razor
+++ b/Iceshrimp.Frontend/Pages/DrivePage.razor
@@ -9,6 +9,7 @@
 @using Iceshrimp.Frontend.Core.Services
 @using Iceshrimp.Shared.Schemas.Web
 @using Microsoft.AspNetCore.Authorization
+@using Iceshrimp.Frontend.Components
 @inject ApiService                     Api;
 @inject IStringLocalizer<Localization> Loc;
 @inject ILogger<DrivePage>             Logger;
@@ -23,45 +24,14 @@
     <ol class="drive-files">
         @foreach (var el in Folder.Folders)
         {
-            <li class="drive-entry">
-                <Icon Name="Icons.FolderOpen" Size="5em" Pack="IconStyle.Fill"/>
-                <span>@el.Name</span>
+            <li>
+                <DriveEntry Folder="el" />
             </li>
         }
         @foreach (var el in Folder.Files)
         {
-            <li class="drive-entry">
-                <div class="labels">
-                    @if (el.Description != null)
-                    {
-                        <Icon Name="Icons.ClosedCaptioning" title="@Loc["Has alt text"]"/>
-                    }
-                    else
-                    {
-                        <Icon Name="Icons.Warning" title="@Loc["No alt text"]"/>
-                    }
-                    @if (el.Sensitive)
-                    {
-                        <Icon Name="Icons.EyeSlash" title="@Loc["Sensitive"]"/>
-                    }
-                </div>
-                @if (el.ContentType.StartsWith("image"))
-                {
-                    <img class="thumbnail" src="@el.ThumbnailUrl" alt="@el.Description"/>
-                }
-                else if (el.ContentType.StartsWith("audio"))
-                {
-                    <Icon Name="Icons.FileAudio" Size="5em"/>
-                }
-                else if (el.ContentType.StartsWith("video"))
-                {
-                    <Icon Name="Icons.FileVideo" Size="5em"/>
-                }
-                else
-                {
-                    <Icon Name="Icons.File" Size="5em"/>
-                }
-                <span>@el.Filename</span>
+            <li>
+                <DriveEntry File="el"/>
             </li>
         }
     </ol>
diff --git a/Iceshrimp.Frontend/Pages/DrivePage.razor.css b/Iceshrimp.Frontend/Pages/DrivePage.razor.css
index 9d0903c9..d6bc940f 100644
--- a/Iceshrimp.Frontend/Pages/DrivePage.razor.css
+++ b/Iceshrimp.Frontend/Pages/DrivePage.razor.css
@@ -4,47 +4,4 @@
     justify-content: center;
     gap: 1rem;
     padding: 1rem;
-}
-
-.drive-entry {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.25rem;
-    width: 10em;
-    text-align: center;
-    text-wrap: wrap;
-    word-break: break-word;
-    border-radius: 0.5rem;
-}
-
-.labels {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-}
-
-::deep {
-    .drive-entry .ph {
-        display: block;
-        vertical-align: middle;
-        line-height: 1;
-        color: var(--notice-color);
-    }
-}
-
-::deep {
-    .labels .ph {
-        display: inline-block;
-        vertical-align: text-top;
-    }
-}
-
-img.thumbnail {
-    display: block;
-    height: 5em;
-    width: auto;
-    aspect-ratio: 3/2;
-    object-fit: contain;
 }
\ No newline at end of file