Implemented directory file search

app/Controllers/DirectoryController.php

@@ -4,6 +4,7 @@ namespace App\Controllers;
 
 use DI\Container;
 use PHLAK\Config\Config;
+use Slim\Psr7\Request;
 use Slim\Psr7\Response;
 use Slim\Views\Twig;
 use Symfony\Component\Finder\Exception\DirectoryNotFoundException;
@@ -44,18 +45,29 @@ class DirectoryController
      *
      * @return \Psr\Http\Message\ResponseInterface
      */
-    public function __invoke(Finder $files, Response $response, string $path = '.')
-    {
+    public function __invoke(
+        Finder $files,
+        Request $request,
+        Response $response,
+        string $path = '.'
+    ) {
         try {
-            $files = $files->in($path)->depth(0);
+            $files = $files->in($path);
         } catch (DirectoryNotFoundException $exception) {
             return $this->view->render($response->withStatus(404), '404.twig');
         }
 
+        if ($search = $request->getQueryParams()['search'] ?? false) {
+            $files->name(sprintf('/(?:.*)%s(?:.*)/i', $search));
+        } else {
+            $files->depth(0);
+        }
+
         return $this->view->render($response, 'index.twig', [
             'breadcrumbs' => $this->breadcrumbs($path),
             'files' => $files,
             'is_root' => $this->isRoot($path),
+            'search' => $search ?? null,
         ]);
     }
 

app/resources/js/app.js

@@ -4,10 +4,18 @@ Vue.component('file-info-modal', require('./components/file-info-modal.vue').def
 
 const app = new Vue({
     el: "#app",
+    data: function() {
+        return {
+            search: ''
+        };
+    },
     methods: {
         showFileInfo(filePath) {
             this.$refs.fileInfoModal.show(filePath);
         }
+    },
+    beforeMount: function() {
+        this.search = this.$el.querySelector('input[name="search"]').value;
     }
 });
 

app/resources/sass/dark-mode.scss

@@ -3,6 +3,22 @@
 
     header {
         @apply bg-purple-700;
+
+        #search {
+            @apply bg-purple-800;
+
+            i.fa-search {
+                @apply text-purple-900;
+            }
+
+            a {
+                @apply text-purple-900;
+
+                &:hover {
+                    @apply text-white;
+                }
+            }
+        }
     }
 
     #content {

app/resources/views/components/file.twig

@@ -14,7 +14,7 @@
         <div class="flex-grow sm:mr-2">
             <div class="flex justify-between items-center">
                 <div class="truncate">
-                    {{ parentDir ? '..' : file.getBasename }}
+                    {{ parentDir ? '..' : file.getRelativePathname }}
                 </div>
 
                 {% if file.isFile %}

app/resources/views/components/header.twig

@@ -1,9 +1,28 @@
-<header id="header" class="block bg-blue-600 shadow sticky top-0 text-white text-sm tracking-tight">
-    <div class="container mx-auto p-4">
-        <a href="/" class="hover:underline">Home</a>
+<header id="header" class="bg-blue-600 shadow sticky top-0">
+    <div class="container flex flex-col justify-between items-center mx-auto p-4 md:flex-row">
+        <div class="text-white text-sm tracking-tight my-2">
+            <a href="/" class="hover:underline">Home</a>
 
-        {% for name, path in breadcrumbs %}
-            / <a href="{{ path }}" class="hover:underline">{{ name }}</a>
-        {% endfor %}
+            {% for name, path in breadcrumbs %}
+                / <a href="{{ path }}" class="hover:underline">{{ name }}</a>
+            {% endfor %}
+        </div>
+
+        <form action="." method="get" id="search" class="group relative block w-full bg-blue-700 rounded-full shadow-inner md:w-4/12 md:-my-2">
+            <input type="text" name="search" placeholder="Search this directory..." value="{{ search }}"
+                class="bg-transparent font-sans placeholder-gray-900 text-white w-full px-10 py-2"
+                v-model="search"
+            >
+
+            <div class="absolute flex items-center left-0 inset-y-0 ml-4 pointer-events-none">
+                <i class="fas fa-search fa-fw text-blue-900 text-sm"></i>
+            </div>
+
+            <div class="flex items-center absolute right-0 inset-y-0 mr-2" v-show="search">
+                <a href="."  class="flex justify-center items-center rounded-full text-blue-900 w-6 h-6 hover:bg-red-700 hover:text-white hover:shadow">
+                    <i class="fas fa-times"></i>
+                </a>
+            </div>
+        </form>
     </div>
 </header>