UI tweaks and shortcuts to toggle notebook with 'n'

apps/readest-app/src-tauri/src/tauri_traffic_light_positioner_plugin.rs

@@ -7,7 +7,7 @@ use tauri::{
 }; // 0.8
 
 const WINDOW_CONTROL_PAD_X: f64 = 10.0;
-const WINDOW_CONTROL_PAD_Y: f64 = 21.0;
+const WINDOW_CONTROL_PAD_Y: f64 = 20.0;
 
 struct UnsafeWindowHandle(*mut std::ffi::c_void);
 unsafe impl Send for UnsafeWindowHandle {}

apps/readest-app/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "Readest",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "identifier": "com.bilingify.digest",
   "build": {
     "frontendDist": "../out",

apps/readest-app/src/app/reader/components/HeaderBar.tsx

@@ -3,6 +3,7 @@ import React, { useRef, useState } from 'react';
 import { PiDotsThreeVerticalBold } from 'react-icons/pi';
 
 import { useReaderStore } from '@/store/readerStore';
+import useFullScreen from '@/hooks/useFullScreen';
 import WindowButtons from '@/components/WindowButtons';
 import Dropdown from '@/components/Dropdown';
 import SidebarToggler from './SidebarToggler';
@@ -26,6 +27,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
   onSetSettingsDialogOpen,
 }) => {
   const headerRef = useRef<HTMLDivElement>(null);
+  const { isFullScreen } = useFullScreen();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const { hoveredBookKey, isSideBarVisible, setHoveredBookKey } = useReaderStore();
 
@@ -38,7 +40,8 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
     <div
       ref={headerRef}
       className={clsx(
-        `header-bar absolute top-0 z-10 flex h-11 w-full items-center px-4`,
+        `header-bar absolute top-0 z-10 flex h-11 w-full items-center pr-4`,
+        isFullScreen ? 'pl-4' : 'pl-16',
         `shadow-xs bg-base-100 rounded-window-top-right transition-opacity duration-300`,
         !isSideBarVisible && 'rounded-window-top-left',
         isHoveredAnim && 'hover-bar-anim',

apps/readest-app/src/app/reader/components/SectionInfo.tsx

@@ -9,7 +9,7 @@ interface SectionInfoProps {
 const SectionInfo: React.FC<SectionInfoProps> = ({ chapter, gapLeft }) => {
   return (
     <div
-      className={clsx('pageinfo absolute right-0 top-0 flex h-8 items-end')}
+      className={clsx('pageinfo absolute right-0 top-0 flex h-[30px] items-end')}
       style={{ left: gapLeft }}
     >
       <h2 className='text-center font-sans text-xs font-light text-slate-500'>{chapter || ''}</h2>

apps/readest-app/src/app/reader/components/sidebar/Header.tsx

@@ -18,7 +18,7 @@ const SidebarHeader: React.FC<{
   return (
     <div
       className={clsx(
-        'sidebar-header flex h-11 items-center justify-between pr-3',
+        'sidebar-header flex h-11 items-center justify-between pr-2',
         isFullScreen ? 'pl-1.5' : 'pl-20',
       )}
     >
@@ -27,23 +27,25 @@ const SidebarHeader: React.FC<{
           <GiBookshelf size={20} className='fill-base-content' />
         </button>
       </div>
-      <div className='flex size-[50%] min-w-20 max-w-32 items-center justify-between'>
-        <button className='btn btn-ghost left-0 h-6 min-h-6 w-6 p-0'>
+      <div className='flex size-[70%] min-w-24 max-w-32 items-center justify-between'>
+        <button className='btn btn-ghost left-0 h-8 min-h-8 w-8 p-0'>
           <FiSearch size={18} />
         </button>
         <Dropdown
           className='dropdown-bottom flex justify-center'
-          buttonClassName='btn btn-ghost h-6 min-h-6 w-6 p-0'
+          buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
           toggleButton={<MdOutlineMenu size={20} />}
         >
           <BookMenu openSplitView={onOpenSplitView} />
         </Dropdown>
-        <button
-          onClick={handleTogglePin}
-          className={`${isPinned ? 'bg-gray-300' : 'bg-base-300'} btn btn-ghost btn-circle right-0 h-6 min-h-6 w-6`}
-        >
-          {isPinned ? <MdPushPin size={14} /> : <MdOutlinePushPin size={14} />}
-        </button>
+        <div className='right-0 flex h-8 w-8 items-center justify-center'>
+          <button
+            onClick={handleTogglePin}
+            className={`${isPinned ? 'bg-gray-300' : 'bg-base-300'} btn btn-ghost btn-circle h-6 min-h-6 w-6`}
+          >
+            {isPinned ? <MdPushPin size={14} /> : <MdOutlinePushPin size={14} />}
+          </button>
+        </div>
       </div>
     </div>
   );

apps/readest-app/src/app/reader/hooks/useBookShortcuts.ts

@@ -14,7 +14,8 @@ const useBookShortcuts = ({
   openSplitView,
   getNextBookKey,
 }: UseBookShortcutsProps) => {
-  const { getView, toggleSideBar, setSideBarBookKey, getViewSettings } = useReaderStore();
+  const { getView, setSideBarBookKey, getViewSettings } = useReaderStore();
+  const { toggleSideBar, toggleNotebook } = useReaderStore();
   const viewSettings = getViewSettings(sideBarBookKey ?? '');
   const fontSize = viewSettings?.defaultFontSize ?? 16;
   const lineHeight = viewSettings?.lineHeight ?? 1.6;
@@ -49,6 +50,7 @@ const useBookShortcuts = ({
       onOpenSplitView: openSplitView,
       onSwitchSideBar: switchSideBar,
       onToggleSideBar: toggleSideBar,
+      onToggleNotebook: toggleNotebook,
       onReloadPage: reloadPage,
       onGoLeft: goLeft,
       onGoRight: goRight,

apps/readest-app/src/helpers/shortcuts.ts

@@ -1,6 +1,7 @@
 export interface ShortcutConfig {
   onSwitchSideBar: string[];
   onToggleSideBar: string[];
+  onToggleNotebook: string[];
   onOpenSplitView: string[];
   onReloadPage: string[];
   onGoLeft: string[];
@@ -11,7 +12,8 @@ export interface ShortcutConfig {
 
 const DEFAULT_SHORTCUTS: ShortcutConfig = {
   onSwitchSideBar: ['ctrl+Tab', 'opt+Tab', 'alt+Tab'],
-  onToggleSideBar: ['t'],
+  onToggleSideBar: ['s'],
+  onToggleNotebook: ['n'],
   onOpenSplitView: ['shift+p'],
   onReloadPage: ['shift+r'],
   onGoLeft: ['ArrowLeft', 'PageUp', 'h'],