Implement basic search

Add search button, dock restructure
Dynamic app loading for the homescreen and dock
2025-04-06 00:04:43 +03:00 · 2025-04-04 16:49:05 +03:00 · 2025-04-04 15:24:22 +03:00
17 changed files with 377 additions and 28 deletions
--- a/dist/assets/bootstrap-icons-BOrJxbIo.woff
+++ b/dist/assets/bootstrap-icons-BOrJxbIo.woff
--- a/dist/assets/bootstrap-icons-BtvjY1KL.woff2
+++ b/dist/assets/bootstrap-icons-BtvjY1KL.woff2
--- a/dist/assets/index-M6NLxF6S.css
+++ b/dist/assets/index-M6NLxF6S.css
@ -1 +0,0 @@
-body{margin:0;padding:0;background-color:gray}*{box-sizing:border-box}#applist{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-snap-stop:always}#applist-wrapper{width:100%}.applist-page{scroll-snap-align:start;display:grid;grid-template-columns:repeat(4,25%);grid-template-rows:repeat(5,20%);place-items:center;align-items:start;min-width:100vw;max-width:100vw;width:100vw;padding-bottom:25%;padding-top:5%}.applist-page>*:not(.section){width:auto;margin-bottom:5%;display:flex;flex-direction:column;align-items:center}.applist-page:has(.section){display:flex;flex-direction:column;align-items:center;padding:5%;gap:5%}#dock{padding:5%;margin:5%;gap:15px;border-radius:24px;background-color:#00000040;border:1px solid white;display:flex;justify-content:center;position:fixed;bottom:0;left:0;right:0}.section{padding:5%;border-radius:15px;background-color:#00000080;border:1px solid white;width:100%;color:#fff}.ui-button{border:none;border:1px solid white;border-radius:6px;padding:2%;background-color:#00000080;color:#fff;margin:1%}.app-icon[data-v-a45179cd]{display:flex;align-items:center;flex-direction:column;width:max-content;height:max-content}.app-icon .app-icon[data-v-a45179cd]>*:nth-child(n+2){padding-bottom:10px}.app-image[data-v-a45179cd]{width:14vw;height:auto;border-radius:12px}.app-label[data-v-a45179cd]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10pt;color:var(--label-color)}.app-package[data-v-a45179cd]{font-size:1px;color:#0000}img[data-v-27ae4006]{width:15%;height:auto}
--- a/dist/assets/index-_sk3xYAV.css
+++ b/dist/assets/index-_sk3xYAV.css
--- a/dist/assets/index-mum_jNSN.js
+++ b/dist/assets/index-mum_jNSN.js
--- a/dist/assets/index-zJphMIID.js
+++ b/dist/assets/index-zJphMIID.js
--- a/dist/bundle.zip
+++ b/dist/bundle.zip
--- a/dist/error.svg
+++ b/dist/error.svg
@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="150 240 165 165"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="dotgrid-25G10-623290.svg"
+   width="165"
+   height="165"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="false"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:clip-to-page="false"
+     inkscape:antialias-rendering="true"
+     showborder="true"
+     inkscape:zoom="3.608628"
+     inkscape:cx="47.38643"
+     inkscape:cy="80.501509"
+     inkscape:window-width="1920"
+     inkscape:window-height="1014"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <!-- Filled triangle -->
+  <path
+     stroke-width="15.0001"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke="#ff8888"
+     fill="#ff8888"
+     d="M 157.49952,389.99997 H 307.50049 L 232.5,254.99926 Z"
+     id="path1" />
+  <path
+     stroke-width="15"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke="#000000"
+     fill="none"
+     d="m 232.49948,283.49921 v 60"
+     id="path2" />
+  <circle
+     cx="232.56358"
+     cy="371.59991"
+     stroke="rgb(255,136,136)"
+     stroke-width="7.50004"
+     fill="rgb(0,0,0)"
+     id="circle2"
+     style="fill:#000000;fill-opacity:1;stroke:none"
+     r="7.5" />
+  <!-- Vertical line -->
+  <!-- Circle below the vertical line -->
+</svg>
--- a/dist/index.html
+++ b/dist/index.html
@ -5,8 +5,8 @@
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SpringBoard</title>
-    <script type="module" crossorigin src="/assets/index-zJphMIID.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-M6NLxF6S.css">
+    <script type="module" crossorigin src="/assets/index-mum_jNSN.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-_sk3xYAV.css">
  </head>
  <body style="background-color:transparent;">
    <div id="app"></div>
--- a/package.json
+++ b/package.json
@ -11,6 +11,8 @@
  },
  "dependencies": {
    "@bridgelauncher/api-mock": "^0.1.0",
+    "bootstrap-icons": "^1.11.3",
+    "fuzzy": "^0.1.3",
    "vue": "^3.5.13"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -11,6 +11,12 @@ importers:
      '@bridgelauncher/api-mock':
        specifier: ^0.1.0
        version: 0.1.0
+      bootstrap-icons:
+        specifier: ^1.11.3
+        version: 1.11.3
+      fuzzy:
+        specifier: ^0.1.3
+        version: 0.1.3
      vue:
        specifier: ^3.5.13
        version: 3.5.13(typescript@5.8.2)
@ -424,6 +430,9 @@ packages:
  '@vue/shared@3.5.13':
    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}

+  bootstrap-icons@1.11.3:
+    resolution: {integrity: sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==}
+
  braces@3.0.3:
    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
    engines: {node: '>=8'}
@ -461,6 +470,10 @@ packages:
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
    os: [darwin]

+  fuzzy@0.1.3:
+    resolution: {integrity: sha512-/gZffu4ykarLrCiP3Ygsa86UAo1E5vEVlvTrpkKywXSbP9Xhln3oSp9QSV57gEq3JFFpGJ4GZ+5zdEp3FcUh4w==}
+    engines: {node: '>= 0.6.0'}
+
  immutable@5.1.1:
    resolution: {integrity: sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg==}

@ -858,6 +871,8 @@ snapshots:

  '@vue/shared@3.5.13': {}

+  bootstrap-icons@1.11.3: {}
+
  braces@3.0.3:
    dependencies:
      fill-range: 7.1.1
@ -912,6 +927,8 @@ snapshots:
  fsevents@2.3.3:
    optional: true

+  fuzzy@0.1.3: {}
+
  immutable@5.1.1: {}

  is-extglob@2.1.1:
--- a/public/error.svg
+++ b/public/error.svg
@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="150 240 165 165"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="dotgrid-25G10-623290.svg"
+   width="165"
+   height="165"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="false"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:clip-to-page="false"
+     inkscape:antialias-rendering="true"
+     showborder="true"
+     inkscape:zoom="3.608628"
+     inkscape:cx="47.38643"
+     inkscape:cy="80.501509"
+     inkscape:window-width="1920"
+     inkscape:window-height="1014"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <!-- Filled triangle -->
+  <path
+     stroke-width="15.0001"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke="#ff8888"
+     fill="#ff8888"
+     d="M 157.49952,389.99997 H 307.50049 L 232.5,254.99926 Z"
+     id="path1" />
+  <path
+     stroke-width="15"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke="#000000"
+     fill="none"
+     d="m 232.49948,283.49921 v 60"
+     id="path2" />
+  <circle
+     cx="232.56358"
+     cy="371.59991"
+     stroke="rgb(255,136,136)"
+     stroke-width="7.50004"
+     fill="rgb(0,0,0)"
+     id="circle2"
+     style="fill:#000000;fill-opacity:1;stroke:none"
+     r="7.5" />
+  <!-- Vertical line -->
+  <!-- Circle below the vertical line -->
+</svg>
--- a/src/App.vue
+++ b/src/App.vue
@ -13,13 +13,17 @@
      </template>
    </Suspense>
  </div>
-  <Dock></Dock>
+  <div id="dock-wrapper">
+    <Search></Search>
+    <Dock></Dock>
+  </div>
 </template>

 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onUnmounted } from 'vue';
 import AppIcon from './components/AppIcon.vue';
 import Dock from './components/Dock.vue';
+import Search from './components/Search.vue';
 import Settings from './components/Settings.vue';

 const apps = ref([])
@ -28,10 +32,22 @@ async function loadApps() {
  const resp = await fetch(Bridge.getAppsURL())
  const data = await resp.json()
  apps.value = data.apps.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }))
+  window.springboard.apps = apps.value;
 }

 loadApps()

+let lastUpdate = 0;
+function updateApps() {
+  const now = performance.now();
+  if (now - lastUpdate >= 100) {
+    loadApps();
+    lastUpdate = now;
+  }
+  requestAnimationFrame(updateApps);
+}
+updateApps();
+
 const itemsPerPage = 4 * 6;
 const paginatedApps = computed(() => {
  return Array(Math.ceil(apps.value.length / itemsPerPage)).fill().map((_, index) => {
--- a/src/components/AppIcon.vue
+++ b/src/components/AppIcon.vue
@ -36,6 +36,21 @@ if (props.label.length >= 12) {
 function handleClick() {
  Bridge.requestLaunchApp(props.packageName);
 }
+
+async function loadIcon() {
+  const iconsrc = await Bridge.getDefaultAppIconURL(props.packageName);
+  const img = new Image();
+  img.src = iconsrc;
+  img.onload = () => {
+    icon.value = iconsrc;
+  };
+  img.onerror = () => {
+    if (icon.value != '/error.svg') icon.value = '/error.svg';
+    setTimeout(loadIcon, 100);
+  };
+}
+
+loadIcon();
 </script>

 <template>
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@ -0,0 +1,152 @@
+<template>
+  <Suspense>
+    <div id="search_background">
+      <div class="section" id="search_results">
+        <AppIcon 
+          v-for="(app, index) in filteredApps" 
+          :key="app.packageName || index" 
+          :packageName="app.packageName" 
+          :label="app.label"
+        />
+      </div>
+    </div>
+  </Suspense>
+  <div id="search_maindiv">
+    <input 
+      type="text" 
+      @focus="openSearch" 
+      placeholder="Search"
+    >
+    <i class="bi bi-x-circle"></i>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import fuzzy from 'fuzzy';
+import AppIcon from './AppIcon.vue';
+
+const filteredApps = ref([]);
+
+function openSearch() {
+  const inputElement = document.querySelector('#search_maindiv input');
+  const backgroundElement = document.querySelector('#search_background');
+
+  function handleInput() {
+    const value = inputElement.value.toString();
+
+    const apps = window.springboard.apps || [];
+    const searchList = apps.map(app => app.label);
+
+    const results = fuzzy.filter(value, searchList);
+    
+    filteredApps.value = results
+      .slice(0, 8)
+      .map(result => apps[result.index]);
+  }
+
+  if (!inputElement.hasAttribute('data-added')) {
+    inputElement.addEventListener('input', handleInput);
+    inputElement.addEventListener('blur', async () => {
+      await new Promise(resolve => setTimeout(resolve, 100));
+      inputElement.value = '';
+      backgroundElement.style.opacity = '0';
+      backgroundElement.style.pointerEvents = 'none';
+      inputElement.removeEventListener('input', handleInput);
+      filteredApps.value = [];
+      inputElement.removeAttribute('data-added');
+    });
+    inputElement.setAttribute('data-added', 'true');
+  }
+  
+  backgroundElement.style.opacity = '1';
+  backgroundElement.style.pointerEvents = 'all';
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'bootstrap-icons/font/bootstrap-icons.css';
+
+#search_results {
+  scroll-snap-align: center;
+  display: grid; 
+  grid-template-columns: repeat(4, 25%);
+  grid-template-rows: repeat(2, 50%);
+  place-items: center;
+  align-items: start;
+}
+
+#search_background {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 99;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0,0,0,0.25);
+  padding: 5%;
+  transition: opacity 0.25s ease-in-out;
+}
+
+#search_maindiv {
+  z-index: 999;
+  width: 25% !important;
+  border: none;
+  border: 1px solid white;
+  border-radius: 300px;
+  padding: 2% 4%;
+  background-color: rgba(0,0,0,0.25);
+  color: white;
+  margin-bottom: 3%;
+  display: flex;
+  transition: all 0.1s ease-in-out;
+  &:has(input:focus) {
+    transition: all 0.25s ease-in-out;
+    transform:translateY(-550%);
+    width: 80% !important;
+    & > i {
+      transition: all 0.5s ease-in-out;
+      opacity: 0.5;
+      pointer-events: all;
+      width: max-content;
+    }
+    & > input {
+      text-align: left;
+    }
+  }
+  &:has(input:not(:placeholder-shown)) {
+    & > i {
+      opacity: 1 !important;
+    }
+  }
+}
+
+input {
+  background-color: transparent;
+  border: none;
+  outline: none;
+  color: white;
+  width: 100% !important;
+  text-align: center;
+  &::placeholder {
+    color: white;
+  }
+  &:focus {
+    &::placeholder {
+      color: transparent;
+    }
+  }
+}
+
+i {
+  position: relative;
+  right: 0;
+  opacity: 0.0;
+  transition: all 0.25s ease-in-out;
+  pointer-events: none;
+  width: 0;
+  color: white !important;
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -12,4 +12,9 @@ if (!window.Bridge) {

 Bridge.requestSetBridgeTheme('system');

+window.springboard = {
+  apps: [],
+  labelColor: 'ffffff'
+}
+
 createApp(App).mount('#app')
--- a/src/style.scss
+++ b/src/style.scss
@ -20,7 +20,7 @@ body {
 }

 .applist-page {
-  scroll-snap-align: start;
+  scroll-snap-align: center;
  display: grid; 
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(5, 20%);
@ -47,19 +47,27 @@ body {
  }  
 }

+#dock-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 5%;
+}
+
 #dock {
  padding: 5%;
-  margin: 5%;
  gap: 15px;
  border-radius: 24px;
  background-color: rgba(0,0,0,0.25);
  border: 1px solid white;
  display: flex;
  justify-content: center;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  width: 100%;
 }

 .section {
Author	SHA1	Message	Date
Ann	386757cbb9	Implement basic search	2025-04-06 00:04:43 +03:00
Ann	ab3380b68e	Add search button, dock restructure	2025-04-04 16:49:05 +03:00
Ann	e38c8421f4	Dynamic app loading for the homescreen and dock	2025-04-04 15:24:22 +03:00
				`@ -1 +0,0 @@`
				body{margin:0;padding:0;background-color:gray}{box-sizing:border-box}#applist{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-snap-stop:always}#applist-wrapper{width:100%}.applist-page{scroll-snap-align:start;display:grid;grid-template-columns:repeat(4,25%);grid-template-rows:repeat(5,20%);place-items:center;align-items:start;min-width:100vw;max-width:100vw;width:100vw;padding-bottom:25%;padding-top:5%}.applist-page>:not(.section){width:auto;margin-bottom:5%;display:flex;flex-direction:column;align-items:center}.applist-page:has(.section){display:flex;flex-direction:column;align-items:center;padding:5%;gap:5%}#dock{padding:5%;margin:5%;gap:15px;border-radius:24px;background-color:#00000040;border:1px solid white;display:flex;justify-content:center;position:fixed;bottom:0;left:0;right:0}.section{padding:5%;border-radius:15px;background-color:#00000080;border:1px solid white;width:100%;color:#fff}.ui-button{border:none;border:1px solid white;border-radius:6px;padding:2%;background-color:#00000080;color:#fff;margin:1%}.app-icon[data-v-a45179cd]{display:flex;align-items:center;flex-direction:column;width:max-content;height:max-content}.app-icon .app-icon[data-v-a45179cd]>*:nth-child(n+2){padding-bottom:10px}.app-image[data-v-a45179cd]{width:14vw;height:auto;border-radius:12px}.app-label[data-v-a45179cd]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10pt;color:var(--label-color)}.app-package[data-v-a45179cd]{font-size:1px;color:#0000}img[data-v-27ae4006]{width:15%;height:auto}