From 22de1591af55d018cb448a2f6342fc16f93c3051 Mon Sep 17 00:00:00 2001
From: ThinLiquid <thnlqd@gmail.com>
Date: Wed, 25 Oct 2023 23:43:58 +0000
Subject: [PATCH] =?UTF-8?q?[=E2=9A=A1]=20Add=20search=20bar=20functionalit?=
 =?UTF-8?q?y=20#39?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apps/settings.ts |  2 +-
 src/style.less       | 10 ++++++----
 src/wm.ts            | 28 +++++++++++++++++++++++++++-
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/apps/settings.ts b/src/apps/settings.ts
index 07f756f..5aa6bad 100644
--- a/src/apps/settings.ts
+++ b/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'
   }
 
diff --git a/src/style.less b/src/style.less
index 36be317..adda753 100644
--- a/src/style.less
+++ b/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;
 
diff --git a/src/wm.ts b/src/wm.ts
index a3f9168..72e579e 100644
--- a/src/wm.ts
+++ b/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