From 1af02311263cd7324febe45b7324863c2c0c1442 Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Mon, 16 Dec 2024 01:15:50 +1000
Subject: [PATCH] [frontend] Add folder navigation

---
 .../Components/DriveEntry.razor               | 15 ++++++++++--
 .../Components/DriveEntry.razor.css           | 11 +++++----
 .../Layout/MainLayout.razor.css               | 23 +++++++++++++++++++
 Iceshrimp.Frontend/Pages/DrivePage.razor      | 20 ++++++++++++++--
 4 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/DriveEntry.razor b/Iceshrimp.Frontend/Components/DriveEntry.razor
index 82f04ba3..8e07183d 100644
--- a/Iceshrimp.Frontend/Components/DriveEntry.razor
+++ b/Iceshrimp.Frontend/Components/DriveEntry.razor
@@ -3,10 +3,11 @@
 @using Microsoft.Extensions.Localization
 @using Iceshrimp.Assets.PhosphorIcons
 @inject IStringLocalizer<Localization> Loc;
+@inject NavigationManager              Nav;
 
 @if (File != null && Folder == null)
 {
-    <div class="drive-entry">
+    <div class="drive-entry" @onclick="SelectFile" @onclick:stopPropagation="true">
         <div class="labels">
             @if (File.Description != null)
             {
@@ -42,7 +43,7 @@
 }
 @if (Folder != null && File == null)
 {
-    <div class="drive-entry">
+    <div class="drive-entry" @onclick="SelectFolder" @onclick:stopPropagation="true">
         <Icon Name="Icons.FolderOpen" Size="5em" Pack="IconStyle.Fill"/>
         <span>@Folder.Name</span>
     </div>
@@ -51,4 +52,14 @@
 @code {
     [Parameter] public DriveFileResponse?   File   { get; set; } = null;
     [Parameter] public DriveFolderResponse? Folder { get; set; } = null;
+
+    private void SelectFile()
+    {
+        
+    }
+    
+    private void SelectFolder()
+    {
+        Nav.NavigateTo($"/drive/{Folder!.Id}");
+    }
 }
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/DriveEntry.razor.css b/Iceshrimp.Frontend/Components/DriveEntry.razor.css
index 102cbda2..77866e3f 100644
--- a/Iceshrimp.Frontend/Components/DriveEntry.razor.css
+++ b/Iceshrimp.Frontend/Components/DriveEntry.razor.css
@@ -8,7 +8,10 @@
     text-align: center;
     text-wrap: wrap;
     word-break: break-word;
-    border-radius: 0.5rem;
+}
+
+.drive-entry:hover {
+    background-color: var(--hover-color);
 }
 
 ::deep {
@@ -22,14 +25,14 @@
 
 .labels {
     position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
+    top: 0.2rem;
+    right: 0.2rem;
 }
 
 ::deep {
     .labels .ph {
         display: inline-block;
-        vertical-align: text-top;
+        vertical-align: top;
     }
 }
 
diff --git a/Iceshrimp.Frontend/Layout/MainLayout.razor.css b/Iceshrimp.Frontend/Layout/MainLayout.razor.css
index 8ce204ce..9685a78c 100644
--- a/Iceshrimp.Frontend/Layout/MainLayout.razor.css
+++ b/Iceshrimp.Frontend/Layout/MainLayout.razor.css
@@ -38,4 +38,27 @@
     > i {
         padding-right: 0.5rem;
     }
+}
+
+.top-bar {
+    > .btn {
+        margin-right: 0.5rem;
+        padding: 0.2rem 0.4rem;
+        border-radius: 0.5rem;
+        cursor: pointer;
+    }
+}
+
+.top-bar {
+    > .btn:hover {
+        background-color: var(--hover-color);
+    }
+}
+
+::deep .top-bar {
+    > .btn i {
+        display: inline-block;
+        vertical-align: middle;
+        line-height: 1;
+    }
 }
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Pages/DrivePage.razor b/Iceshrimp.Frontend/Pages/DrivePage.razor
index d5abe481..dd296bce 100644
--- a/Iceshrimp.Frontend/Pages/DrivePage.razor
+++ b/Iceshrimp.Frontend/Pages/DrivePage.razor
@@ -13,10 +13,21 @@
 @inject ApiService                     Api;
 @inject IStringLocalizer<Localization> Loc;
 @inject ILogger<DrivePage>             Logger;
+@inject NavigationManager              Nav;
 
 <SectionContent SectionName="top-bar">
-    <Icon Name="Icons.Cloud"></Icon>
-    @Loc["Drive"]
+    @if (_state == State.Loaded && Folder is { Id: not null, Name: not null })
+    {
+        <span class="btn" @onclick="NavigateToParent">
+            <Icon Name="Icons.ArrowLeft"/>
+        </span>
+        @Folder.Name
+    }
+    else
+    {
+        <Icon Name="Icons.Cloud"/>
+        @Loc["Drive"]
+    }
 </SectionContent>
 
 @if (_state == State.Loaded && Folder != null)
@@ -88,4 +99,9 @@
     {
         await Load();
     }
+
+    private void NavigateToParent()
+    {
+        Nav.NavigateTo(Folder?.ParentId != null ? $"/drive/{Folder.ParentId}" : "/drive");
+    }
 }
\ No newline at end of file