feat: webui adjustments (#562)

Author: sentialx

src/models/dialog-store.ts

@@ -1,5 +1,5 @@
 import { ipcRenderer, remote } from 'electron';
-import { observable, computed } from 'mobx';
+import { observable, computed, makeObservable } from 'mobx';
 import { getTheme } from '~/utils/themes';
 import { ISettings } from '~/interfaces';
 import { DEFAULT_SETTINGS } from '~/constants';
@@ -35,6 +35,12 @@ export class DialogStore {
       persistent?: boolean;
     } = {},
   ) {
+    makeObservable(this, {
+      theme: computed,
+      settings: observable,
+      visible: observable,
+    });
+
     const { visibilityWrapper, hideOnBlur, persistent } = {
       hideOnBlur: true,
       visibilityWrapper: true,

src/renderer/components/GlobalNavigationDrawer/index.tsx

@@ -42,12 +42,12 @@ export const GlobalNavigationDrawer = () => {
       <MenuItem name="bookmarks" icon={ICON_BOOKMARKS}>
         Bookmarks
       </MenuItem>
-      <MenuItem name="downloads" icon={ICON_DOWNLOAD}>
+      {/* <MenuItem name="downloads" icon={ICON_DOWNLOAD}>
         Downloads
       </MenuItem>
       <MenuItem name="extensions" icon={ICON_EXTENSIONS}>
         Extensions
-      </MenuItem>
+      </MenuItem> */}
     </NavigationDrawer>
   );
 };

src/renderer/views/app/components/Tab/index.tsx

@@ -82,6 +82,8 @@ const onMouseEnter = (tab: ITab) => (e: React.MouseEvent<HTMLDivElement>) => {
 
 const onMouseLeave = () => {
   store.tabs.hoveredTabId = -1;
+  ipcRenderer.send(`hide-tab-preview-${store.windowId}`);
+  store.tabs.canShowPreview = true;
 };
 
 const onClick = (tab: ITab) => (e: React.MouseEvent<HTMLDivElement>) => {

src/renderer/views/app/components/Tabbar/index.tsx

@@ -20,8 +20,6 @@ const onTabsMouseLeave = () => {
     store.tabs.removedTabs = 0;
     store.tabs.updateTabsBounds(true);
   }, 300);
-  ipcRenderer.send(`hide-tab-preview-${store.windowId}`);
-  store.tabs.canShowPreview = true;
 };
 
 const onAddTabClick = () => {

src/renderer/views/newtab/components/App/index.tsx

@@ -79,7 +79,7 @@ export default observer(() => {
                 icon={ICON_BOOKMARKS}
                 onClick={onIconClick('bookmarks')}
               ></IconItem>
-              <IconItem
+              {/* <IconItem
                 imageSet={store.imageVisible}
                 title="Downloads"
                 icon={ICON_DOWNLOAD}
@@ -90,15 +90,15 @@ export default observer(() => {
                 title="Extensions"
                 icon={ICON_EXTENSIONS}
                 onClick={onIconClick('extensions')}
-              ></IconItem>
+              ></IconItem> */}
             </Menu>
           )}
         </Wrapper>
-        {store.newsBehavior !== 'hidden' && (
+        {/* {store.newsBehavior !== 'hidden' && (
           <Content>
             <News></News>
           </Content>
-        )}
+        )} */}
       </div>
     </ThemeProvider>
   );

src/renderer/views/newtab/components/Preferences/index.tsx

@@ -110,15 +110,15 @@ export const Preferences = observer(() => {
           >
             Inspirational
           </ContextMenuItem>
-          <ContextMenuItem
+          {/* <ContextMenuItem
             bigger
             onClick={onPresetClick('informational')}
             selected={store.preset === 'informational'}
             iconSize={28}
             icon={ICON_WINDOW}
           >
             Informational
-          </ContextMenuItem>
+          </ContextMenuItem> */}
           <ContextMenuItem
             bigger
             selected={store.preset === 'custom'}
@@ -137,7 +137,8 @@ export const Preferences = observer(() => {
             pointerEvents:
               store.preferencesContent === 'custom' ? 'inherit' : 'none',
             transition: '0.3s max-height, 0.3s transform, 0.3s opacity',
-            maxHeight: store.preferencesContent === 'custom' ? 390 : 200,
+            // maxHeight: store.preferencesContent === 'custom' ? 390 : 200,
+            maxHeight: store.preferencesContent === 'custom' ? 300 : 150,
             transform:
               store.preferencesContent === 'custom'
                 ? 'translateX(-100%)'
@@ -162,7 +163,7 @@ export const Preferences = observer(() => {
           <ContextMenuSeparator bigger></ContextMenuSeparator>
           <SwitchItem name="topSitesVisible">Show top sites</SwitchItem>
           <SwitchItem name="quickMenuVisible">Show quick menu</SwitchItem>
-          <ContextMenuSeparator bigger></ContextMenuSeparator>
+          {/* <ContextMenuSeparator bigger></ContextMenuSeparator>
           <SubTitle>News visibility:</SubTitle>
           <Dropdown
             defaultValue={store.newsBehavior}
@@ -173,7 +174,7 @@ export const Preferences = observer(() => {
             <Dropdown.Item value="always-visible">Always visible</Dropdown.Item>
             <Dropdown.Item value="hidden">Hidden</Dropdown.Item>
             <Dropdown.Item value="on-scroll">Visible on scroll</Dropdown.Item>
-          </Dropdown>
+          </Dropdown> */}
         </div>
       </div>
     </ContextMenu>

src/renderer/views/newtab/store/index.ts

@@ -37,7 +37,8 @@ export class Store {
 
   @computed
   public get fullSizeImage() {
-    return this.newsBehavior === 'on-scroll' || this.newsBehavior === 'hidden';
+    // return this.newsBehavior === 'on-scroll' || this.newsBehavior === 'hidden';
+    return true;
   }
 
   @observable
@@ -169,13 +170,13 @@ export class Store {
 
     this.loadTopSites();
 
-    window.onscroll = () => {
-      this.updateNews();
-    };
+    // window.onscroll = () => {
+    //   this.updateNews();
+    // };
 
-    window.onresize = () => {
-      this.updateNews();
-    };
+    // window.onresize = () => {
+    //   this.updateNews();
+    // };
   }
 
   public async loadImage() {