front end work; added search

app/public/css/app.css

@@ -1,13 +1,15 @@
 .nav {
-	position: absolute;
-	top: -130px;
-	right: 0;
+	display: flex;
+	justify-content: space-between;
+	left: 0;
+	padding-bottom: 10px;
 }
 
 .nav ul {
 	margin: 0;
 	list-style: none;
-	text-align: center;
+	text-align: left;
+	padding-inline-start: 0px;
 }
 
 .nav li {
@@ -19,6 +21,23 @@
 	line-height: 40px;
 }
 
+#search {
+	padding: 6px 12px;
+	background: rgb(31, 32, 35);
+	border: 1px solid rgb(60, 63, 68);
+	border-radius: 4px;
+	font-size: 13px;
+	color: rgb(247, 248, 248);
+	appearance: none;
+	transition: border 0.15s ease 0s;
+	:focus{
+		outline: none;
+		box-shadow: none;
+		border-color: rgb(100, 153, 255);
+	}
+}
+
+
 .nav a {
 	display: block;
 	color: inherit;
@@ -30,7 +49,7 @@
 }
 
 .nav button {
-	height: 40px;
+	height: 14px;
 }
 
 .nav button:hover {
@@ -72,7 +91,7 @@
 }
 
 #dropArea {
-  border: 2px dashed #ccc;
+  border: 2px dashed #cccccc4f;
   border-radius: 20px;
   width: 100%;
   font-family: sans-serif;
@@ -159,3 +178,7 @@ label {
 	left: 50%;
 	transform: translate(-50%, -50%);
   }
+
+  .main {
+	padding-top: 10px;
+  }

app/public/css/index.css

@@ -41,6 +41,24 @@ body {
 	display: none;
 }
 
+@keyframes slideaway {
+    0% { transform: translateY(0); opacity: 1; }
+    100% { transform: translateY(40px); opacity: 0; }
+}
+
+.hide {
+    animation: slideaway 200ms forwards;
+}
+
+@keyframes slideback {
+    0% { transform: translateY(40px); opacity: 0; }
+    100% { transform: translateY(0); opacity: 1; }
+}
+
+.show {
+    animation: slideback 200ms forwards;
+}
+
 .embedderapp {
 	background: #121212;
 	margin: 130px 0 40px 0;
@@ -99,7 +117,7 @@ body {
 }
 
 .new-embedder {
-	padding: 16px 16px 16px 60px;
+	padding: 16px 16px 16px 16px;
 	height: 65px;
 	border: none;
 	background: rgba(0, 0, 0, 0.003);
@@ -212,7 +230,7 @@ body {
 
 .embedder-list li label {
 	word-break: break-all;
-	padding: 15px 15px 15px 60px;
+	padding: 15px 15px 15px 15px;
 	display: block;
 	line-height: 1.2;
 	transition: color 0.4s;

app/public/js/index.js

@@ -160,11 +160,32 @@ function openFullSize(imageUrl) {
   document.body.appendChild(modal);
   
   // Add an event listener to close the modal when the user clicks on it
-	modal.addEventListener('click', function() {
+  modal.addEventListener("click", function() {
     modal.remove();
   });
 }
 
-function extension(string) {
-	return string.slice((string.lastIndexOf(".") - 2 >>> 0) + 2);
+let searchInput = document.getElementById("search");
+
+searchInput.addEventListener("input", () => {
+  let searchValue = searchInput.value;
+  let mediaList = document.querySelectorAll("ul.embedder-list li");
+
+  mediaList.forEach((li) => {
+    if (!li.id.toLowerCase().includes(searchValue)) { //make lowercase to allow case insensitivity
+      li.classList.add("hide");
+      li.classList.remove("show");
+      li.addEventListener("animationend", function() {
+        if (searchInput.value !== "") {
+          this.style.display = "none";
         }
+      }, {once: true}); // The {once: true} option automatically removes the event listener after it has been called
+    } else {
+      li.style.display = ""; 
+      li.classList.remove("hide");
+      if (searchValue === "" && !li.classList.contains("show")) {  
+        li.classList.add("show");
+      }
+    }
+  });
+});

app/types/db.ts

@@ -46,6 +46,19 @@ export function updateDatabase(oldVersion: number, newVersion: number){
   }
 }
 
+/**Searches the database and returns images with partial or exact keysearches */
+export function searchImages(imagename: string, partial: boolean) {
+  return new Promise((resolve, reject) => {
+    console.log(`searching for ${imagename}`);
+  });
+}
+
+export function updateImageName(oldimagename: string, newname:string) {
+  return new Promise((resolve, reject) => {
+    console.log(`updating ${oldimagename} to ${newname}`);
+  });
+}
+
 /**Inserts a new user to the database */
 export function createUser(username: string, password: string) {
   return new Promise((resolve, reject) => {

app/views/index.ejs

@@ -19,23 +19,25 @@
    </head>
    <body>
       <section class="embedderapp">
+         <header class="header">
+            <h1>Embedder</h1>
             <nav class="nav">
-            <ul>
+               <ul class="left-ul">
                   <li class="user"><%= user.name || user.username %></li>
                   <li>
                      <form action="/logout" method="post">
-                     <button class="logout" type="submit">Sign out</button>
+                        <button class="logout" type="submit"></button>
                      </form>
                   </li>
                   <% if (user.name == "admin" || user.username == "admin") { %>
                   <li>
-                  <button class="adduser" onclick="location.href='/adduser';">Add user</a></button>
+                     <button class="adduser" onclick="location.href='/adduser';"></a></button>
                   </li>
                   <% } %>
                </ul>
+               <input type="text" id="search" name="search" placeholder="Search" value=""/>
             </nav>
-         <header class="header">
-            <h1>Embedder</h1>
+         </header>
          <form action="/" method="post" encType="multipart/form-data">
             <div id="dropArea">
                <p class="dragregion">Upload a file, copy paste, or drag n' drop into the dashed region</p>
@@ -60,12 +62,11 @@
                <p class="dragregion">Click the file to copy the url</p>
             </div>
          </form>
-         </header>
          <% if (Count > 0) { %>
          <section class="main">
             <ul class="embedder-list">
                <% files.forEach(function(file) { %>
-               <li>
+               <li id="<%= file.path %>" class="show">
                   <form action="<%= file.url %>" method="post">
                      <div class="view">
                         <% if (extension(file.path) == ".mp4" || extension(file.path) == ".mov" || extension(file.path) == "webp") { %>