refactor: pin "create custom app" and "request an app" cards

Author: xbubbo

static/apps.html

@@ -41,8 +41,10 @@
       <option value="mail">&#77;&#97;&#105;&#108;</option>
     </select>
   </div>
-  <div class="pinned"></div>
-  <div class="apps"></div>
+  <div id="apps-container">
+    <div class="pinned"></div>
+    <div class="apps"></div>
+  </div>
   <script src="assets/js/launcher.js"></script>
   <script src="/assets/js/main.js"></script>
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-WKJQ5QHQTJ"></script>

static/assets/js/launcher.js

@@ -118,8 +118,8 @@ function createCustomApp() {
     saveCustomApp(customApp);
 
     const card = renderAppCard(customApp, 0, true);
-    const nonPinnedContainer = document.querySelector(".apps");
-    nonPinnedContainer.insertBefore(card, nonPinnedContainer.firstChild);
+    const pinnedContainer = document.querySelector(".pinned");
+    pinnedContainer.appendChild(card);
   }
 }
 
@@ -214,27 +214,13 @@ function renderAppCard(app, appIndex, isCustom = false) {
   link.appendChild(paragraph);
   columnDiv.appendChild(link);
 
-  if (appIndex !== 0) {
+  if (appIndex !== 0 && appIndex !== 1) {
     columnDiv.appendChild(createPinButton(appIndex));
   }
 
   return columnDiv;
 }
 
-function loadCustomApps() {
-  const storedApps = getFromStorage("custom");
-
-  if (storedApps) {
-    const apps = JSON.parse(storedApps);
-    const nonPinnedContainer = document.querySelector(".apps");
-
-    Object.values(apps).forEach(app => {
-      const card = renderAppCard(app, 0, true);
-      nonPinnedContainer.insertBefore(card, nonPinnedContainer.firstChild);
-    });
-  }
-}
-
 function getJsonPath() {
   if (isGamesPage) return "/assets/json/games.min.json";
   if (isToolsPage) return "/assets/json/t.min.json";
@@ -268,15 +254,25 @@ function loadAppsFromJson() {
   fetch(jsonPath)
     .then(response => response.json())
     .then(appsList => {
+      const nonPinnedContainer = document.querySelector(".apps");
+      const pinnedContainer = document.querySelector(".pinned");
+      const pinnedList = getPinnedApps();
+
+      const appsContainer = document.getElementById("apps-container");
+      if (appsContainer) {
+        appsContainer.appendChild(pinnedContainer);
+        appsContainer.appendChild(nonPinnedContainer);
+      }
+
+      const specialCards = appsList.splice(0, 2);
+
       appsList.sort((a, b) => {
         if (a.name.startsWith("[Custom]")) return -1;
         if (b.name.startsWith("[Custom]")) return 1;
         return a.name.localeCompare(b.name);
       });
 
-      const nonPinnedContainer = document.querySelector(".apps");
-      const pinnedContainer = document.querySelector(".pinned");
-      const pinnedList = getPinnedApps();
+      appsList.unshift(...specialCards);
 
       let appIndex = 0;
 
@@ -285,7 +281,9 @@ function loadAppsFromJson() {
 
         const card = renderAppCard(app, appIndex);
 
-        if (appIndex !== 0 && isAppPinned(appIndex, pinnedList)) {
+        if (appIndex === 0 || appIndex === 1) {
+          pinnedContainer.appendChild(card);
+        } else if (pinnedList != null && isAppPinned(appIndex, pinnedList)) {
           pinnedContainer.appendChild(card);
         } else {
           nonPinnedContainer.appendChild(card);
@@ -294,15 +292,27 @@ function loadAppsFromJson() {
         appIndex++;
       });
 
-      const appsContainer = document.getElementById("apps-container");
-      appsContainer.appendChild(pinnedContainer);
-      appsContainer.appendChild(nonPinnedContainer);
+      loadCustomAppsInline();
     })
     .catch(error => {
       console.error("Error fetching app data:", error);
     });
 }
 
+function loadCustomAppsInline() {
+  const storedApps = getFromStorage("custom");
+
+  if (storedApps) {
+    const apps = JSON.parse(storedApps);
+
+    const pinnedContainer = document.querySelector(".pinned");
+    Object.values(apps).forEach(app => {
+      const card = renderAppCard(app, 0, true);
+      pinnedContainer.appendChild(card);
+    });
+  }
+}
+
 function filterByCategory() {
   const selectedCategories = Array.from(document.querySelectorAll("#category option:checked")).map(option => option.value);
 
@@ -331,6 +341,5 @@ window.category = filterByCategory;
 window.bar = filterBySearchTerm;
 
 document.addEventListener("DOMContentLoaded", () => {
-  loadCustomApps();
   loadAppsFromJson();
 });

static/assets/json/apps.json

@@ -1,22 +1,16 @@
 [
+    {
+    "name": "Request An App",
+    "link": "https://forms.gle/vwdHN3iPz5cLaHaMA",
+    "image": "/assets/media/icons/request.webp",
+    "categories": ["all"]
+  },
   {
-    "name": "! Create Custom App",
+    "name": "Create Custom App",
     "image": "/assets/media/icons/custom.webp",
     "categories": ["all"],
     "custom": "true"
   },
-  {
-    "name": "! Interstellar FAQ/Docs",
-    "image": "/assets/media/icons/help_center_googlefonts.png",
-    "link": "https://docs.gointerstellar.app",
-    "categories": ["all"]
-  },
-  {
-    "name": "! [NEW] Request An App",
-    "link": "https://forms.gle/vwdHN3iPz5cLaHaMA",
-    "image": "/assets/media/icons/request.webp",
-    "categories": ["all"]
-  },
   {
     "name": "Amazon",
     "link": "https://amazon.com/",

static/assets/json/apps.min.json

@@ -1,22 +1,16 @@
 [
+    {
+    "name": "Request A Game",
+    "link": "https://forms.gle/vwdHN3iPz5cLaHaMA",
+    "image": "/assets/media/icons/request.webp",
+    "categories": ["all"]
+  },
   {
-    "name": "! Create Custom App",
+    "name": "Create Custom Game",
     "image": "/assets/media/icons/custom.webp",
     "categories": ["all"],
     "custom": "true"
   },
-  {
-    "name": "! Interstellar FAQ/Docs",
-    "image": "/assets/media/icons/help_center_googlefonts.png",
-    "link": "https://docs.gointerstellar.app",
-    "categories": ["all"]
-  },
-  {
-    "name": "! [NEW] Request A Game",
-    "link": "https://forms.gle/vwdHN3iPz5cLaHaMA",
-    "image": "/assets/media/icons/request.webp",
-    "categories": ["all"]
-  },
   {
     "name": "Fancade",
     "link": "https://play.fancade.com",

static/assets/json/games.json

@@ -34,8 +34,10 @@
       <option value="local">&#76;&#111;&#99;&#97;&#108;</option>
     </select>
   </div>
-  <div class="pinned"></div>
-  <div class="apps"></div>
+  <div id="apps-container">
+    <div class="pinned"></div>
+    <div class="apps"></div>
+  </div>
   <script src="/assets/js/launcher.js"></script>
   <script src="./assets/ultraviolet/bundle.js"></script>
   <script src="./assets/ultraviolet/config.js"></script>