feat: sort packages by number of patches

src/app.css

@@ -102,7 +102,7 @@ h6 {
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: var(--grey-six);
+    background-color: var(--grey-one);
     background-clip: content-box;
     border-radius: 100px;
 }

src/data/api/index.ts

@@ -1,11 +1,11 @@
-import type { Readable, Subscriber, Unsubscriber, Writable } from "svelte/store";
-import { writable } from "svelte/store";
-import { error } from "@sveltejs/kit";
+import type { Readable, Subscriber, Unsubscriber, Writable } from 'svelte/store';
+import { writable } from 'svelte/store';
+import { error } from '@sveltejs/kit';
 
-import { prerendering, browser, dev } from "$app/environment";
+import { prerendering, browser, dev } from '$app/environment';
 
-import * as settings from "./settings";
-import * as cache from "./cache";
+import * as settings from './settings';
+import * as cache from './cache';
 
 export class API<T> implements Readable<T> {
 	private store: Writable<T>;
@@ -13,7 +13,11 @@ export class API<T> implements Readable<T> {
 	has_requested: boolean;
 
 	// `transform` will transform the data received from the API.
-  constructor(public readonly endpoint: string, private readonly default_value: T, private readonly transform: ((v: any) => T) = (v) => v as T) {
+	constructor(
+		public readonly endpoint: string,
+		private readonly default_value: T,
+		private readonly transform: (v: any) => T = (v) => v as T
+	) {
 		// Initialize with cached data if possible.
 		const cached_data = cache.get(this.endpoint);
 		this.has_requested = cached_data !== null;
@@ -54,7 +58,7 @@ export class API<T> implements Readable<T> {
 		if (!this.has_requested) {
 			return this.update();
 		}
-    return Promise.resolve()
+		return Promise.resolve();
 	}
 
 	// Implements the load function found in `+page/layout.ts` files.
@@ -66,7 +70,9 @@ export class API<T> implements Readable<T> {
 
 			// Might be better to actually return some data from the load function and use that on the client.
 			if (!(dev || browser || prerendering)) {
-        throw new Error("The API client is not optimized for production server-side rendering. Please change that :)");
+				throw new Error(
+					'The API client is not optimized for production server-side rendering. Please change that :)'
+				);
 			}
 
 			try {
@@ -74,7 +80,7 @@ export class API<T> implements Readable<T> {
 				return {};
 			} catch (e) {
 				console.error(e);
-        throw error(504, "API Request Error");
+				throw error(504, 'API Request Error');
 			}
 		};
 	}
@@ -92,33 +98,35 @@ export class API<T> implements Readable<T> {
 
 // API Endpoints
 import type { Patch, Repository, Tool } from '../types';
-import { dev_log } from "$lib/utils";
+import { dev_log } from '$lib/utils';
 
 export type ReposData = Repository[];
 export type PatchesData = { patches: Patch[]; packages: string[] };
 export type ToolsData = { [repo: string]: Tool };
 
-export const repositories = new API<ReposData>("contributors", [], json => json.repositories);
+export const repositories = new API<ReposData>('contributors', [], (json) => json.repositories);
 
 // It needs to look this way to not break everything.
 const tools_placeholder: ToolsData = {
-  "revanced/revanced-manager": {
-    version: "v0.0.0",
-    timestamp: "",
-    repository: "",
-    assets: [{
-      url: "",
-      name: "",
-      content_type: "",
-      size: null,
-    }]
+	'revanced/revanced-manager': {
+		version: 'v0.0.0',
+		timestamp: '',
+		repository: '',
+		assets: [
+			{
+				url: '',
+				name: '',
+				content_type: '',
+				size: null
 			}
+		]
 	}
+};
 
-export const tools = new API<ToolsData>("tools", tools_placeholder, json => {
+export const tools = new API<ToolsData>('tools', tools_placeholder, (json) => {
 	// The API returns data in a weird shape. Make it easier to work with.
 	let map: Map<string, Tool> = new Map();
-  for (const tool of json["tools"]) {
+	for (const tool of json['tools']) {
 		const repo: string = tool.repository;
 
 		if (!map.has(repo)) {
@@ -145,17 +153,20 @@ export const tools = new API<ToolsData>("tools", tools_placeholder, json => {
 	return Object.fromEntries(map);
 });
 
-export const patches = new API<PatchesData>("patches", { patches: [], packages: [] }, patches => {
-	let packages: string[] = [];
+export const patches = new API<PatchesData>('patches', { patches: [], packages: [] }, (patches) => {
+	const packagesWithCount: { [key: string]: number } = {};
 
-	// gets packages
+	// gets packages and patch count
 	for (let i = 0; i < patches.length; i++) {
 		patches[i].compatiblePackages.forEach((pkg: Patch) => {
-			let index = packages.findIndex((x) => x == pkg.name);
-			if (index === -1) {
-				packages.push(pkg.name);
-			}
+			packagesWithCount[pkg.name] = (packagesWithCount[pkg.name] || 0) + 1;
 		});
 	}
+
+	// sort packages by patch count to get most relevant apps on top
+	const packages = Object.entries(packagesWithCount)
+		.sort((a, b) => b[1] - a[1])
+		.map((pkg) => pkg[0]);
+
 	return { patches, packages };
 });

src/lib/components/molecules/TreeMenu.svelte

@@ -12,14 +12,16 @@
 
 <style>
 	.menu {
-		height: calc(100vh - 7rem);
+		height: calc(100vh - 70px);
 		width: 100%;
 		padding: 0px 30px 30px 10px;
 		display: flex;
 		flex-direction: column;
 		position: sticky;
-		top: 7rem;
+		top: 70px;
+		padding-top: calc(7rem - 70px);
 		overflow-y: scroll;
+		border-right: 1px solid var(--grey-six);
 	}
 
 	h5 {