feat: add sorting and filtering in file list

editor/public/static/css/edit.css

@@ -338,9 +338,11 @@ button.improve {
     display: flex;
     flex-direction: column;
     max-width: 30em;
+    transform: translateX(0%);
+    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
 
     &:not(.show) {
-        display: none;
+        transform: translateX(100%);
     }
 
     #close-notifs {

editor/public/static/css/index.css

@@ -4,6 +4,7 @@
     grid-auto-rows: 15em;
     gap: 0.8em;
     place-items: center;
+    padding: 0.8em 0;
     
     .file {
         display: flex;
@@ -19,6 +20,10 @@
         padding: 0.4em;
         border-radius: 1.2em;
 
+        &.hidden {
+            display: none;
+        }
+
         &:hover {
             background-color: #f8f8f8;
         }
@@ -34,4 +39,58 @@
             font-weight: bold;
         }
     }
+}
+
+.toolbar {
+    display: flex;
+    gap: 1.2em;
+    border-bottom: solid black 1px;
+    padding: 0.4em 0;
+
+    .tool {
+        display: flex;
+        flex-direction: column;
+        gap: 0.2em;
+
+        label[for] {
+            font-weight: bold;
+        }
+
+        input, select {
+            font-family: inherit;
+            font-size: inherit;
+            height: 100%;
+        }
+
+        .toggle {
+            height: 2em;
+            border-radius: 1em;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            user-select: none;
+            cursor: pointer;
+
+            input {
+                display: none;
+
+                &:not(:checked) ~ .off, &:checked ~ .on {
+                    background-color: #6ee74a;
+                }
+            }
+
+            div {
+                padding: 0 0.4em;
+                display: grid;
+                place-items: center;
+
+                &.off {
+                    border-radius: 1em 0 0 1em;
+                }
+
+                &.on {
+                    border-radius: 0 1em 1em 0;
+                }
+            }
+        }
+    }
 }