[frontend] Add folder navigation

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}");
+    }
 }

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

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;
+    }
 }

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");
+    }
 }