Add collapsible sidebar (#68)

- Sidebar can collapse by menu option or dragging
2023-05-10 18:20:04 -07:00 · 2023-05-10 18:20:04 -07:00 · e49fe6c452
commit e49fe6c452
parent ec7a053a74
11 changed files with 348 additions and 50 deletions
--- a/src/renderer/features/player/components/left-controls.tsx
+++ b/src/renderer/features/player/components/left-controls.tsx
@ -8,10 +8,10 @@ import { Button, Text } from '/@/renderer/components';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
  useAppStoreActions,
-  useAppStore,
  useCurrentSong,
  useSetFullScreenPlayerStore,
  useFullScreenPlayerStore,
+  useSidebarStore,
 } from '/@/renderer/store';
 import { fadeIn } from '/@/renderer/styles';
 import { LibraryItem } from '/@/renderer/api/types';
@ -45,6 +45,7 @@ const Image = styled(motion.div)`
  width: 60px;
  height: 60px;
  background-color: var(--placeholder-bg);
+  cursor: pointer;
  filter: drop-shadow(0 5px 6px rgb(0, 0, 0, 50%));

  ${fadeIn};
@ -84,7 +85,9 @@ export const LeftControls = () => {
  const { setSideBar } = useAppStoreActions();
  const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
  const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
-  const hideImage = useAppStore((state) => state.sidebar.image);
+  // const hideImage = useAppStore((state) => state.sidebar.image);
+  const { image, collapsed } = useSidebarStore();
+  const hideImage = image && !collapsed;
  const currentSong = useCurrentSong();
  const title = currentSong?.name;
  const artists = currentSong?.artists;
@ -144,13 +147,13 @@ export const LeftControls = () => {
                    </Center>
                  </>
                )}
-
+                {!collapsed && (
                  <Button
                    compact
                    opacity={0.8}
                    radius={50}
                    size="md"
-                  sx={{ position: 'absolute', right: 2, top: 2 }}
+                    sx={{ cursor: 'default', position: 'absolute', right: 2, top: 2 }}
                    tooltip={{ label: 'Expand', openDelay: 500 }}
                    variant="default"
                    onClick={handleToggleSidebarImage}
@ -160,6 +163,7 @@ export const LeftControls = () => {
                      size={20}
                    />
                  </Button>
+                )}
              </Image>
            </ImageWrapper>
          )}
--- a/src/renderer/features/sidebar/components/action-bar.tsx
+++ b/src/renderer/features/sidebar/components/action-bar.tsx
@ -27,7 +27,7 @@ export const ActionBar = () => {
      ref={cq.ref}
      gutter="sm"
    >
-      <Grid.Col span={cq.isSm ? 7 : 5}>
+      <Grid.Col span={cq.isSm ? 7 : 6}>
        <TextInput
          disabled
          readOnly
@ -36,7 +36,7 @@ export const ActionBar = () => {
          size="md"
        />
      </Grid.Col>
-      <Grid.Col span={cq.isSm ? 5 : 7}>
+      <Grid.Col span={cq.isSm ? 5 : 6}>
        <Group
          grow
          noWrap
--- a/src/renderer/features/sidebar/components/collapsed-sidebar-item.tsx
+++ b/src/renderer/features/sidebar/components/collapsed-sidebar-item.tsx
@ -0,0 +1,100 @@
+import { createPolymorphicComponent, Flex } from '@mantine/core';
+import { motion } from 'framer-motion';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Text } from '/@/renderer/components';
+
+const Container = styled(Flex)<{ $active?: boolean; $disabled?: boolean }>`
+  position: relative;
+  width: 100%;
+  padding: 0.9rem 0.3rem;
+  border-right: var(--sidebar-border);
+  cursor: ${(props) => (props.$disabled ? 'default' : 'pointer')};
+  opacity: ${(props) => props.$disabled && 0.6};
+
+  svg {
+    fill: ${(props) => (props.$active ? 'var(--primary-color)' : 'var(--sidebar-fg)')};
+  }
+
+  &:focus-visible {
+    background-color: var(--sidebar-bg-hover);
+    outline: none;
+  }
+
+  ${(props) =>
+    !props.$disabled &&
+    `
+      &:hover {
+          background-color: var(--sidebar-bg-hover);
+
+          div {
+            color: var(--main-fg) !important;
+          }
+
+          svg {
+            fill: var(--primary-color);
+          }
+        }
+    `}
+`;
+
+const TextWrapper = styled.div`
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: center;
+  text-overflow: ellipsis;
+`;
+
+const ActiveTabIndicator = styled(motion.div)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 3px;
+  width: 2px;
+  height: 80%;
+  margin-top: auto;
+  margin-bottom: auto;
+  background: var(--primary-color);
+`;
+
+interface CollapsedSidebarItemProps {
+  active?: boolean;
+  activeIcon: React.ReactNode;
+  disabled?: boolean;
+  icon: React.ReactNode;
+  label: string;
+}
+
+const _CollapsedSidebarItem = forwardRef<HTMLDivElement, CollapsedSidebarItemProps>(
+  ({ active, activeIcon, icon, label, disabled, ...props }: CollapsedSidebarItemProps, ref) => {
+    return (
+      <Container
+        ref={ref}
+        $active={active}
+        $disabled={disabled}
+        align="center"
+        direction="column"
+        {...props}
+      >
+        {active && <ActiveTabIndicator layoutId="active-tab-indicator" />}
+        {active ? activeIcon : icon}
+        <TextWrapper>
+          <Text
+            $secondary={!active}
+            fw="600"
+            overflow="hidden"
+            size="xs"
+          >
+            {label}
+          </Text>
+        </TextWrapper>
+      </Container>
+    );
+  },
+);
+
+export const CollapsedSidebarItem = createPolymorphicComponent<'button', CollapsedSidebarItemProps>(
+  _CollapsedSidebarItem,
+);
--- a/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
+++ b/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
@ -0,0 +1,123 @@
+import { UnstyledButton } from '@mantine/core';
+import { motion } from 'framer-motion';
+import {
+  RiUserVoiceLine,
+  RiMenuFill,
+  RiFlag2Line,
+  RiFolder3Line,
+  RiPlayListLine,
+  RiAlbumLine,
+  RiHome6Line,
+  RiMusic2Line,
+  RiHome6Fill,
+  RiAlbumFill,
+  RiMusic2Fill,
+  RiUserVoiceFill,
+  RiFlag2Fill,
+  RiFolder3Fill,
+  RiPlayListFill,
+} from 'react-icons/ri';
+import { useLocation } from 'react-router';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { DropdownMenu, ScrollArea } from '/@/renderer/components';
+import { CollapsedSidebarItem } from '/@/renderer/features/sidebar/components/collapsed-sidebar-item';
+import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
+import { AppRoute } from '/@/renderer/router/routes';
+import { useWindowSettings } from '/@/renderer/store';
+import { Platform } from '/@/renderer/types';
+
+const SidebarContainer = styled(motion.div)<{ windowBarStyle: Platform }>`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: ${(props) =>
+    props.windowBarStyle === Platform.WEB
+      ? 'calc(100vh - 149px)'
+      : 'calc(100vh - 119px)'}; // Playerbar (90px), titlebar (65px), windowbar (30px)
+  user-select: none;
+`;
+
+export const CollapsedSidebar = () => {
+  const location = useLocation();
+  const { windowBarStyle } = useWindowSettings();
+
+  return (
+    <SidebarContainer windowBarStyle={windowBarStyle}>
+      <ScrollArea
+        scrollHideDelay={0}
+        scrollbarSize={8}
+      >
+        <DropdownMenu position="right-start">
+          <DropdownMenu.Target>
+            <CollapsedSidebarItem
+              activeIcon={<RiMenuFill size="25" />}
+              component={UnstyledButton}
+              icon={<RiMenuFill size="25" />}
+              label="Menu"
+            />
+          </DropdownMenu.Target>
+          <DropdownMenu.Dropdown>
+            <AppMenu />
+          </DropdownMenu.Dropdown>
+        </DropdownMenu>
+        <CollapsedSidebarItem
+          active={location.pathname === AppRoute.HOME}
+          activeIcon={<RiHome6Fill size="25" />}
+          component={Link}
+          icon={<RiHome6Line size="25" />}
+          label="Home"
+          to={AppRoute.HOME}
+        />
+        <CollapsedSidebarItem
+          active={location.pathname === AppRoute.LIBRARY_ALBUMS}
+          activeIcon={<RiAlbumFill size="25" />}
+          component={Link}
+          icon={<RiAlbumLine size="25" />}
+          label="Albums"
+          to={AppRoute.LIBRARY_ALBUMS}
+        />
+        <CollapsedSidebarItem
+          active={location.pathname === AppRoute.LIBRARY_SONGS}
+          activeIcon={<RiMusic2Fill size="25" />}
+          component={Link}
+          icon={<RiMusic2Line size="25" />}
+          label="Tracks"
+          to={AppRoute.LIBRARY_SONGS}
+        />
+        <CollapsedSidebarItem
+          active={location.pathname === AppRoute.LIBRARY_ALBUM_ARTISTS}
+          activeIcon={<RiUserVoiceFill size="25" />}
+          component={Link}
+          icon={<RiUserVoiceLine size="25" />}
+          label="Artists"
+          to={AppRoute.LIBRARY_ALBUM_ARTISTS}
+        />
+        <CollapsedSidebarItem
+          disabled
+          activeIcon={<RiFlag2Fill size="25" />}
+          component={Link}
+          icon={<RiFlag2Line size="25" />}
+          label="Genres"
+          to={AppRoute.LIBRARY_GENRES}
+        />
+        <CollapsedSidebarItem
+          disabled
+          activeIcon={<RiFolder3Fill size="25" />}
+          component={Link}
+          icon={<RiFolder3Line size="25" />}
+          label="Folders"
+          to={AppRoute.LIBRARY_FOLDERS}
+        />
+        <CollapsedSidebarItem
+          active={location.pathname === AppRoute.PLAYLISTS}
+          activeIcon={<RiPlayListFill size="25" />}
+          component={Link}
+          icon={<RiPlayListLine size="25" />}
+          label="Playlists"
+          to={AppRoute.PLAYLISTS}
+        />
+      </ScrollArea>
+    </SidebarContainer>
+  );
+};
--- a/src/renderer/features/sidebar/components/sidebar.tsx
+++ b/src/renderer/features/sidebar/components/sidebar.tsx
@ -13,8 +13,8 @@ import {
  RiDiscLine,
  RiFlag2Line,
  RiFolder3Line,
-  RiHome5Fill,
-  RiHome5Line,
+  RiHome6Fill,
+  RiHome6Line,
  RiListUnordered,
  RiMusic2Fill,
  RiMusic2Line,
@ -54,6 +54,7 @@ const SidebarContainer = styled.div<{ windowBarStyle: Platform }>`
 const ImageContainer = styled(motion.div)<{ height: string }>`
  position: relative;
  height: ${(props) => props.height};
+  cursor: pointer;

  ${fadeIn};
  animation: fadein 0.2s ease-in-out;
@ -141,9 +142,9 @@ export const Sidebar = () => {
            >
              <Group spacing="sm">
                {location.pathname === AppRoute.HOME ? (
-                  <RiHome5Fill size="1.3em" />
+                  <RiHome6Fill size="1.3em" />
                ) : (
-                  <RiHome5Line size="1.3em" />
+                  <RiHome6Line size="1.3em" />
                )}
                Home
              </Group>
@ -305,7 +306,7 @@ export const Sidebar = () => {
                opacity={0.8}
                radius={100}
                size="md"
-                sx={{ position: 'absolute', right: 5, top: 5 }}
+                sx={{ cursor: 'default', position: 'absolute', right: 5, top: 5 }}
                tooltip={{ label: 'Collapse', openDelay: 500 }}
                variant="default"
                onClick={(e) => {
--- a/src/renderer/features/titlebar/components/app-menu.tsx
+++ b/src/renderer/features/titlebar/components/app-menu.tsx
@ -3,10 +3,14 @@ import { openModal, closeAllModals } from '@mantine/modals';
 import isElectron from 'is-electron';
 import {
  RiLockLine,
-  RiServerFill,
-  RiEdit2Fill,
-  RiSettings3Fill,
  RiWindowFill,
+  RiArrowLeftSLine,
+  RiArrowRightSLine,
+  RiLayoutRightLine,
+  RiLayoutLeftLine,
+  RiEdit2Line,
+  RiSettings3Line,
+  RiServerLine,
 } from 'react-icons/ri';
 import { useNavigate } from 'react-router';
 import { Link } from 'react-router-dom';
@ -14,7 +18,13 @@ import { DropdownMenu } from '/@/renderer/components';
 import { ServerList } from '/@/renderer/features/servers';
 import { EditServerForm } from '/@/renderer/features/servers/components/edit-server-form';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useCurrentServer, useServerList, useAuthStoreActions } from '/@/renderer/store';
+import {
+  useCurrentServer,
+  useServerList,
+  useAuthStoreActions,
+  useSidebarStore,
+  useAppStoreActions,
+} from '/@/renderer/store';
 import { ServerListItem, ServerType } from '/@/renderer/types';

 const browser = isElectron() ? window.electron.browser : null;
@ -24,6 +34,8 @@ export const AppMenu = () => {
  const currentServer = useCurrentServer();
  const serverList = useServerList();
  const { setCurrentServer } = useAuthStoreActions();
+  const { collapsed } = useSidebarStore();
+  const { setSideBar } = useAppStoreActions();

  const handleSetCurrentServer = (server: ServerListItem) => {
    navigate(AppRoute.HOME);
@ -55,6 +67,14 @@ export const AppMenu = () => {
    browser?.devtools();
  };

+  const handleCollapseSidebar = () => {
+    setSideBar({ collapsed: true });
+  };
+
+  const handleExpandSidebar = () => {
+    setSideBar({ collapsed: false });
+  };
+
  const showBrowserDevToolsButton = isElectron();

  return (
@ -70,7 +90,7 @@ export const AppMenu = () => {
          <DropdownMenu.Item
            key={`server-${server.id}`}
            $isActive={server.id === currentServer?.id}
-            icon={isSessionExpired ? <RiLockLine color="var(--danger-color)" /> : <RiServerFill />}
+            icon={isSessionExpired ? <RiLockLine color="var(--danger-color)" /> : <RiServerLine />}
            onClick={() => {
              if (!isSessionExpired) return handleSetCurrentServer(server);
              return handleCredentialsModal(server);
@ -82,18 +102,46 @@ export const AppMenu = () => {
      })}
      <DropdownMenu.Divider />
      <DropdownMenu.Item
-        icon={<RiEdit2Fill />}
+        icon={<RiEdit2Line />}
        onClick={handleManageServersModal}
      >
        Manage servers
      </DropdownMenu.Item>
      <DropdownMenu.Item
        component={Link}
-        icon={<RiSettings3Fill />}
+        icon={<RiSettings3Line />}
        to={AppRoute.SETTINGS}
      >
        Settings
      </DropdownMenu.Item>
+      <DropdownMenu.Divider />
+      <DropdownMenu.Item
+        icon={<RiArrowLeftSLine />}
+        onClick={() => navigate(-1)}
+      >
+        Go back
+      </DropdownMenu.Item>
+      <DropdownMenu.Item
+        icon={<RiArrowRightSLine />}
+        onClick={() => navigate(1)}
+      >
+        Go forward
+      </DropdownMenu.Item>
+      {collapsed ? (
+        <DropdownMenu.Item
+          icon={<RiLayoutRightLine />}
+          onClick={handleExpandSidebar}
+        >
+          Expand sidebar
+        </DropdownMenu.Item>
+      ) : (
+        <DropdownMenu.Item
+          icon={<RiLayoutLeftLine />}
+          onClick={handleCollapseSidebar}
+        >
+          Collapse sidebar
+        </DropdownMenu.Item>
+      )}
      {showBrowserDevToolsButton && (
        <>
          <DropdownMenu.Divider />
--- a/src/renderer/layouts/default-layout/main-content.tsx
+++ b/src/renderer/layouts/default-layout/main-content.tsx
@ -8,25 +8,31 @@ import styled from 'styled-components';
 import { DrawerPlayQueue, SidebarPlayQueue } from '/@/renderer/features/now-playing';
 import { FullScreenPlayer } from '/@/renderer/features/player/components/full-screen-player';
 import { Sidebar } from '/@/renderer/features/sidebar/components/sidebar';
+import { CollapsedSidebar } from '../../features/sidebar/components/collapsed-sidebar';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useAppStore, useAppStoreActions, useFullScreenPlayerStore } from '/@/renderer/store';
 import { useWindowSettings, useGeneralSettings } from '/@/renderer/store/settings.store';
 import { Platform } from '/@/renderer/types';
 import { constrainSidebarWidth, constrainRightSidebarWidth } from '/@/renderer/utils';

+const MINIMUM_SIDEBAR_WIDTH = 260;
+
 const MainContentContainer = styled.div<{
  leftSidebarWidth: string;
  rightExpanded?: boolean;
  rightSidebarWidth?: string;
  shell?: boolean;
+  sidebarCollapsed?: boolean;
 }>`
  position: relative;
  display: ${(props) => (props.shell ? 'flex' : 'grid')};
  grid-area: main-content;
  grid-template-areas: 'sidebar . right-sidebar';
  grid-template-rows: 1fr;
-  grid-template-columns: ${(props) => props.leftSidebarWidth} 1fr ${(props) =>
-      props.rightExpanded && props.rightSidebarWidth};
+  grid-template-columns: ${(props) => (props.sidebarCollapsed ? '80px' : props.leftSidebarWidth)} 1fr ${(
+      props,
+    ) => props.rightExpanded && props.rightSidebarWidth};
+
  gap: 0;
  background: var(--main-bg);
 `;
@ -56,14 +62,25 @@ const ResizeHandle = styled.div<{
  bottom: ${(props) => props.placement === 'bottom' && 0};
  left: ${(props) => props.placement === 'left' && 0};
  z-index: 90;
-  width: 2px;
+  width: 4px;
  height: 100%;
-  background-color: var(--sidebar-handle-bg);
  cursor: ew-resize;
  opacity: ${(props) => (props.isResizing ? 1 : 0)};

  &:hover {
-    opacity: 0.5;
+    opacity: 0.7;
+  }
+
+  &::before {
+    position: absolute;
+    top: ${(props) => props.placement === 'top' && 0};
+    right: ${(props) => props.placement === 'right' && 0};
+    bottom: ${(props) => props.placement === 'bottom' && 0};
+    left: ${(props) => props.placement === 'left' && 0};
+    width: 1px;
+    height: 100%;
+    background-color: var(--sidebar-handle-bg);
+    content: '';
  }
 `;

@ -193,10 +210,15 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
  const resize = useCallback(
    (mouseMoveEvent: any) => {
      if (isResizing) {
-        const width = `${constrainSidebarWidth(mouseMoveEvent.clientX)}px`;
-        setSideBar({ leftWidth: width });
+        const width = mouseMoveEvent.clientX;
+        const constrainedWidth = `${constrainSidebarWidth(width)}px`;
+
+        if (width < MINIMUM_SIDEBAR_WIDTH - 100) {
+          setSideBar({ collapsed: true });
+        } else {
+          setSideBar({ collapsed: false, leftWidth: constrainedWidth });
        }
-      if (isResizingRight) {
+      } else if (isResizingRight) {
        const start = Number(sidebar.rightWidth.split('px')[0]);
        const { left } = rightSidebarRef!.current!.getBoundingClientRect();
        const width = `${constrainRightSidebarWidth(start + left - mouseMoveEvent.clientX)}px`;
@ -224,6 +246,7 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
      rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
      rightSidebarWidth={sidebar.rightWidth}
      shell={shell}
+      sidebarCollapsed={sidebar.collapsed}
    >
      {!shell && (
        <>
@ -243,7 +266,7 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
                startResizing('left');
              }}
            />
-            <Sidebar />
+            {sidebar.collapsed ? <CollapsedSidebar /> : <Sidebar />}
          </SidebarContainer>
          <AnimatePresence
            initial={false}
--- a/src/renderer/router/routes.ts
+++ b/src/renderer/router/routes.ts
@ -12,6 +12,7 @@ export enum AppRoute {
  LIBRARY_ARTISTS = '/library/artists',
  LIBRARY_ARTISTS_DETAIL = '/library/artists/:artistId',
  LIBRARY_FOLDERS = '/library/folders',
+  LIBRARY_GENRES = '/library/genres',
  LIBRARY_SONGS = '/library/songs',
  NOW_PLAYING = '/now-playing',
  PLAYING = '/playing',
--- a/src/renderer/store/app.store.ts
+++ b/src/renderer/store/app.store.ts
@ -5,6 +5,7 @@ import { immer } from 'zustand/middleware/immer';
 import { Platform } from '/@/renderer/types';

 type SidebarProps = {
+  collapsed: boolean;
  expanded: string[];
  image: boolean;
  leftWidth: string;
@ -20,13 +21,7 @@ type TitlebarProps = {
 export interface AppState {
  isReorderingQueue: boolean;
  platform: Platform;
-  sidebar: {
-    expanded: string[];
-    image: boolean;
-    leftWidth: string;
-    rightExpanded: boolean;
-    rightWidth: string;
-  };
+  sidebar: SidebarProps;
  titlebar: TitlebarProps;
 }

@ -60,6 +55,7 @@ export const useAppStore = create<AppSlice>()(
        isReorderingQueue: false,
        platform: Platform.WINDOWS,
        sidebar: {
+          collapsed: false,
          expanded: [],
          image: false,
          leftWidth: '400px',
@ -78,7 +74,7 @@ export const useAppStore = create<AppSlice>()(
        return merge(currentState, persistedState);
      },
      name: 'store_app',
-      version: 1,
+      version: 2,
    },
  ),
 );
--- a/src/renderer/themes/default.scss
+++ b/src/renderer/themes/default.scss
@ -21,6 +21,7 @@
  --titlebar-controls-bg: rgba(0, 0, 0, 0);

  --sidebar-bg: rgb(0, 0, 0);
+  --sidebar-bg-hover: rgb(50, 50, 50);
  --sidebar-fg: rgb(210, 210, 210);
  --sidebar-fg-hover: rgb(255, 255, 255);
  --sidebar-handle-bg: #4d4d4d;
--- a/src/renderer/themes/light.scss
+++ b/src/renderer/themes/light.scss
@ -10,6 +10,7 @@ body[data-theme='defaultLight'] {
  --titlebar-controls-bg: rgba(0, 0, 0, 0);

  --sidebar-bg: rgb(240, 241, 242);
+  --sidebar-bg-hover: rgb(200, 200, 200);
  --sidebar-fg: rgb(0, 0, 0);
  --sidebar-fg-hover: rgb(85, 85, 85);
  --sidebar-handle-bg: rgb(220, 220, 220);