fix: load custom fonts on restart (#1499)

- fix: load custom fonts on restart
- fix: input placement on extension tab sidebar

Author: bajrangCoder

src/lib/fonts.js

@@ -7,6 +7,8 @@ import MesloLGSNFRegular from "../res/fonts/MesloLGSNFRegular.ttf";
 import robotoMono from "../res/fonts/RobotoMono.ttf";
 
 const fonts = new Map();
+const customFontNames = new Set();
+const CUSTOM_FONTS_KEY = "custom_fonts";
 
 add(
 	"Fira Code",
@@ -121,10 +123,47 @@ add(
 }`,
 );
 
+// Load custom fonts on module initialization
+loadCustomFonts();
+
 function add(name, css) {
 	fonts.set(name, css);
 }
 
+function addCustom(name, css) {
+	fonts.set(name, css);
+	customFontNames.add(name);
+	saveCustomFonts();
+}
+
+function saveCustomFonts() {
+	const customFonts = {};
+
+	for (const name of customFontNames) {
+		const css = fonts.get(name);
+		if (css) {
+			customFonts[name] = css;
+		}
+	}
+
+	localStorage.setItem(CUSTOM_FONTS_KEY, JSON.stringify(customFonts));
+}
+
+function loadCustomFonts() {
+	try {
+		const customFonts = localStorage.getItem(CUSTOM_FONTS_KEY);
+		if (customFonts) {
+			const parsed = JSON.parse(customFonts);
+			for (const [name, css] of Object.entries(parsed)) {
+				fonts.set(name, css);
+				customFontNames.add(name);
+			}
+		}
+	} catch (error) {
+		console.error("Failed to load custom fonts:", error);
+	}
+}
+
 function get(name) {
 	return fonts.get(name);
 }
@@ -134,7 +173,12 @@ function getNames() {
 }
 
 function remove(name) {
-	return fonts.delete(name);
+	const result = fonts.delete(name);
+	if (result) {
+		customFontNames.delete(name);
+		saveCustomFonts();
+	}
+	return result;
 }
 
 function has(name) {
@@ -224,6 +268,7 @@ async function loadFont(name) {
 
 export default {
 	add,
+	addCustom,
 	get,
 	getNames,
 	remove,

src/pages/fontManager/fontManager.js

@@ -155,7 +155,7 @@ export default function fontManager() {
 			if (editedCSS === null) return; // User cancelled
 
 			// Add the font
-			fonts.add(fontName, editedCSS);
+			fonts.addCustom(fontName, editedCSS);
 			renderFonts();
 			toast(`Font "${fontName}" added successfully`);
 		} catch (error) {

src/sidebarApps/extensions/style.scss

@@ -6,6 +6,7 @@
     display: flex;
     flex-direction: column;
     border-bottom: 1px solid var(--border-color);
+    box-sizing: border-box;
 
     .title {
       font-weight: 600;
@@ -43,14 +44,15 @@
     }
 
     input[type="search"] {
-      width: 100%;
-      padding: 0.5rem;
+      width: 100% !important;
+      padding: 0.5rem !important;
       border: 1px solid var(--border-color);
       border-radius: 6px;
       background: var(--secondary-color);
       color: var(--primary-text-color);
       font-size: 0.875rem;
       transition: all 0.2s ease;
+      margin: 0 !important;
 
       &:focus {
         outline: none;