feat: sort by date, size, version

index.html

@@ -15,7 +15,16 @@
 <header><h1>chocomilkyX iPA library</h1></header>
 <div id="container">
   <div id="searchBar">
-    <input id="searchInput" type="text" placeholder="Search apps…">
+    <div class="searchWrap">
+      <input id="searchInput" type="text" placeholder="Search apps…">
+      <select id="sortSelect" title="Sort apps">
+        <option value="newest">Newest</option>
+        <option value="oldest">Oldest</option>
+        <option value="size_desc">Size ↓</option>
+        <option value="size_asc">Size ↑</option>
+        <option value="version">Version</option>
+      </select>
+    </div>
     <button id="importBtn" title="Import Personal Repo">+</button>
   </div>
   <div id="repos"></div>
@@ -24,7 +33,7 @@
 </div>
 <div id="toast"></div>
 <footer class="footer">
-  <span>© 2026 chocomilkyX iPA library - made by @gablilli on</span>
+  <span>© 2026 chocomilkyX iPA library - made by @gablilli</span>
 
   <a
     href="https://github.com/gablilli/chocomilkyX"

static/app.js

@@ -6,6 +6,8 @@ const searchInput = document.getElementById('searchInput');
 const toast = document.getElementById('toast');
 const importBtn = document.getElementById("importBtn");
 const header = document.querySelector("header");
+const sortSelect = document.getElementById("sortSelect");
+let currentSort = "newest";
 
 let currentApps = [];
 let viewingRepoUrl = null;
@@ -75,6 +77,71 @@ function indexRepoApps(repo) {
   });
 }
 
+/* ================= utility sorting ================ */
+
+function getAppDate(app) {
+  if (app.fullDate) return Number(app.fullDate);
+  const d =
+    app.versionDate ||
+    app.versions?.[0]?.versionDate;
+  return d ? new Date(d).getTime() : 0;
+}
+
+function getAppSize(app) {
+  return app.versions?.[0]?.size || app.size || 0;
+}
+
+function getAppVersion(app) {
+  return app.versions?.[0]?.version || app.version || "";
+}
+
+function sortApps(apps) {
+  const arr = apps.slice();
+
+  switch (currentSort) {
+    case "oldest":
+      return arr.sort((a,b)=>getAppDate(a)-getAppDate(b));
+
+    case "size_desc":
+      return arr.sort((a,b)=>getAppSize(b)-getAppSize(a));
+
+    case "size_asc":
+      return arr.sort((a,b)=>getAppSize(a)-getAppSize(b));
+
+    case "version":
+      return arr.sort((a,b)=>
+        String(getAppVersion(b))
+          .localeCompare(getAppVersion(a), undefined, {numeric:true})
+      );
+
+    default: // newest
+      return arr.sort((a,b)=>getAppDate(b)-getAppDate(a));
+  }
+}
+
+/* sorting listener */
+sortSelect.addEventListener("change", () => {
+  currentSort = sortSelect.value;
+  applySearch();
+});
+
+/* helper for showing version when its time */
+function toggleVersionSort({ show, inRepo = false, hasQuery = false }) {
+  const opt = sortSelect.querySelector('option[value="version"]');
+  if (opt) opt.style.display = (inRepo && !hasQuery) ? "none" : "";
+
+  if (!show && sortSelect.value === "version") {
+    currentSort = "newest";
+    sortSelect.value = "newest";
+  }
+
+  if (show) {
+    sortSelect.classList.add("show");
+  } else {
+    sortSelect.classList.remove("show");
+  }
+}
+
 /* ================= load global repos ================= */
 
 let reposLoaded = false;
@@ -203,6 +270,7 @@ async function openRepo(url,useProxy){
   viewingRepoUrl = url;
   searchInput.value = "";
   window.scrollTo({ top: 0 });
+  toggleVersionSort(false);
 
   reposArea.style.display="none";
   appsArea.innerHTML="";
@@ -243,6 +311,8 @@ function renderNextBatch() {
 
 function applySearch() {
   const q = searchInput.value.trim().toLowerCase();
+  const isGlobalSearch = !viewingRepoUrl;
+  const hasQuery = q.length > 0;
   const base = viewingRepoUrl ? currentApps : allAppsIndex;
 
   if (!q) {
@@ -256,22 +326,25 @@ function applySearch() {
       filteredApps=[];
       loaded=0;
       window.onscroll=null;
+      toggleVersionSort({ show: false });
       return;
     }
 
-    filteredApps = base.slice();
+    filteredApps = sortApps(base);
     loaded = 0;
     appsArea.innerHTML = "";
     renderNextBatch();
+    toggleVersionSort({ show: true, inRepo: true, hasQuery: false });
     return;
   }
 
   if (!viewingRepoUrl) reposArea.style.display = "none";
 
-  filteredApps = base.filter(a => a.name?.toLowerCase().includes(q));
+  filteredApps = sortApps(base.filter(a => a.name?.toLowerCase().includes(q)));
   loaded = 0;
   appsArea.innerHTML = "";
   renderNextBatch();
+  toggleVersionSort({ show: true, inRepo: viewingRepoUrl, hasQuery: true });
 
   if (!viewingRepoUrl) {
     window.onscroll = () => {
@@ -366,12 +439,14 @@ backBtn.addEventListener("click", () => {
   window.onscroll = null;
   filteredApps = [];
   loaded = 0;
+  toggleVersionSort(false);
 
   if (reposLoaded) {
     reposArea.style.display = "";
     [...reposArea.children].forEach((el, i) => {
       el.classList.remove("show");
       requestAnimationFrame(() => setTimeout(() => el.classList.add("show"), i * 60));
+      toggleVersionSort(false);
     });
   }
 });

static/css/style.css

@@ -57,6 +57,28 @@ header {
   transition: transform .45s var(--ease);
 }
 
+#sortSelect {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: calc(100% - 12px);
+  border-radius: 12px;
+  padding: 0 10px;
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.12);
+  color: var(--text);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .25s var(--ease);
+}
+
+#sortSelect.show {
+  opacity: 1;
+  transform: translateY(-50%);
+  pointer-events: auto;
+}
+
 #backBtn {
   display: none;
 }
@@ -87,19 +109,28 @@ h1 {
 }
 
 /* search bar */
+.searchWrap {
+  position: relative;
+  flex: 1;
+}
+
 #searchBar {
+  width: 100%;
   display: none;
   gap: 10px;
   margin-bottom: 10px;
   animation: fadeUp .35s var(--ease) both;
+  position: relative;
 }
 
 #searchInput {
+  width: 100%;
   flex: 1;
   padding: 10px 14px;
   border-radius: var(--radius);
   border: 1px solid rgba(255,255,255,0.1);
   background: rgba(255,255,255,0.03);
+  padding-right: 96px;
   color: var(--text);
   font-size: 16px;
   outline: none;