From ee059ac36c6f2e6506dcc324bdd71269c62573ca Mon Sep 17 00:00:00 2001
From: jaina heartles <me@heartles.xyz>
Date: Wed, 14 Dec 2022 02:57:53 -0800
Subject: [PATCH] Add breadcrumbs

---
 src/main/controllers.zig                      |  4 ++
 src/main/controllers/web.zig                  | 16 ++++++-
 .../controllers/web/drive/directory.tmpl.html | 43 ++++++++++++-------
 static/site.css                               |  5 +++
 4 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/src/main/controllers.zig b/src/main/controllers.zig
index 98cbcf5..ae62126 100644
--- a/src/main/controllers.zig
+++ b/src/main/controllers.zig
@@ -90,6 +90,8 @@ pub fn EndpointRequest(comptime Endpoint: type) type {
         body: Body,
         query: Query,
 
+        mount_path: []const u8,
+
         const args_middleware = //if (Args == void)
             //mdw.injectContext(.{ .args = {} })
             //else
@@ -120,6 +122,8 @@ fn CallApiEndpoint(comptime Endpoint: type) type {
                 .args = ctx.args,
                 .body = ctx.body,
                 .query = ctx.query_params,
+
+                .mount_path = if (@hasField(@TypeOf(ctx), "mounted_at")) ctx.mounted_at else "",
             };
 
             var response = Response{ .headers = http.Fields.init(ctx.allocator), .res = res };
diff --git a/src/main/controllers/web.zig b/src/main/controllers/web.zig
index eed3e5f..cde66a8 100644
--- a/src/main/controllers/web.zig
+++ b/src/main/controllers/web.zig
@@ -245,8 +245,22 @@ const drive = struct {
             const info = try srv.driveGet(req.args.path);
             defer util.deepFree(srv.allocator, info);
 
+            var breadcrumbs = std.ArrayList([]const u8).init(srv.allocator);
+            defer breadcrumbs.deinit();
+
+            var iter = util.PathIter.from(req.args.path);
+            while (iter.next()) |p| {
+                std.log.debug("breadcrumb: {s}", .{p});
+                try breadcrumbs.append(if (p.len != 0) p else continue);
+            }
+
             switch (info) {
-                .dir => |dir| try res.template(.ok, srv, dir_tmpl, .{ .dir = dir }),
+                .dir => |dir| try res.template(.ok, srv, dir_tmpl, .{
+                    .dir = dir,
+                    .breadcrumbs = breadcrumbs.items,
+                    .mount_path = req.mount_path,
+                    .base_drive_path = "drive",
+                }),
                 else => unreachable,
             }
         }
diff --git a/src/main/controllers/web/drive/directory.tmpl.html b/src/main/controllers/web/drive/directory.tmpl.html
index 54f2136..aaafe36 100644
--- a/src/main/controllers/web/drive/directory.tmpl.html
+++ b/src/main/controllers/web/drive/directory.tmpl.html
@@ -1,29 +1,42 @@
 <div class="drive">
+  <ol class="breadcrumbs">
+    <li><a href="{.mount_path}/{.base_drive_path}/">/</a></li>
+    {#for .breadcrumbs |$crumb, $i| =}
+      <li><a href="{.mount_path}/{.base_drive_path}
+        {= #for @slice(.breadcrumbs, 0, $i) |$c|}/{$c}{/for =}
+      /{$crumb}">{$crumb}</a></li>
+    {/for =}
+  </ol>
   <table class="directory-listing">
     {#for .dir.children.? |$child| =}
       <tr>
         {#switch $child case dir |$dir| =}
-          <td class="icon"></td>
-          <td class="icon"><i class="fa-solid fa-folder-closed"></i></td>
-          <td class="name"><a href="./{$dir.name.?}">{$dir.name.?}</a></td>
+          <td class="icons"><i class="fa-solid fa-folder-closed fa-fw"></i></td>
+          <td class="name">
+            <a href="{.mount_path}/{.base_drive_path}{= #for @slice(.breadcrumbs, 0, .breadcrumbs.len) |$c|}/{$c}{/for =}/{$dir.name.?}">
+              {$dir.name.?}
+            </a>
+          </td>
         {#case file |$file|}
-          <td class="icon">
-            {= #if %user |$u|}
+          <td class="icons">
+            {#if %user |$u|}
               {#if $u.avatar_file_id == $file.meta.id =}
-                <i class="fa-solid fa-user"></i>
+                <i class="fa-solid fa-user fa-fw"></i>
               {= #elif $u.header_file_id == $file.meta.id =}
-                <i class="fa-solid fa-heading"></i>
+                <i class="fa-solid fa-heading fa-fw"></i>
               {= /if =}
-            {= /if =}
-          </td>
-          <td class="icon">
-            {= #if $file.meta.sensitive =}
-              <i class="fa-solid fa-eye-slash"></i>
+            {= /if}
+            {#if $file.meta.sensitive =}
+              <i class="fa-solid fa-eye-slash fa-fw"></i>
             {= #else =}
-              <i class="fa-solid fa-file"></i>
-            {= /if =}
+              <i class="fa-solid fa-file fa-fw"></i>
+            {= /if}
+          </td>
+          <td class="name">
+            <a href="{.mount_path}/{.base_drive_path}{= #for @slice(.breadcrumbs, 0, .breadcrumbs.len) |$c|}/{$c}{/for =}/{$file.name.?}">
+              {$file.name.?}
+            </a>
           </td>
-          <td class="name"><a href="./{$file.name.?}">{$file.name.?}</a></td>
           <td class="content-type">{#if $file.meta.content_type |$t|}{$t}{/if}</td>
           <td class="size">{$file.meta.size}</td>
           <td class="created-at">{$file.meta.created_at}</td>
diff --git a/static/site.css b/static/site.css
index e6820a1..5106b6b 100644
--- a/static/site.css
+++ b/static/site.css
@@ -218,3 +218,8 @@ button:hover, a.button:hover {
   }
 }
 
+.drive .icons {
+  display: flex;
+  justify-content: flex-end;
+  vertical-align: bottom;
+}