Dynamic app loading for the homescreen and dock

dist/assets/index-DTY-5c6x.css

@@ -1 +1 @@
-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}
+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-c4a1272c]{display:flex;align-items:center;flex-direction:column;width:max-content;height:max-content}.app-icon .app-icon[data-v-c4a1272c]>*:nth-child(n+2){padding-bottom:10px}.app-image[data-v-c4a1272c]{width:14vw;height:auto;border-radius:12px}.app-label[data-v-c4a1272c]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10pt;color:var(--label-color)}.app-package[data-v-c4a1272c]{font-size:1px;color:#0000}img[data-v-27ae4006]{width:15%;height:auto}

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>

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>
+    <script type="module" crossorigin src="/assets/index-IwuFnyur.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-M6NLxF6S.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-DTY-5c6x.css">
   </head>
   <body style="background-color:transparent;">
     <div id="app"></div>

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>

src/App.vue

@@ -17,7 +17,7 @@
 </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 Settings from './components/Settings.vue';
@@ -32,6 +32,17 @@ async function loadApps() {
 
 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) => {

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>

src/components/Search.vue

@@ -0,0 +1 @@
+<!-- Nothing to see here! (yet) -->