feat: Add option to toggle popup lite mode (#2314)

xcv58 · Feb 15, 2023 · c8d9002 · c8d9002 · vercel · Feb 15, 2023
1 parent 4990499
commit c8d9002
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 5 deletions.
diff --git a/packages/extension/src/js/components/Main.tsx b/packages/extension/src/js/components/Main.tsx
@@ -19,6 +19,8 @@ export default observer(() => {
   const query = useQuery()
   const isPopup = !query.has(NOT_POPUP)
   const { windowStore, shortcutStore, userStore } = useStore()
+  const { toolbarAutoHide, litePopupMode } = userStore
+  const liteMode = isPopup && litePopupMode
   useEffect(() => {
     windowStore.didMount()
     shortcutStore.didMount()
@@ -28,12 +30,13 @@ export default observer(() => {
     <main
       className={classNames(
         'flex flex-col h-screen overflow-hidden',
-        { 'pb-12': !userStore.toolbarAutoHide },
+        { 'pb-12': !toolbarAutoHide },
         useTextClasses()
       )}
     >
-      {isPopup && <PopupView />}
-      {!isPopup && (
+      {liteMode ? (
+        <PopupView />
+      ) : (
         <>
           <DroppableTools />
           <WinList />

diff --git a/packages/extension/src/js/components/Tab/TabContent.tsx b/packages/extension/src/js/components/Tab/TabContent.tsx
@@ -32,7 +32,7 @@ const TabContent = observer(
       </div>
     )
     return (
-      <Tooltip {...{ open, title: tooltip }} interactive>
+      <Tooltip {...{ open, title: tooltip }}>
         <button
           ref={buttonRef}
           onClick={activate}

diff --git a/packages/extension/src/js/components/Toolbar/SettingsDialog.tsx b/packages/extension/src/js/components/Toolbar/SettingsDialog.tsx
@@ -40,6 +40,8 @@ export default observer(() => {
     toggleShowAppWindow,
     showUnmatchedTab,
     toggleShowUnmatchedTab,
+    litePopupMode,
+    toggleLitePopupMode,
     showShortcutHint,
     toggleShowShortcutHint,
     toolbarAutoHide,
@@ -225,6 +227,16 @@ export default observer(() => {
           </FormGroup>
           <FormGroup>
             <FormHelperText>Others</FormHelperText>
+            <FormControlLabel
+              label="Lite Popup Mode"
+              control={
+                <Switch
+                  color="primary"
+                  checked={litePopupMode}
+                  onChange={toggleLitePopupMode}
+                />
+              }
+            />
             <FormControlLabel
               label="Show Shortcut Hint"
               control={

diff --git a/packages/extension/src/js/stores/UserStore.tsx b/packages/extension/src/js/stores/UserStore.tsx
@@ -7,6 +7,7 @@ const DEFAULT_SETTINGS = {
   showAppWindow: false,
   showShortcutHint: true,
   showUnmatchedTab: true,
+  litePopupMode: false,
   toolbarAutoHide: false,
   highlightDuplicatedTab: true,
   showTabTooltip: true,
@@ -36,6 +37,7 @@ export default class UserStore {
       showAppWindow: observable,
       showShortcutHint: observable,
       showUnmatchedTab: observable,
+      litePopupMode: observable,
       toolbarAutoHide: observable,
       highlightDuplicatedTab: observable,
       showTabTooltip: observable,
@@ -92,6 +94,7 @@ export default class UserStore {
   showAppWindow = false
   showShortcutHint = true
   showUnmatchedTab = true
+  litePopupMode = false
   toolbarAutoHide = false
   highlightDuplicatedTab = true
   showTabTooltip = true
@@ -199,6 +202,11 @@ export default class UserStore {
     this.save()
   }
 
+  toggleLitePopupMode = () => {
+    this.litePopupMode = !this.litePopupMode
+    this.save()
+  }
+
   toggleAutoFocusSearch = () => {
     this.autoFocusSearch = !this.autoFocusSearch
     this.save()
@@ -230,7 +238,7 @@ export default class UserStore {
     this.init()
   }
 
-  toggleDarkTheme = (currentTheme: string) => {
+  toggleDarkTheme = (currentTheme: boolean) => {
     browser.storage.sync.set({
       useSystemTheme: false,
       darkTheme: !currentTheme,

diff --git a/...st-ts-the-extension-page-should-render-popup-mode-based-on-url-query-1-snap.png b/...st-ts-the-extension-page-should-render-popup-mode-based-on-url-query-1-snap.png
diff --git a/...st-ts-the-extension-page-should-render-popup-mode-based-on-url-query-2-snap.png b/...st-ts-the-extension-page-should-render-popup-mode-based-on-url-query-2-snap.png
diff --git a/...ews-test-ts-the-extension-page-should-support-search-browser-history-1-snap.png b/...ews-test-ts-the-extension-page-should-support-search-browser-history-1-snap.png