Sidebar facelift

Author: Polleps

browser/data-browser/src/components/IconButton/IconButton.tsx

@@ -7,6 +7,7 @@ export enum IconButtonVariant {
   Outline,
   Fill,
   Colored,
+  Square,
 }
 
 type ColorProp = keyof DefaultTheme['colors'] | 'inherit';
@@ -56,7 +57,7 @@ export const IconButtonLink = React.forwardRef<
   HTMLAnchorElement,
   React.PropsWithChildren<IconButtonLinkProps>
 >(({ variant, children, color, ...props }, ref) => {
-  const Comp = ComponentMap.get(variant!) ?? SimpleIconButton;
+  const Comp = ComponentMap.get(variant ?? IconButtonVariant.Simple)!;
 
   return (
     <Comp ref={ref} color={color!} as='a' {...props}>
@@ -84,8 +85,8 @@ const IconButtonBase = styled.button<ButtonBaseProps>`
   border: none;
 
   padding: var(--button-padding);
-  width: calc(1em + var(--button-padding) * 2);
-  height: calc(1em + var(--button-padding) * 2);
+  width: calc(${p => p.size} + var(--button-padding) * 2);
+  height: calc(${p => p.size} + var(--button-padding) * 2);
 
   &[disabled] {
     opacity: 0.5;
@@ -134,6 +135,27 @@ const OutlineIconButton = styled(IconButtonBase)<ButtonStyleProps>`
   }
 `;
 
+const SquareIconButton = styled(IconButtonBase)<ButtonStyleProps>`
+  color: ${p => (p.color === 'inherit' ? 'inherit' : p.theme.colors[p.color])};
+  background-color: ${p => p.theme.colors.bg};
+  border-radius: ${p => p.theme.radius};
+  border: 1px solid ${p => p.theme.colors.bg2};
+
+  &:not([disabled]) {
+    &:hover,
+    &:focus-visible {
+      color: ${p => p.theme.colors.main};
+      border-color: ${p => p.theme.colors.main};
+      box-shadow: ${p => p.theme.boxShadowSoft};
+    }
+  }
+
+  &&:active {
+    background-color: ${p => p.theme.colors.main};
+    color: white;
+  }
+`;
+
 const FillIconButton = styled(IconButtonBase)<ButtonStyleProps>`
   color: ${p => (p.color === 'inherit' ? 'inherit' : p.theme.colors[p.color])};
   background-color: unset;
@@ -164,4 +186,5 @@ const ComponentMap = new Map([
   [IconButtonVariant.Outline, OutlineIconButton],
   [IconButtonVariant.Fill, FillIconButton],
   [IconButtonVariant.Colored, ColoredIconButton],
+  [IconButtonVariant.Square, SquareIconButton],
 ]);

browser/data-browser/src/components/SideBar/About.tsx

@@ -3,7 +3,7 @@ import { Logo } from '../Logo';
 import { SideBarHeader } from './SideBarHeader';
 import React from 'react';
 import { FaGithub, FaDiscord, FaBook } from 'react-icons/fa';
-import { IconButtonLink } from '../IconButton/IconButton';
+import { IconButtonLink, IconButtonVariant } from '../IconButton/IconButton';
 
 interface AboutItem {
   icon: React.ReactNode;
@@ -32,9 +32,9 @@ const aboutMenuItems: AboutItem[] = [
 export function About() {
   return (
     <>
-      <SideBarHeader>
+      {/* <SideBarHeader>
         <Logo style={{ height: '1.1rem', maxWidth: '100%' }} />
-      </SideBarHeader>
+      </SideBarHeader> */}
       <AboutWrapper>
         {aboutMenuItems.map(({ href, icon, helper }) => (
           <IconButtonLink
@@ -45,6 +45,7 @@ export function About() {
             title={helper}
             size='1.2em'
             color='textLight'
+            variant={IconButtonVariant.Square}
           >
             {icon}
           </IconButtonLink>
@@ -57,7 +58,6 @@ export function About() {
 const AboutWrapper = styled.div`
   --inner-padding: 0.5rem;
   display: flex;
-  /* flex-direction: column; */
   align-items: center;
   gap: 0.5rem;
   margin-left: calc(1rem - var(--inner-padding));

browser/data-browser/src/components/SideBar/AppMenu.tsx

@@ -1,16 +1,17 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { FaPlusCircle } from 'react-icons/fa';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  FaCog,
+  FaInfo,
+  FaKeyboard,
+  FaPlusCircle,
+  FaUser,
+} from 'react-icons/fa';
 import { constructOpenURL } from '../../helpers/navigation';
 import { useCurrentSubject } from '../../helpers/useCurrentSubject';
-import { appMenuItems } from './menuItems';
-import { SideBarHeader } from './SideBarHeader';
 import { SideBarMenuItem } from './SideBarMenuItem';
+import styled from 'styled-components';
+import { paths } from '../../routes/paths';
+import { unknownSubject, useCurrentAgent, useResource } from '@tomic/react';
 
 // Non standard event type so we have to type it ourselfs for now.
 type BeforeInstallPromptEvent = {
@@ -26,6 +27,8 @@ export function AppMenu({ onItemClick }: AppMenuProps): JSX.Element {
   const event = useRef<BeforeInstallPromptEvent | null>(null);
   const [subject] = useCurrentSubject();
   const [showInstallButton, setShowInstallButton] = useState(false);
+  const [agent] = useCurrentAgent();
+  const agentResource = useResource(agent?.subject ?? unknownSubject);
 
   const install = useCallback(() => {
     if (!event.current) {
@@ -53,33 +56,50 @@ export function AppMenu({ onItemClick }: AppMenuProps): JSX.Element {
     return () => window.removeEventListener('beforeinstallprompt', listener);
   }, []);
 
-  const items = useMemo(() => {
-    if (!showInstallButton) {
-      return appMenuItems;
-    }
-
-    return [
-      {
-        icon: <FaPlusCircle />,
-        label: 'Install App',
-        helper: 'Install app to desktop',
-        handleClickItem: install,
-        path: constructOpenURL(subject ?? window.location.href),
-      },
-      ...appMenuItems,
-    ];
-  }, [appMenuItems, showInstallButton, subject]);
-
   return (
-    <>
-      <SideBarHeader>App</SideBarHeader>
-      {items.map(p => (
+    <Section aria-label='App menu'>
+      <SideBarMenuItem
+        icon={<FaUser />}
+        label={agent ? agentResource.title : 'Login'}
+        helper='See and edit the current Agent / User (u)'
+        path={paths.agentSettings}
+        onClick={onItemClick}
+      />
+      <SideBarMenuItem
+        icon={<FaCog />}
+        label='Settings'
+        helper='Edit the theme (t)'
+        path={paths.themeSettings}
+        onClick={onItemClick}
+      />
+      <SideBarMenuItem
+        icon={<FaKeyboard />}
+        label='Keyboard Shortcuts'
+        helper='View the keyboard shortcuts (?)'
+        path={paths.shortcuts}
+        onClick={onItemClick}
+      />
+      <SideBarMenuItem
+        icon={<FaInfo />}
+        label='About'
+        helper='Welcome page, tells about this app'
+        path={paths.about}
+        onClick={onItemClick}
+      />
+      {showInstallButton && (
         <SideBarMenuItem
-          key={p.label}
-          {...p}
-          handleClickItem={p.handleClickItem ?? onItemClick}
+          icon={<FaPlusCircle />}
+          label='Install App'
+          helper='Install app to desktop'
+          path={constructOpenURL(subject ?? window.location.href)}
+          onClick={install}
         />
-      ))}
-    </>
+      )}
+    </Section>
   );
 }
+
+const Section = styled.section`
+  border-top: 1px solid ${p => p.theme.colors.bg2};
+  padding-top: ${p => p.theme.margin}rem;
+`;

browser/data-browser/src/components/SideBar/SideBarMenuItem.tsx

@@ -9,7 +9,7 @@ export interface SideBarMenuItemProps extends AtomicLinkProps {
   icon?: React.ReactNode;
   disabled?: boolean;
   /** Is called when clicking on the item. Used for closing the menu. */
-  handleClickItem?: () => void;
+  onClick?: () => void;
 }
 
 export function SideBarMenuItem({
@@ -19,11 +19,11 @@ export function SideBarMenuItem({
   path,
   href,
   subject,
-  handleClickItem,
+  onClick,
 }: SideBarMenuItemProps) {
   return (
     <AtomicLink href={href} subject={subject} path={path} clean>
-      <SideBarItem key={label} title={helper} onClick={handleClickItem}>
+      <SideBarItem key={label} title={helper} onClick={onClick}>
         {icon && <SideBarIcon>{icon}</SideBarIcon>}
         {label}
       </SideBarItem>

browser/data-browser/src/components/SideBar/index.tsx

@@ -9,6 +9,7 @@ import { NavBarSpacer } from '../NavBarSpacer';
 import { AppMenu } from './AppMenu';
 import { About } from './About';
 import { useMediaQuery } from '../../hooks/useMediaQuery';
+import { Column } from '../Row';
 
 /** Amount of pixels where the sidebar automatically shows */
 export const SIDEBAR_TOGGLE_WIDTH = 600;
@@ -47,6 +48,7 @@ export function SideBar(): JSX.Element {
 
   return (
     <SideBarContainer>
+      {/* @ts-ignore */}
       <SideBarStyled
         ref={mountRefs}
         size={size}
@@ -59,8 +61,10 @@ export function SideBar(): JSX.Element {
         {/* The key is set to make sure the component is re-loaded when the baseURL changes */}
         <SideBarDriveMemo handleClickItem={closeSideBar} key={drive} />
         <MenuWrapper>
-          <AppMenu onItemClick={closeSideBar} />
-          <About />
+          <Column>
+            <AppMenu onItemClick={closeSideBar} />
+            <About />
+          </Column>
         </MenuWrapper>
         <NavBarSpacer baseMargin='1rem' position='bottom' />
         <SideBarDragArea ref={dragAreaRef} isDragging={isDragging} />
@@ -83,12 +87,12 @@ interface SideBarOverlayProps {
   visible: boolean;
 }
 
-// eslint-disable-next-line prettier/prettier
-const SideBarStyled = styled('nav').attrs<SideBarStyledProps>(p => ({
+//@ts-ignore
+const SideBarStyled = styled.nav.attrs<SideBarStyledProps>(p => ({
   style: {
     '--width': p.size,
   },
-}))<SideBarStyledProps>`
+}))`
   z-index: ${p => p.theme.zIndex.sidebar};
   box-sizing: border-box;
   background: ${p => p.theme.colors.bg};