feat: add mtime-based file cache for collection files

packages/bruno-app/src/components/Preferences/Cache/StyledWrapper.js

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  color: ${(props) => props.theme.text};
+
+  label {
+    font-size: 0.8125rem;
+  }
+
+  table.cache-stats {
+    border-collapse: collapse;
+
+    td {
+      padding: 0.375rem 0;
+      font-size: 0.8125rem;
+
+      &.label {
+        color: ${(props) => props.theme.colors.text.muted};
+        padding-right: 2rem;
+      }
+
+      &.value {
+        font-weight: 500;
+        text-align: right;
+      }
+    }
+
+    tr:not(:last-child) td {
+      border-bottom: 1px solid ${(props) => props.theme.table.border};
+    }
+  }
+
+  .text-muted {
+    font-size: 0.8125rem;
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Preferences/Cache/index.js

@@ -0,0 +1,162 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { IconAlertCircle, IconRefresh } from '@tabler/icons';
+import get from 'lodash/get';
+import toast from 'react-hot-toast';
+import { savePreferences } from 'providers/ReduxStore/slices/app';
+import Button from 'ui/Button';
+import StyledWrapper from './StyledWrapper';
+import { Tooltip } from 'react-tooltip';
+
+const formatBytes = (bytes) => {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+
+const Cache = () => {
+  const preferences = useSelector((state) => state.app.preferences);
+  const dispatch = useDispatch();
+  const [stats, setStats] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [clearing, setClearing] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const cacheEnabled = get(preferences, 'cache.enabled', false);
+
+  const handleToggleCache = () => {
+    dispatch(
+      savePreferences({
+        ...preferences,
+        cache: {
+          ...preferences.cache,
+          enabled: !cacheEnabled
+        }
+      })
+    ).catch((err) => {
+      console.error('Failed to save cache preference:', err);
+      toast.error('Failed to save preference');
+    });
+  };
+
+  const fetchStats = useCallback(async () => {
+    try {
+      const cacheStats = await window.ipcRenderer.invoke('renderer:get-file-cache-stats');
+      setStats(cacheStats);
+    } catch (err) {
+      console.error('Failed to fetch cache stats:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchStats();
+  }, [fetchStats]);
+
+  const handleClearCache = async () => {
+    setClearing(true);
+    try {
+      await window.ipcRenderer.invoke('renderer:clear-file-cache');
+      toast.success('Cache cleared successfully');
+      await fetchStats();
+    } catch (err) {
+      console.error('Failed to clear cache:', err);
+      toast.error('Failed to clear cache');
+    } finally {
+      setClearing(false);
+    }
+  };
+
+  const handleRefresh = async () => {
+    setRefreshing(true);
+    try {
+      await fetchStats();
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <StyledWrapper>
+        <div className="text-muted">Loading cache statistics...</div>
+      </StyledWrapper>
+    );
+  }
+
+  const collectionCount = stats?.byCollection ? Object.keys(stats.byCollection).length : 0;
+
+  return (
+    <StyledWrapper>
+      <div className="section-header">
+        <span>Cache</span>
+      </div>
+      <div className="flex max-w-xs items-center mt-2">
+        <input
+          id="cacheEnabled"
+          type="checkbox"
+          checked={cacheEnabled}
+          onChange={handleToggleCache}
+          className="mousetrap mr-0"
+        />
+        <label className="inline-flex items-center ml-2 select-none" htmlFor="cacheEnabled">
+          <span>Enable</span>
+          <span id="cache-tooltip" className="ml-2">
+            <IconAlertCircle size={16} className="tooltip-icon" />
+          </span>
+          <Tooltip
+            anchorId="cache-tooltip"
+            className="tooltip-mod font-normal"
+            html="Enabling cache will store copies of files you've opened for faster access later. <br/> It can be cleared anytime without affecting your original files."
+          />
+        </label>
+        <Button
+          size="xs"
+          color="secondary"
+          className="ml-auto"
+          disabled={refreshing || !cacheEnabled}
+          loading={refreshing}
+          onClick={handleRefresh}
+        >
+          <IconRefresh size={16} strokeWidth={1.5} />
+        </Button>
+      </div>
+
+      <table className={`max-w-xs w-full cache-stats mt-4 ${!cacheEnabled ? 'opacity-50' : ''}`}>
+        <tbody>
+          <tr>
+            <td className="label">Cached Files</td>
+            <td className="value">{stats?.fileCount || 0}</td>
+          </tr>
+          <tr>
+            <td className="label">Collections</td>
+            <td className="value">{collectionCount}</td>
+          </tr>
+          <tr>
+            <td className="label">Total Size</td>
+            <td className="value">{formatBytes(stats?.totalSizeBytes || 0)}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div className={`flex items-center gap-2 mt-4 ${!cacheEnabled ? 'opacity-50' : ''}`}>
+        <Button
+          size="sm"
+          variant="outline"
+          color="secondary"
+          disabled={clearing || !stats?.fileCount || !cacheEnabled}
+          loading={clearing}
+          onClick={handleClearCache}
+        >
+          Clear Cache
+        </Button>
+      </div>
+
+    </StyledWrapper>
+  );
+};
+
+export default Cache;

packages/bruno-app/src/components/Preferences/StyledWrapper.js

@@ -17,6 +17,19 @@ const StyledWrapper = styled.div`
       cursor: pointer;
       transition: background-color 0.15s ease;
 
+      .beta-badge {
+        display: inline-block;
+        font-size: ${(props) => props.theme.font.size.xxs};
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
+        padding: 0.0625rem 0.25rem;
+        border-radius: 0.1875rem;
+        background-color: ${(props) => props.theme.colors.text.yellow};
+        color: ${(props) => props.theme.bg};
+        margin-left: auto;
+      }
+
       &:focus,
       &:active,
       &:focus-within,

packages/bruno-app/src/components/Preferences/index.js

@@ -9,7 +9,8 @@ import {
   IconUserCircle,
   IconKeyboard,
   IconZoomQuestion,
-  IconSquareLetterB
+  IconSquareLetterB,
+  IconDatabase
 } from '@tabler/icons';
 
 import Support from './Support';
@@ -19,6 +20,7 @@ import Proxy from './ProxySettings';
 import Display from './Display';
 import Keybindings from './Keybindings';
 import Beta from './Beta';
+import Cache from './Cache';
 
 import StyledWrapper from './StyledWrapper';
 
@@ -62,6 +64,10 @@ const Preferences = () => {
         return <Beta />;
       }
 
+      case 'cache': {
+        return <Cache />;
+      }
+
       case 'support': {
         return <Support />;
       }
@@ -92,6 +98,11 @@ const Preferences = () => {
             <IconKeyboard size={16} strokeWidth={1.5} />
             Keybindings
           </div>
+          <div className={getTabClassname('cache')} role="tab" onClick={() => setTab('cache')}>
+            <IconDatabase size={16} strokeWidth={1.5} />
+            Cache
+            <span className="beta-badge">Beta</span>
+          </div>
           <div className={getTabClassname('support')} role="tab" onClick={() => setTab('support')}>
             <IconZoomQuestion size={16} strokeWidth={1.5} />
             Support

packages/bruno-app/src/themes/dark/catppuccin-frappe.js

@@ -119,6 +119,7 @@ const catppuccinFrappeTheme = {
 
   font: {
     size: {
+      xxs: '0.563rem', // 9px
       xs: '0.6875rem', // 11px
       sm: '0.75rem', // 12px
       base: '0.8125rem', // 13px

packages/bruno-app/src/themes/dark/catppuccin-macchiato.js

@@ -119,6 +119,7 @@ const catppuccinMacchiatoTheme = {
 
   font: {
     size: {
+      xxs: '0.563rem', // 9px
       xs: '0.6875rem', // 11px
       sm: '0.75rem', // 12px
       base: '0.8125rem', // 13px

packages/bruno-app/src/themes/dark/catppuccin-mocha.js

@@ -119,6 +119,7 @@ const catppuccinMochaTheme = {
 
   font: {
     size: {
+      xxs: '0.563rem', // 9px
       xs: '0.6875rem', // 11px
       sm: '0.75rem', // 12px
       base: '0.8125rem', // 13px

packages/bruno-app/src/themes/dark/dark-monochrome.js

@@ -106,6 +106,7 @@ const darkMonochromeTheme = {
 
   font: {
     size: {
+      xxs: '0.563rem',
       xs: '0.6875rem',
       sm: '0.75rem',
       base: '0.8125rem',

packages/bruno-app/src/themes/dark/dark-pastel.js

@@ -127,6 +127,7 @@ const darkPastelTheme = {
 
   font: {
     size: {
+      xxs: '0.563rem',
       xs: '0.6875rem',
       sm: '0.75rem',
       base: '0.8125rem',

packages/bruno-app/src/themes/dark/dark.js

@@ -151,6 +151,7 @@ const darkTheme = {
 
   font: {
     size: {
+      xxs: '0.563rem', // 9px
       xs: '0.6875rem', // 11px
       sm: '0.75rem', // 12px
       base: '0.8125rem', // 13px

packages/bruno-app/src/themes/dark/nord.js

@@ -126,6 +126,7 @@ const nordTheme = {
 
   font: {
     size: {
+      xxs: '0.563rem',
       xs: '0.6875rem',
       sm: '0.75rem',
       base: '0.8125rem',

packages/bruno-app/src/themes/dark/vscode.js

@@ -129,6 +129,7 @@ const vscodeDarkTheme = {
 
   font: {
     size: {
+      xxs: '0.563rem',
       xs: '0.6875rem',
       sm: '0.75rem',
       base: '0.8125rem',

packages/bruno-app/src/themes/light/catppuccin-latte.js

@@ -119,6 +119,7 @@ const catppuccinLatteTheme = {
 
   font: {
     size: {
+      xxs: '0.563rem', // 9px
       xs: '0.6875rem', // 11px
       sm: '0.75rem', // 12px
       base: '0.8125rem', // 13px

packages/bruno-app/src/themes/light/light-monochrome.js

@@ -107,6 +107,7 @@ const lightMonochromeTheme = {
 
   font: {
     size: {
+      xxs: '0.563rem',
       xs: '0.6875rem',
       sm: '0.75rem',
       base: '0.8125rem',

packages/bruno-app/src/themes/light/light-pastel.js

@@ -124,6 +124,7 @@ const lightPastelTheme = {
 
   font: {
     size: {
+      xxs: '0.563rem',
       xs: '0.6875rem',
       sm: '0.75rem',
       base: '0.8125rem',

packages/bruno-app/src/themes/light/light.js

@@ -143,6 +143,7 @@ const lightTheme = {
 
   font: {
     size: {
+      xxs: '0.563rem', // 9px
       xs: '0.6875rem', // 11px
       sm: '0.75rem', // 12px
       base: '0.8125rem', // 13px

packages/bruno-app/src/themes/light/vscode.js

@@ -128,6 +128,7 @@ const vscodeLightTheme = {
 
   font: {
     size: {
+      xxs: '0.563rem',
       xs: '0.6875rem',
       sm: '0.75rem',
       base: '0.8125rem',

packages/bruno-app/src/themes/schema/oss.js

@@ -109,6 +109,7 @@ export const ossSchema = {
         size: {
           type: 'object',
           properties: {
+            xxs: { type: 'string', description: 'Extra extra small font size (9px)' },
             xs: { type: 'string', description: 'Extra small font size (11px)' },
             sm: { type: 'string', description: 'Small font size (12px)' },
             base: { type: 'string', description: 'Base font size (13px)' },

packages/bruno-electron/electron-builder-config.js

@@ -8,6 +8,8 @@ const config = {
     buildResources: 'resources',
     output: 'out'
   },
+  npmRebuild: false,
+  buildDependenciesFromSource: false,
   extraResources: [
     {
       from: 'resources/data/sample-collection.json',

packages/bruno-electron/package.json

@@ -67,6 +67,7 @@
     "iconv-lite": "^0.6.3",
     "is-valid-path": "^0.1.1",
     "js-yaml": "^4.1.1",
+    "lmdb": "3.5.1",
     "lodash": "^4.17.21",
     "mime-types": "^2.1.35",
     "nanoid": "3.3.8",