Add option to automatically enable compact mode #14

src/components/Checkbox.scss

@@ -15,6 +15,8 @@
         label {
             cursor: not-allowed;
         }
+
+        color: var(--text-disabled);
     }
 
     &-root {

src/components/Checkbox.tsx

@@ -3,19 +3,21 @@ import './Checkbox.scss';
 import { useId } from 'react';
 import { Icon } from './Icon';
 import { ReactNode } from 'react';
+import clsx from 'clsx';
 
 
 type CheckboxProps = {
     children?: ReactNode,
     defaultChecked?: boolean,
+    disabled?: boolean,
     checked?: boolean,
     onChange?: (newState: boolean) => void,
 }
 
-export const Checkbox = ({ children, defaultChecked, checked, onChange }: CheckboxProps) => {
+export const Checkbox = ({ children, defaultChecked, checked, onChange, disabled }: CheckboxProps) => {
     const id = useId();
-    return (<div className='Checkbox'>
-        <RadixCheckbox.Root className="Checkbox-root" defaultChecked={defaultChecked} id={id} checked={checked} onCheckedChange={onChange}>
+    return (<div className={clsx('Checkbox', {'Checkbox-disabled': disabled})} data-disabled={disabled || undefined}>
+        <RadixCheckbox.Root disabled={disabled} className="Checkbox-root" defaultChecked={defaultChecked} id={id} checked={checked} onCheckedChange={onChange}>
             <RadixCheckbox.Indicator className="Checkbox-indicator">
                 <Icon icon="ion:checkmark-sharp" width={14} height={14} />
             </RadixCheckbox.Indicator>

src/components/WhatsNew.tsx

@@ -6,18 +6,19 @@ export const WhatsNew = () => {
         <section>
             <h2>1.2.0</h2>
             <ul>
-                <li>Added new weather widget! Give it a try, it can display both current weather in selected city and weather forecast</li>
-                <li>Added two new themes</li>
-                <li>We got rid of a few internal libraries and adjusted compilation settings, so extension files now take less space. This should make loading extension slightly faster (around 10%)</li>
-                <li>Added 'Show animation on open' option to settings</li>
+                <li>New weather widget! Give it a try, it can display both current weather in selected city and weather forecast.</li>
+                <li>Two new themes.</li>
+                <li>Option to automatically switch to compact mode based on screen size.</li>
+                <li>We got rid of a few internal libraries and adjusted compilation settings, so extension files now take less space. This should make loading extension slightly faster (around 10%).</li>
+                <li>New option 'Show animation on open'.</li>
             </ul>
         </section>
         <section>
             <h2>1.1.0</h2>
             <ul>
-                <li>Added support for shortcuts across extension. Press <ShortcutHint shortcut='alt+h' /> to see them all!</li>
+                <li>Support for shortcuts across extension. Press <ShortcutHint shortcut='alt+h' /> to see them all!</li>
                 <li>Added compact mode</li>
-                <li>Added new 'Top sites' widget (Firefox & Chrome)</li>
+                <li>New 'Top sites' widget (Firefox & Chrome)</li>
             </ul>
         </section>
     </div>)

src/components/WidgetCard.tsx

@@ -6,7 +6,7 @@ import { useParentFolder } from '@utils/FolderContentContext';
 import { Button } from './Button';
 import { Icon } from './Icon';
 import { ReactNode } from 'react';
-import { useSizeSettings } from '@utils/user-data/theme';
+import { useSizeSettings } from '@utils/compact';
 
 class ErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean }> {
     constructor(props: { children: ReactNode }) {

src/pages/newtab/components/FolderContent.tsx

@@ -15,7 +15,7 @@ import { Modal } from '@components/Modal';
 import { WidgetMetadataContext } from '@utils/plugin';
 import { OnboardingCard } from '@components/OnboardingCard';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { useSizeSettings } from '@utils/user-data/theme';
+import { useSizeSettings } from '@utils/compact';
 
 
 type FolderContentProps = {

src/pages/newtab/components/Settings.tsx

@@ -9,7 +9,7 @@ import { IconPicker } from '@components/IconPicker';
 import { Popover } from '@components/Popover';
 import { useBrowserStorageValue } from '@utils/storage';
 import clsx from 'clsx';
-import { Theme, applyCompactMode, applyTheme, defaultTheme, themes } from '@utils/user-data/theme';
+import { Theme, applyTheme, defaultTheme, themes } from '@utils/user-data/theme';
 import { availablePlugins } from '@plugins/all';
 import { usePluginConfig } from '@utils/plugin';
 import { Checkbox } from '@components/Checkbox';
@@ -129,7 +129,8 @@ export const Settings = () => {
     const { folders, setFolders, createFolder, updateFolder, removeFolder } = useFolders();
     const [currentTheme, setTheme] = useBrowserStorageValue('theme', defaultTheme);
     const [stealFocus, setStealFocus] = useBrowserStorageValue('stealFocus', false);
-    const [compactMode, setCompactMode] = useBrowserStorageValue('compactMode', false);
+    const [isAutomaticCompact, setAutomaticCompact] = useBrowserStorageValue('automaticCompactMode', true);
+    const [manualCompactMode, setManualCompactMode] = useBrowserStorageValue('compactMode', false);
     const [showLoadAnimation, setShowLoadAnimation] = useBrowserStorageValue('showLoadAnimation', false);
 
     return (<ScrollArea className='Settings'>
@@ -146,11 +147,11 @@ export const Settings = () => {
                         Steal focus from addressbar
                         <Hint text='If enabled, this will force browser to move focus from address bar to this page when opening new tab and you will be able to use command menu (Cmd+K) without needing to move focus to page manually (by clicking or pressing Tab).' />
                     </Checkbox>}
-                    <Checkbox checked={compactMode} onChange={checked => {
-                        setCompactMode(checked);
-                        applyCompactMode(checked);
-                    }}>
-                        Compact mode
+                    <Checkbox checked={isAutomaticCompact} onChange={setAutomaticCompact}>
+                        Automatically switch to compact mode based on screen size
+                    </Checkbox>
+                    <Checkbox checked={manualCompactMode} onChange={setManualCompactMode} disabled={isAutomaticCompact}>
+                        Use compact mode
                     </Checkbox>
                     <Checkbox checked={showLoadAnimation} onChange={setShowLoadAnimation}>
                         Show animation on open

src/pages/newtab/start.tsx

@@ -13,13 +13,14 @@ import { FolderContent } from './components/FolderContent';
 import { homeFolder } from '@utils/user-data/types';
 import { usePrevious } from '@utils/hooks';
 import { storage, useBrowserStorageValue } from '@utils/storage';
-import { applyCompactMode, applyTheme, defaultTheme, useSizeSettings } from '@utils/user-data/theme';
+import { applyTheme, defaultTheme } from '@utils/user-data/theme';
 import { CommandMenu } from '@components/command-menu/CommandMenu';
 import { watchForPermissionChanges } from '@utils/permissions';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { ShortcutsHelp } from '@components/ShortcutsHelp';
 import { WhatsNew } from '@components/WhatsNew';
 import clsx from 'clsx';
+import { CompactModeProvider, useSizeSettings } from '@utils/compact';
 
 
 const Start = () => {
@@ -138,9 +139,6 @@ setPageTitle('Anori new tab');
 storage.getOne('theme').then(theme => {
     applyTheme(theme || defaultTheme);
 });
-storage.getOne('compactMode').then(compactMode => {
-    applyCompactMode(compactMode || false);
-});
 
 storage.getOne('showLoadAnimation').then(showLoadAnimation => {
     const div = document.querySelector('.loading-cover');
@@ -158,6 +156,8 @@ storage.getOne('showLoadAnimation').then(showLoadAnimation => {
 requestIconsFamily('ion');
 requestIconsFamily('fluent');
 
-mountPage(<Start />);
+mountPage(<CompactModeProvider>
+    <Start />
+</CompactModeProvider>);
 
 

src/plugins/bookmark/bookmark-plugin.tsx

@@ -9,9 +9,9 @@ import { Icon } from "@components/Icon";
 import { useMemo } from "react";
 import clsx from "clsx";
 import { getAllWidgetsByPlugin } from "@utils/plugin";
-import { useSizeSettings } from "@utils/user-data/theme";
 import { parseHost } from "@utils/misc";
 import { useLinkNavigationState } from "@utils/hooks";
+import { useSizeSettings } from "@utils/compact";
 
 type BookmarkWidgetConfigType = {
     url: string,

src/plugins/search/search-plugin.tsx

@@ -7,7 +7,7 @@ import { Input } from '@components/Input';
 import { Select } from '@components/Select';
 import { Icon } from '@components/Icon';
 import { Tooltip } from '@components/Tooltip';
-import { useSizeSettings } from '@utils/user-data/theme';
+import { useSizeSettings } from '@utils/compact';
 
 
 const providersPretty = {

src/plugins/weather/weather-plugin.tsx

@@ -9,8 +9,8 @@ import { useWidgetStorage } from "@utils/plugin";
 import moment from "moment";
 import { Icon } from "@components/Icon";
 import { Tooltip } from "@components/Tooltip";
-import { useSizeSettings } from "@utils/user-data/theme";
 import { FloatingDelayGroup } from "@floating-ui/react-dom-interactions";
+import { useSizeSettings } from "@utils/compact";
 
 type PluginWidgetConfigType = {
     location: City,

src/utils/compact.tsx

@@ -0,0 +1,48 @@
+import { ReactNode, createContext, useContext, useEffect, useState } from "react";
+import { useBrowserStorageValue } from "./storage";
+
+const CompactModeContext = createContext(false);
+
+export const applyCompactMode = (isCompact: boolean) => {
+    const root = document.documentElement;
+    const size = isCompact ? 14 : 16;
+    root.style.setProperty('font-size', size + 'px');
+};
+
+export const CompactModeProvider = ({children}: {children: ReactNode}) => {
+    const [isAutomaticCompact] = useBrowserStorageValue('automaticCompactMode', true);
+    const [isManualCompact] = useBrowserStorageValue('compactMode', false);
+    const [screenWidth, setScreenWidth] = useState(() => window.screen.width);
+    const isCompact = isAutomaticCompact ? screenWidth < 1500 : isManualCompact;
+
+    useEffect(() => {
+        const tid = setInterval(() => {
+            // If screen size is same, this won't do re-render
+            setScreenWidth(window.screen.width);
+        }, 50);
+
+        return () => clearInterval(tid);
+    }, []);
+
+    useEffect(() => {
+        applyCompactMode(isCompact);
+    }, [isCompact]);
+
+    return (<CompactModeContext.Provider value={isCompact}>
+        {children}
+    </CompactModeContext.Provider>);
+};
+
+export const useSizeSettings = () => {
+    const isCompact = useContext(CompactModeContext);
+    const fontSize = isCompact ? 14 : 16;
+    const rem = (n: number) => fontSize * n;
+
+    return {
+        isCompact,
+        blockSize: isCompact ? 140 : 180,
+        gapSize: isCompact ? 8 : 16,
+        fontSize: fontSize,
+        rem,
+    };
+};

src/utils/user-data/theme.ts

@@ -1,6 +1,5 @@
 import { Color, darken, fromHsl, lighten, toCss, transparentize } from "@utils/color";
 import { setPageBackground } from "@utils/mount";
-import { useBrowserStorageValue } from "@utils/storage";
 import browser from 'webextension-polyfill';
 
 
@@ -115,24 +114,4 @@ export const applyTheme = (themeName: Theme["name"]) => {
     root.style.setProperty('--text-subtle-1', toCss(transparentize(theme.colors.text, 0.15)));
     root.style.setProperty('--text-subtle-2', toCss(transparentize(theme.colors.text, 0.35)));
     root.style.setProperty('--text-disabled', toCss(darken(theme.colors.text, 0.45)));
-};
-
-export const applyCompactMode = (isCompact: boolean) => {
-    const root = document.documentElement;
-    const size = isCompact ? 14 : 16;
-    root.style.setProperty('font-size', size + 'px');
-};
-
-export const useSizeSettings = () => {
-    const [isCompact] = useBrowserStorageValue('compactMode', false);
-    const fontSize = isCompact ? 14 : 16;
-    const rem = (n: number) => fontSize * n;
-
-    return {
-        isCompact,
-        blockSize: isCompact ? 140 : 180,
-        gapSize: isCompact ? 8 : 16,
-        fontSize: fontSize,
-        rem,
-    };
 };

src/utils/user-data/types.ts

@@ -10,6 +10,7 @@ export type StorageContent = {
     hasUnreadReleaseNotes: boolean,
 
     compactMode: boolean,
+    automaticCompactMode: boolean,
     showLoadAnimation: boolean,
 };