Add stop loading, tab restore, and omnibox improvements

Introduces a stop loading button to the navigation bar, allowing users to halt page loads. Implements tab restore functionality to reopen recently closed tabs via context menu or Ctrl+Shift+T. Enhances the omnibox and search overlay with local bookmark/history suggestions, improved favicon handling, and better search engine icon display. Updates font loading to use woff2 subsets, refines event handling for search engine changes, and optimizes webpack configs for caching and performance.

Author: s3nix-sys

package.json

@@ -1,6 +1,6 @@
 {
   "name": "syra",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "description": "A beautiful fast custom Electron web browser built with react, styled components, typescript and electron.",
   "author": "Revalex Technologies <revalextechnologies@gmail.com>",
   "main": "build/main.bundle.js",

src/interfaces/types/types-electron.d.ts

@@ -43,6 +43,24 @@ interface ElectronAPI {
 
   getSearchSuggestions: (query: string) => Promise<string[]>;
 
+  getHistory: () => Promise<any[]>;
+  getBookmarks: () => Promise<any[]>;
+  addBookmark: (payload: {
+    title: string;
+    url: string;
+    folder?: string;
+    favicon?: string;
+  }) => Promise<any>;
+  updateBookmark: (
+    id: number,
+    updates: { title?: string; url?: string; folder?: string; favicon?: string },
+  ) => Promise<any>;
+  removeBookmark: (id: number) => Promise<any>;
+  removeBookmarkByUrl: (url: string) => Promise<any>;
+  isBookmarked: (url: string) => Promise<boolean>;
+  onBookmarksUpdated: (cb: (bookmarks: any[]) => void) => () => void;
+  showBookmarkContextMenu: (payload: any) => void;
+
   getTheme: () => Promise<'light' | 'dark' | 'system'>;
   setTheme: (theme: 'light' | 'dark' | 'system') => void;
 
@@ -104,7 +122,9 @@ interface ElectronAPI {
 
   showTabContextMenu: (args: { id: number; menuItems?: any }) => void;
 
-  getNavigationState: (id: number) => Promise<{ canGoBack: boolean; canGoForward: boolean }>;
+  getNavigationState: (
+    id: number,
+  ) => Promise<{ canGoBack: boolean; canGoForward: boolean; isLoading: boolean }>;
 }
 
 declare global {

src/main/content-manager.ts

@@ -111,6 +111,11 @@ export class contentManager {
       this.reload(id);
     });
 
+    ipcMain.on('stop-loading', (event, id: number) => {
+      if (!isEventForThisWindow(event)) return;
+      this.stopLoading(id);
+    });
+
     ipcMain.on('toggle-tab-audio', (event, id: number) => {
       if (!isEventForThisWindow(event)) return;
       const view = this.views.get(id);
@@ -247,6 +252,22 @@ export class contentManager {
     }
   }
 
+  public stopLoading(id: number) {
+    const view = this.views.get(id);
+    if (view && typeof (view as any).stopLoading === 'function') {
+      try {
+        (view as any).stopLoading();
+      } catch {}
+    } else if (view) {
+      try {
+        const wc = view.getWebContents?.();
+        if (wc && typeof (wc as any).stop === 'function') {
+          (wc as any).stop();
+        }
+      } catch {}
+    }
+  }
+
   public getCurrentViewId(): number | null {
     return this.currentViewId;
   }

src/main/content.ts

@@ -677,6 +677,14 @@ export class CreateChildView {
     }
   }
 
+  public stopLoading() {
+    if (!this.isDestroyed) {
+      try {
+        this.view.webContents.stop();
+      } catch {}
+    }
+  }
+
   public updateBounds() {
     if (this.isDestroyed) return;
     if (!this.parentWindow || this.parentWindow.isDestroyed()) return;

src/main/dialogs/search.ts

@@ -61,6 +61,14 @@ export class SearchOmniboxController {
     } catch {}
   }
 
+  public send(channel: string, ...args: any[]) {
+    try {
+      if (this.view && !this.view.webContents.isDestroyed()) {
+        this.view.webContents.send(channel, ...args);
+      }
+    } catch {}
+  }
+
   private ensureView() {
     if (this.view && !this.view.webContents.isDestroyed()) return;
     this.view = new WebContentsView({

src/main/index.ts

@@ -1012,6 +1012,7 @@ export function getDownloadsList(): DownloadInfo[] {
 export const contentManagers = new Map<number, contentManager>();
 
 const findControllers = new Map<number, any>();
+const searchControllers = new Map<number, SearchOmniboxController>();
 
 app.whenReady().then(() => {
   try {
@@ -1170,6 +1171,14 @@ export function setupWindowIntegration(
   findControllers.set(win.id, findDialog);
   const dlg = new DialogService(win);
   const searchDialog = new SearchOmniboxController(win);
+  try {
+    searchControllers.set(win.id, searchDialog);
+    win.on('closed', () => {
+      try {
+        searchControllers.delete(win.id);
+      } catch {}
+    });
+  } catch {}
 
   dlg.register('quickmenu', qm as any);
   dlg.register('downloads', downloadsDialog as any);
@@ -1296,27 +1305,36 @@ ipcMain.on('reload', (event, id: number) => {
   const cm = getContentManagerFor(win);
   cm?.reload(id);
 });
+
+ipcMain.on('stop-loading', (event, id: number) => {
+  const win = BrowserWindow.fromWebContents(event.sender);
+  if (!win) return;
+
+  const cm: any = getContentManagerFor(win);
+  cm?.stopLoading?.(id);
+});
 ipcMain.handle('get-navigation-state', async (event, id: number) => {
   const win = BrowserWindow.fromWebContents(event.sender);
   if (!win) {
-    return { canGoBack: false, canGoForward: false };
+    return { canGoBack: false, canGoForward: false, isLoading: false };
   }
 
   const cm = getContentManagerFor(win);
   if (!cm) {
-    return { canGoBack: false, canGoForward: false };
+    return { canGoBack: false, canGoForward: false, isLoading: false };
   }
 
   const view = cm['views']?.get(id);
   if (!view) {
-    return { canGoBack: false, canGoForward: false };
+    return { canGoBack: false, canGoForward: false, isLoading: false };
   }
 
   const wc: any = __getWC(view);
   const nav = wc && wc.navigationHistory;
   return {
     canGoBack: nav && typeof nav.canGoBack === 'function' ? !!nav.canGoBack() : false,
     canGoForward: nav && typeof nav.canGoForward === 'function' ? !!nav.canGoForward() : false,
+    isLoading: wc && typeof wc.isLoading === 'function' ? !!wc.isLoading() : false,
   };
 });
 ipcMain.on('get-current-url-sync', (event) => {
@@ -1480,9 +1498,17 @@ safeHandle('is-bookmarked', async (_event: Electron.IpcMainInvokeEvent, url: str
 ipcMain.on('set-default-search-engine', (event: Electron.IpcMainEvent, engine: string) => {
   if (typeof engine === 'string' && engine.trim().length > 0) {
     setDefaultSearchEngine(engine);
+    const current = getDefaultSearchEngine();
     BrowserWindow.getAllWindows().forEach((w) => {
-      __getWC(w).send('search-engine-changed', getDefaultSearchEngine());
+      __getWC(w).send('search-engine-changed', current);
     });
+    try {
+      searchControllers.forEach((ctrl) => {
+        try {
+          ctrl.send('search-engine-changed', current);
+        } catch {}
+      });
+    } catch {}
   }
 });
 

src/main/useragent.ts

@@ -7,7 +7,7 @@ function platformToken(): string {
 }
 
 export function getChromiumVersion(): string {
-  return process.versions.chrome || '120.0.0.0';
+  return process.versions.chrome || '144.0.0.0';
 }
 
 export function buildUserAgent(): string {

src/preloads/window-preload.ts

@@ -39,6 +39,7 @@ contextBridge.exposeInMainWorld('electron', {
       'go-back',
       'go-forward',
       'reload',
+      'stop-loading',
       'create-web-contents-view',
       'select-web-contents-view',
       'close-web-contents-view',

src/renderer/constants/fonts.ts

@@ -1,15 +1,15 @@
 import { createGlobalStyle } from 'styled-components';
-import RobotoVar from '@/renderer/resources/fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf';
-import RobotoVarItalic from '@/renderer/resources/fonts/Roboto/Roboto-Italic-VariableFont_wdth,wght.ttf';
+import RobotoVar from '@/renderer/resources/fonts/Roboto/Roboto-VariableFont_wdth,wght.subset.woff2';
+import RobotoVarItalic from '@/renderer/resources/fonts/Roboto/Roboto-Italic-VariableFont_wdth,wght.subset.woff2';
 
 export const GlobalFonts = createGlobalStyle`
   @font-face {
     font-family: 'Roboto';
-    src: url(${RobotoVar}) format('truetype');
+    src: url(${RobotoVar}) format('woff2');
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
   }
-  @font-face { font-family: 'Roboto'; src: url(${RobotoVarItalic}) format('truetype'); font-style: italic; font-weight: 100 900; font-display: swap; }
+  @font-face { font-family: 'Roboto'; src: url(${RobotoVarItalic}) format('woff2'); font-style: italic; font-weight: 100 900; font-display: swap; }
   :root, body { font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', 'Noto Sans', 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; }
 `;