Merge pull request #40 from Flow-Works/feature/searchbar

[⚡] Add search bar functionality #39

src/apps/settings.ts

@@ -6,7 +6,7 @@ export default class SettingsApp implements App {
   meta = {
     name: 'Settings',
     pkg: 'flow.settings',
-    icon: icon,
+    icon,
     version: '1.0.0'
   }
 

src/style.less

@@ -144,18 +144,20 @@ launcher {
     padding: 20px;
     margin: 40px;
     justify-content: center;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
-    grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
+    display: flex;
+    flex-wrap: wrap;
     gap: 40px;
 
     app {
+      flex: 1 0 21%;
+      flex-grow: 0;
       align-items: center;
       justify-content: center;
       display: flex;
       flex-direction: column;
       gap: 10px;
-      height: max-content;
+      min-width: 125px;
+      max-width: 125px;
       text-align: center;
       overflow: hidden;
 

src/wm.ts

@@ -223,7 +223,33 @@ class WM {
     this.launcher.innerHTML = `
       <input placeholder="Search"/>
       <apps></apps>
-    `
+    `;
+
+    (this.launcher.querySelector('input') as HTMLInputElement).onkeyup = () => {
+      (this.launcher.querySelector('apps') as HTMLElement).innerHTML = ''
+      if ((this.launcher.querySelector('input') as HTMLInputElement).value !== '') {
+        window.flow.apps.filter(x => x.meta.name.toLowerCase().includes((this.launcher.querySelector('input') as HTMLInputElement).value.toLowerCase())).forEach((app) => {
+          const appElement = document.createElement('app')
+          appElement.onclick = async () => {
+            await window.flow.openApp(app.meta.pkg)
+            this.toggleLauncher()
+          }
+          appElement.innerHTML = `<img src="${app.meta.icon}"><div>${app.meta.name}</div>`
+          this.launcher.querySelector('apps')?.appendChild(appElement)
+        })
+      } else {
+        window.flow.apps.forEach((app) => {
+          window.preloader.setStatus(`adding apps to app launcher\n${app.meta.name}`)
+          const appElement = document.createElement('app')
+          appElement.onclick = async () => {
+            await window.flow.openApp(app.meta.pkg)
+            window.wm.toggleLauncher()
+          }
+          appElement.innerHTML = `<img src="${app.meta.icon}"><div>${app.meta.name}</div>`
+          window.wm.launcher.querySelector('apps')?.appendChild(appElement)
+        })
+      }
+    }
 
     this.launcher.onclick = (e) => {
       if (e.target !== e.currentTarget) return