Merge pull request #16 from mstephen19/develop

Develop Branch

Author: mstephen19

README.md

@@ -46,4 +46,4 @@ Tab Samurai offers four primary features.
 
 ## License
 
-Tab Samurai is an open-source project operating under a modified MIT license. [See license](./LICENSE).
+Tab Samurai is an open-source project operating under a modified MIT license. [See license](./LICENSE)

manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "Tab Samurai",
     "short_name": "Tabs",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "description": "Take your browsing experience to the next level with automatic tab hibernation, smart tab management, and intuitive tab recovery.",
     "icons": {
         "16": "public/icon16.png",

package.json

@@ -1,7 +1,7 @@
 {
     "name": "tabs",
     "private": true,
-    "version": "1.2.0",
+    "version": "1.2.1",
     "type": "module",
     "scripts": {
         "dev": "vite",

site/src/app/layout.tsx

@@ -49,6 +49,9 @@ export const metadata: Metadata = {
         description:
             'Take your browsing experience to the next level with automatic tab hibernation, smart tab management, and intuitive tab recovery.',
     },
+    other: {
+        'google-site-verification': 'Bd4LAkjfHg1A--AkO0gk0s6_-pa5vmpnM2m4CoXkJIM',
+    },
 };
 
 export default function RootLayout({

src/background/updates.ts

@@ -11,7 +11,6 @@ export const initialize = async () => {
 
     // If an update is available & not already tracked
     if (updateAvailable && updateDetails.version !== availableUpdateVersion) {
-        console.log('hi');
         store.availableUpdateVersion.write(updateDetails.version);
     }
 

src/consts.ts

@@ -36,7 +36,7 @@ export const HELP_AND_INFO_FAQ: { primary: string; secondary: string }[] = [
     {
         primary: 'How do I customize which tabs should hibernate?',
         secondary:
-            'Tab Samurai will auto-hibernate a tab once it hasn\'t been viewed for the duration specified within "Settings". You can add domains (e.g. "https://google.com") to the whitelist to ensure they don\'t hibernate. By default, pinned tabs don\'t hibernate; however this option can be switched to "Yes". Your active tab (the one you\'re looking at) will never hibernate. Tabs playing audio will also never hibernate.',
+            'Tab Samurai will auto-hibernate a tab once it hasn\'t been viewed for the duration specified within "Hibernation Settings". You can add domains (e.g. "https://google.com") to the whitelist to ensure they don\'t hibernate. By default, pinned tabs don\'t hibernate; however this option can be switched to "Yes". Your active tab (the one you\'re looking at) will never hibernate. Tabs playing audio or recording via your webcam/microphone will never hibernate.',
     },
     {
         primary: "Will I lose my tab's data when it hibernates?",

src/popup/Accordions/Info/index.tsx

@@ -1,6 +1,9 @@
 import { Box, Divider, List, ListItem, ListItemText } from '@mui/material';
-import { FEATURE_REQUEST_URL, HELP_AND_INFO_FAQ, REPORT_BUG_URL } from '../../../consts';
+import { FEATURE_REQUEST_URL, HELP_AND_INFO_FAQ, REPORT_BUG_URL, REVIEW_EXTENSION_URL } from '../../../consts';
 import { Link } from '../../components/Link';
+import TipsAndUpdatesIcon from '@mui/icons-material/TipsAndUpdates';
+import BugReportIcon from '@mui/icons-material/BugReport';
+import StarIcon from '@mui/icons-material/Star';
 
 export const Info = () => {
     return (
@@ -15,10 +18,24 @@ export const Info = () => {
 
             <Divider flexItem />
 
-            <Box display='flex' gap='10px'>
-                <Link url={FEATURE_REQUEST_URL}>Request a Feature</Link>
+            <Box display='flex' justifyContent='space-between'>
+                <Box component='span' display='flex' alignItems='center' gap='5px'>
+                    <TipsAndUpdatesIcon sx={{ fontSize: '1rem' }} />
 
-                <Link url={REPORT_BUG_URL}>Report a Bug</Link>
+                    <Link url={FEATURE_REQUEST_URL}>Request a Feature</Link>
+                </Box>
+
+                <Box component='span' display='flex' alignItems='center' gap='5px'>
+                    <BugReportIcon sx={{ fontSize: '1rem' }} />
+
+                    <Link url={REPORT_BUG_URL}>Report a Bug</Link>
+                </Box>
+
+                <Box component='span' display='flex' alignItems='center' gap='5px'>
+                    <StarIcon sx={{ fontSize: '1rem' }} />
+
+                    <Link url={REVIEW_EXTENSION_URL}>Leave a Review</Link>
+                </Box>
             </Box>
         </Box>
     );

src/popup/Accordions/QuickActions/index.tsx

@@ -5,6 +5,7 @@ import { ConfigContext } from '../../context/ConfigProvider';
 import { pluralize, tabs as tabUtils } from '../../../utils';
 import { toast } from '../../Toast';
 import { PageStateContext } from '../../context/PageStateProvider';
+import { OPENED_IN_POPOUT } from '../../consts';
 
 const QuickActionButton = styled((props: ButtonProps) => <Button {...props} variant='contained' />)({
     textTransform: 'none',
@@ -20,10 +21,10 @@ export const QuickActions = () => {
         (tab) => tab.discarded || tab.active || tabUtils.shouldWhitelist(tab, config, pageStates)
     );
 
+    const inactiveTabs = tabs.filter((tab) => !tab.active && !tab.discarded && !tabUtils.shouldWhitelist(tab, config, pageStates));
+
     const handleSuspendInactiveTabs = useCallback(async () => {
         try {
-            const inactiveTabs = tabs.filter((tab) => !tab.active && !tab.discarded && !tabUtils.shouldWhitelist(tab, config, pageStates));
-
             await Promise.all(inactiveTabs.map((tab) => chrome.tabs.discard(tab.id!)));
 
             toast({
@@ -36,9 +37,9 @@ export const QuickActions = () => {
                 message: 'Failed to hibernate inactive tabs.',
             });
         }
-    }, [tabs, config, pageStates]);
+    }, [inactiveTabs]);
 
-    const audibleTabs = tabs.filter((tab) => tab.audible && !tab.mutedInfo?.muted);
+    const audibleTabs = useMemo(() => tabs.filter((tab) => tab.audible && !tab.mutedInfo?.muted), [tabs]);
     const someTabsAudible = Boolean(audibleTabs.length);
 
     const handleMuteMediaTabs = useCallback(async () => {
@@ -57,7 +58,8 @@ export const QuickActions = () => {
         }
     }, [audibleTabs]);
 
-    const unpinnedTabs = tabs.filter((tab) => !tab.pinned && !tab.active);
+    // Allow closing ALL unpinned tabs, even the active one, only if opened in popout mode
+    const unpinnedTabs = useMemo(() => tabs.filter((tab) => !tab.pinned && (OPENED_IN_POPOUT || !tab.active)), [tabs]);
     const someTabsUnpinned = Boolean(unpinnedTabs.length);
 
     const handleCloseUnpinnedTabs = useCallback(async () => {
@@ -99,22 +101,22 @@ export const QuickActions = () => {
         <Box display='flex' gap='5px' flexWrap='wrap'>
             <Tooltip title={`Found ${duplicateTabs.length} tabs which are duplicates`}>
                 <QuickActionButton disabled={!someDuplicateTabs} onClick={handleCloseDuplicateTabs}>
-                    Close Duplicate Tabs
+                    Close Duplicate Tabs {Boolean(duplicateTabs.length) && `(${duplicateTabs.length})`}
                 </QuickActionButton>
             </Tooltip>
 
             <QuickActionButton disabled={allTabsDiscardedActiveOrWhitelisted} onClick={handleSuspendInactiveTabs}>
-                Hibernate All Inactive Tabs
+                Hibernate All Inactive Tabs {Boolean(inactiveTabs.length) && `(${inactiveTabs.length})`}
             </QuickActionButton>
 
             <Tooltip title={`Found ${audibleTabs.length} audible tabs`}>
                 <QuickActionButton disabled={!someTabsAudible} onClick={handleMuteMediaTabs}>
-                    Mute All Media-Playing Tabs
+                    Mute All Media-Playing Tabs {Boolean(audibleTabs.length) && `(${audibleTabs.length})`}
                 </QuickActionButton>
             </Tooltip>
 
             <QuickActionButton disabled={!someTabsUnpinned} onClick={handleCloseUnpinnedTabs}>
-                Close All Unpinned Tabs
+                Close All Unpinned Tabs {Boolean(unpinnedTabs.length) && `(${unpinnedTabs.length})`}
             </QuickActionButton>
         </Box>
     );

src/popup/Accordions/TabManager/SearchTabsBox.tsx

@@ -60,16 +60,17 @@ export const SearchTabsBox = memo(
                     />
                 </Paper>
 
-                <Paper
-                    elevation={3}
-                    sx={{
-                        display: 'flex',
-                        placeItems: 'center',
-                        border: '1px solid white',
-                    }}>
-                    <Tooltip arrow title='Group By' placement='top'>
+                <Tooltip arrow title='Group By' placement='top'>
+                    <Paper
+                        onClick={handleOpenMenu}
+                        elevation={3}
+                        sx={{
+                            cursor: 'pointer',
+                            display: 'flex',
+                            placeItems: 'center',
+                            border: '1px solid white',
+                        }}>
                         <IconButton
-                            onClick={handleOpenMenu}
                             disableRipple
                             size='small'
                             sx={{
@@ -79,8 +80,8 @@ export const SearchTabsBox = memo(
                             }}>
                             <CompressIcon />
                         </IconButton>
-                    </Tooltip>
-                </Paper>
+                    </Paper>
+                </Tooltip>
 
                 <HoverMenu anchorEl={anchor} open={open} onClose={handleCloseMenu}>
                     {MANAGE_TABS_GROUP_OPTIONS.map((option) => (

src/popup/Accordions/TabManager/TabManagerListItem.tsx

@@ -286,16 +286,23 @@ const TabGroupListItem = ({
     const handleCloseTabs = useCallback(async () => {
         try {
             const lastFocusedWindow = await chrome.windows.getLastFocused();
+            const tabGroupWindowId = groupType === 'Window' ? tabs.find(({ windowId }) => windowId)?.windowId : null;
+
+            // Close whole window if grouping by window, and the target window isn't the currently active window
+            if (tabGroupWindowId && lastFocusedWindow.id !== tabGroupWindowId) {
+                await chrome.windows.remove(tabGroupWindowId);
+
+                toast({
+                    type: 'success',
+                    message: `Closed window with ${tabs.length} ${pluralize(tabs.length, 'tab', 'tabs')}`,
+                });
+                return;
+            }
 
             const tabsToClose =
-                // Close all tabs in the group if grouping by window, and the target window isn't the currently active window
-                groupType === 'Window' && lastFocusedWindow.id !== tabs.find(({ windowId }) => windowId)?.windowId
-                    ? tabs
-                    : // Allow closing active tabs if the panel is opened in the popout
-                    // ? Otherwise, closing the active tab closes the popup
-                    OPENED_IN_POPOUT
-                    ? tabs
-                    : tabs.filter(({ active }) => !active);
+                // Allow closing active tabs if the panel is opened in the popout
+                // ? Otherwise, closing the active tab closes the popup
+                OPENED_IN_POPOUT ? tabs : tabs.filter(({ active }) => !active);
 
             await chrome.tabs.remove(tabsToClose.map(({ id }) => id!));