move sizes slice into featuers/ui/uiSlice

ui2/src/app/App.tsx

@@ -13,7 +13,7 @@ import {
   selectCurrentUserStatus,
   selectCurrentUser
 } from "@/slices/currentUser"
-import {updateOutlet} from "@/slices/sizes"
+import {updateOutlet} from "@/features/ui/uiSlice"
 
 import "./App.css"
 import {selectNavBarWidth} from "@/features/ui/uiSlice"

ui2/src/app/store.ts

@@ -9,7 +9,6 @@ import usersReducer from "@/features/users/usersSlice"
 import nodesReducer from "@/features/nodes/nodesSlice"
 import uiReducer from "@/features/ui/uiSlice"
 import {uploaderReducer} from "@/slices/uploader"
-import sizesSliceReducer from "@/slices/sizes"
 import dragndropReducer from "@/slices/dragndrop"
 
 export const store = configureStore({
@@ -21,7 +20,6 @@ export const store = configureStore({
     groups: groupsReducer,
     users: usersReducer,
     uploader: uploaderReducer,
-    sizes: sizesSliceReducer,
     dragndrop: dragndropReducer,
     nodes: nodesReducer,
     ui: uiReducer,

ui2/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -18,7 +18,7 @@ import {
   selectPanelNodesStatus,
   selectCurrentFolderID
 } from "@/slices/dualPanel/dualPanel"
-import {updateBreadcrumb} from "@/slices/sizes"
+import {updateBreadcrumb} from "@/features/ui/uiSlice"
 
 import type {PanelMode, NType, UserDetails} from "@/types"
 

ui2/src/components/SearchResults/ActionButtons.tsx

@@ -3,7 +3,7 @@ import {Group} from "@mantine/core"
 import {useViewportSize} from "@mantine/hooks"
 import {useDispatch} from "react-redux"
 import ToggleSecondaryPanel from "@/components/DualPanel/ToggleSecondaryPanel"
-import {updateSearchActionPanel} from "@/slices/sizes"
+import {updateSearchActionPanel} from "@/features/ui/uiSlice"
 
 import GoBackButton from "./GoBackButton"
 import OpenInOtherPanelCheckbox from "./OpenInOtherPanelCheckbox"

ui2/src/components/SearchResults/SearchResults.tsx

@@ -18,7 +18,7 @@ import {
 } from "@/slices/dualPanel/dualPanel"
 import ActionButtons from "./ActionButtons"
 import SearchResultItems from "./SearchResultItems"
-import {selectSearchContentHeight} from "@/slices/sizes"
+import {selectSearchContentHeight} from "@/features/ui/uiSlice"
 import {NType, PanelMode} from "@/types"
 import classes from "./SearchResults.module.css"
 

ui2/src/components/Viewer/ActionButtons.tsx

@@ -3,7 +3,7 @@ import {Group} from "@mantine/core"
 import {useViewportSize} from "@mantine/hooks"
 import {useDispatch, useSelector} from "react-redux"
 import ToggleSecondaryPanel from "@/components/DualPanel/ToggleSecondaryPanel"
-import {updateActionPanel} from "@/slices/sizes"
+import {updateActionPanel} from "@/features/ui/uiSlice"
 import PanelContext from "@/contexts/PanelContext"
 import EditTitleButton from "./EditTitleButton"
 

ui2/src/components/Viewer/Viewer.tsx

@@ -12,7 +12,7 @@ import type {RootState} from "@/app/types"
 import type {PanelMode, NType} from "@/types"
 import Breadcrumbs from "@/components/Breadcrumbs"
 import PanelContext from "@/contexts/PanelContext"
-import {selectContentHeight} from "@/slices/sizes"
+import {selectContentHeight} from "@/features/ui/uiSlice"
 import ActionButtons from "./ActionButtons"
 import ThumbnailsToggle from "./ThumbnailsToggle"
 import Pages from "./Pages"

ui2/src/features/nodes/components/Commander.tsx

@@ -20,7 +20,7 @@ import Breadcrumbs from "@/components/Breadcrumbs"
 import Pagination from "@/components/Pagination"
 import PanelContext from "@/contexts/PanelContext"
 import drop_files from "@/components/modals/DropFiles"
-import {selectContentHeight} from "@/slices/sizes"
+import {selectContentHeight} from "@/features/ui/uiSlice"
 import classes from "./Commander.module.scss"
 import {useGetPaginatedNodesQuery} from "@/features/nodes/apiSlice"
 

ui2/src/features/nodes/components/FolderNodeActions/FolderNodeActions.tsx

@@ -3,7 +3,7 @@ import {Group} from "@mantine/core"
 import {useViewportSize} from "@mantine/hooks"
 import {useSelector, useDispatch} from "react-redux"
 import {selectSelectedNodeIds} from "@/slices/dualPanel/dualPanel"
-import {updateActionPanel} from "@/slices/sizes"
+import {updateActionPanel} from "@/features/ui/uiSlice"
 
 import type {RootState} from "@/app/types"
 import type {PanelMode} from "@/types"

ui2/src/features/ui/uiSlice.ts

@@ -1,7 +1,7 @@
 import Cookies from "js-cookie"
 import {createSlice, PayloadAction} from "@reduxjs/toolkit"
 import type {RootState} from "@/app/types"
-import type {BooleanString} from "@/types"
+import type {BooleanString, PanelMode} from "@/types"
 
 import type {FolderType, FileItemType, FileItemStatus, NodeType} from "@/types"
 
@@ -10,6 +10,13 @@ const FULL_WIDTH = 160
 const NAVBAR_COLLAPSED_COOKIE = "navbar_collapsed"
 const NAVBAR_WIDTH_COOKIE = "navbar_width"
 
+const SMALL_BOTTOM_MARGIN = 13 /* pixles */
+
+type DualArg = {
+  mode: PanelMode
+  value: number
+}
+
 type UpdateFileStatusArg = {
   item: {
     source: NodeType | null
@@ -30,9 +37,28 @@ interface UploaderState {
   files: Array<FileItemType>
 }
 
+interface SearchPanelSizes {
+  actionPanelHeight: number
+}
+
+// i.e Commander's panel, viewer's panel
+interface PanelSizes {
+  actionPanelHeight: number
+  breadcrumbHeight: number
+}
+
+interface SizesState {
+  outletTopMarginAndPadding: number
+  windowInnerHeight: number
+  main: PanelSizes
+  secondary?: PanelSizes
+  search?: SearchPanelSizes
+}
+
 interface UIState {
   uploader: UploaderState
   navbar: NavBarState
+  sizes: SizesState
 }
 
 const initialState: UIState = {
@@ -43,6 +69,14 @@ const initialState: UIState = {
   navbar: {
     collapsed: initial_collapse_value(),
     width: initial_width_value()
+  },
+  sizes: {
+    outletTopMarginAndPadding: 0,
+    windowInnerHeight: window.innerHeight,
+    main: {
+      actionPanelHeight: 0,
+      breadcrumbHeight: 0
+    }
   }
 }
 
@@ -100,11 +134,71 @@ const uiSlice = createSlice({
         Cookies.set(NAVBAR_COLLAPSED_COOKIE, "true")
         Cookies.set(NAVBAR_WIDTH_COOKIE, `${COLLAPSED_WIDTH}`)
       }
+    },
+    updateOutlet(state, action: PayloadAction<number>) {
+      state.sizes.windowInnerHeight = window.innerHeight
+      state.sizes.outletTopMarginAndPadding = action.payload
+    },
+    updateActionPanel(state, action: PayloadAction<DualArg>) {
+      const {value, mode} = action.payload
+
+      state.sizes.windowInnerHeight = window.innerHeight
+      if (mode == "main") {
+        // main panel
+        state.sizes.main.actionPanelHeight = value
+      } else if (mode == "secondary") {
+        // secondary panel
+        if (state.sizes.secondary) {
+          state.sizes.secondary.actionPanelHeight = value
+        } else {
+          state.sizes.secondary = {
+            breadcrumbHeight: 0,
+            actionPanelHeight: value
+          }
+        }
+      }
+    },
+    updateBreadcrumb(state, action: PayloadAction<DualArg>) {
+      const {value, mode} = action.payload
+
+      state.sizes.windowInnerHeight = window.innerHeight
+      if (mode == "main") {
+        // main panel
+        state.sizes.main.breadcrumbHeight = value
+      } else if (mode == "secondary") {
+        // secondary panel
+        if (state.sizes.secondary) {
+          state.sizes.secondary.breadcrumbHeight = value
+        } else {
+          state.sizes.secondary = {
+            breadcrumbHeight: value,
+            actionPanelHeight: 0
+          }
+        }
+      }
+    },
+    updateSearchActionPanel(state, action: PayloadAction<number>) {
+      state.sizes.windowInnerHeight = window.innerHeight
+      if (state.sizes.search) {
+        state.sizes.search.actionPanelHeight = action.payload
+      } else {
+        state.sizes.search = {
+          actionPanelHeight: action.payload
+        }
+      }
     }
   }
 })
-export const {openUploader, closeUploader, updateFileItem, toggleNavBar} =
-  uiSlice.actions
+export const {
+  openUploader,
+  closeUploader,
+  updateFileItem,
+  toggleNavBar,
+  updateOutlet,
+  updateActionPanel,
+  updateSearchActionPanel,
+  updateBreadcrumb
+} = uiSlice.actions
 export default uiSlice.reducer
 
 export const selectOpened = (state: RootState): boolean => state.uploader.opened
@@ -116,6 +210,41 @@ export const selectNavBarCollapsed = (state: RootState) =>
   state.ui.navbar.collapsed
 export const selectNavBarWidth = (state: RootState) => state.ui.navbar.width
 
+export const selectContentHeight = (state: RootState, mode: PanelMode) => {
+  let height: number = state.ui.sizes.windowInnerHeight
+
+  height -= state.ui.sizes.outletTopMarginAndPadding
+
+  if (mode == "main") {
+    height -= state.ui.sizes.main.actionPanelHeight
+    height -= state.ui.sizes.main.breadcrumbHeight
+  } else if (mode == "secondary") {
+    if (state.ui.sizes.secondary) {
+      height -= state.ui.sizes.secondary.actionPanelHeight
+      height -= state.ui.sizes.secondary.breadcrumbHeight
+    }
+  }
+
+  /* Let there be a small margin at the bottom of the viewport */
+  height -= SMALL_BOTTOM_MARGIN
+  return height
+}
+
+export const selectSearchContentHeight = (state: RootState) => {
+  let height: number = state.ui.sizes.windowInnerHeight
+
+  height -= state.ui.sizes.outletTopMarginAndPadding
+
+  if (state.ui.sizes.search) {
+    height -= state.ui.sizes.search.actionPanelHeight
+  }
+
+  /* Let there be a small margin at the bottom of the viewport */
+  height -= SMALL_BOTTOM_MARGIN
+
+  return height
+}
+
 /* Load initial collapse state value from cookie */
 function initial_collapse_value(): boolean {
   const collapsed = Cookies.get(NAVBAR_COLLAPSED_COOKIE) as BooleanString