#228 Add icons to new route buttons + various styling improvements

Author: Polleps

data-browser/src/components/AtomicLink.tsx

@@ -6,7 +6,8 @@ import { FaExternalLinkAlt } from 'react-icons/fa';
 import { ErrorLook } from '../components/ErrorLook';
 import { isRunningInTauri } from '../helpers/tauri';
 
-export interface AtomicLinkProps {
+export interface AtomicLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   children?: ReactNode;
   /** An http URL to an Atomic Data resource, opened in this app and fetched as JSON-AD */
   subject?: string;
@@ -115,7 +116,6 @@ export const LinkView = styled.a<LinkViewProps>`
   pointer-events: ${props => (props.disabled ? 'none' : 'inherit')};
 
   svg {
-    margin-left: 0.3rem;
     font-size: 60%;
   }
 

data-browser/src/components/NavBarSpacer.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useSettings } from '../helpers/AppSettings';
+
+const NAVBAR_HEIGHT = '2rem';
+const NAVBAR_CALC_PART = ` + ${NAVBAR_HEIGHT}`;
+
+export interface NavBarSpacerProps {
+  position: 'top' | 'bottom';
+  baseMargin?: string;
+}
+
+const size = (base = '0rem', withNav: boolean) =>
+  `calc(${base}${withNav ? NAVBAR_CALC_PART : ''})`;
+
+/** Makes room for the navbar when it is present at the given position. Animates its height. */
+export function NavBarSpacer({
+  position,
+  baseMargin,
+}: NavBarSpacerProps): JSX.Element {
+  const { navbarFloating, navbarTop } = useSettings();
+
+  const getSize = () => {
+    if (position === 'top') {
+      return size(baseMargin, navbarTop);
+    }
+
+    return size(baseMargin, !navbarFloating && !navbarTop);
+  };
+
+  return <Spacing size={getSize()} />;
+}
+
+interface SpacingProps {
+  size: string;
+}
+
+const Spacing = styled.div<SpacingProps>`
+  height: ${p => p.size};
+  transition: height 0.2s ease-out;
+`;

data-browser/src/components/Navigation.tsx

@@ -21,6 +21,7 @@ import ResourceContextMenu from './ResourceContextMenu';
 import { isRunningInTauri } from '../helpers/tauri';
 import { shortcuts } from './HotKeyWrapper';
 import { MenuBarDropdownTrigger } from './ResourceContextMenu/MenuBarDropdownTrigger';
+import { NavBarSpacer } from './NavbarSpacer';
 
 interface NavWrapperProps {
   children: React.ReactNode;
@@ -46,6 +47,7 @@ export function NavWrapper({ children }: NavWrapperProps): JSX.Element {
           navbarTop={navbarTop}
           navbarFloating={navbarFloating}
         >
+          <NavBarSpacer position='top' />
           {children}
         </Content>
       </SideBarWrapper>
@@ -62,12 +64,7 @@ interface ContentProps {
 const Content = styled.div<ContentProps>`
   display: block;
   flex: 1;
-  margin-top: ${props => (props.navbarTop ? '2rem' : '0')};
-  margin-bottom: ${props =>
-    props.navbarTop || props.navbarFloating ? '0' : '2rem'};
   overflow-y: auto;
-  /* For smooth navbar position adjustments */
-  transition: margin 0.2s;
 `;
 
 /** Persistently shown navigation bar */

data-browser/src/components/NewInstanceButton/Base.tsx

@@ -1,6 +1,7 @@
 import { useStore } from '@tomic/react';
 import React, { useCallback } from 'react';
 import toast from 'react-hot-toast';
+import { IconType } from 'react-icons';
 import { FaPlus } from 'react-icons/fa';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
@@ -12,6 +13,7 @@ export interface InstanceButtonBaseProps {
   subtle?: boolean;
   title: string;
   icon?: boolean;
+  IconComponent?: IconType;
   label?: string;
   className?: string;
 }
@@ -22,6 +24,7 @@ export function Base({
   title,
   icon,
   onClick,
+  IconComponent,
   label,
   className,
 }: React.PropsWithChildren<InstanceButtonBaseProps>): JSX.Element {
@@ -41,6 +44,8 @@ export function Base({
     onClick();
   }, [agent, navigate]);
 
+  const Icon = IconComponent ?? FaPlus;
+
   return (
     <Button
       onClick={handleClick}
@@ -50,7 +55,7 @@ export function Base({
     >
       {icon ? (
         <IconWrapper>
-          <FaPlus />
+          <Icon />
           {label}
         </IconWrapper>
       ) : (
@@ -64,5 +69,5 @@ export function Base({
 const IconWrapper = styled.div`
   display: flex;
   align-items: center;
-  gap: 0.3rem;
+  gap: 0.5rem;
 `;

data-browser/src/components/NewInstanceButton/NewBookmarkButton.tsx

@@ -26,6 +26,7 @@ export function NewBookmarkButton({
   klass,
   subtle,
   icon,
+  IconComponent,
   parent,
   children,
   label,
@@ -60,6 +61,7 @@ export function NewBookmarkButton({
         onClick={show}
         title={title}
         icon={icon}
+        IconComponent={IconComponent}
         subtle={subtle}
         label={label}
       >

data-browser/src/components/NewInstanceButton/NewFolderButton.tsx

@@ -18,6 +18,7 @@ export function NewFolderButton({
   klass,
   subtle,
   icon,
+  IconComponent,
   parent,
   children,
   label,
@@ -49,6 +50,7 @@ export function NewFolderButton({
         onClick={show}
         title={title}
         icon={icon}
+        IconComponent={IconComponent}
         subtle={subtle}
         label={label}
       >
@@ -60,7 +62,7 @@ export function NewFolderButton({
         </DialogTitle>
         <DialogContent>
           <form onSubmit={onDone}>
-            <Field required label='url'>
+            <Field required label='Name'>
               <InputWrapper>
                 <InputStyled
                   placeholder='New Folder'

data-browser/src/components/NewInstanceButton/NewInstanceButtonDefault.tsx

@@ -9,6 +9,7 @@ export function NewInstanceButtonDefault({
   klass,
   subtle,
   icon,
+  IconComponent,
   parent,
   children,
   label,
@@ -23,6 +24,7 @@ export function NewInstanceButtonDefault({
     <Base
       className={className}
       onClick={onClick}
+      IconComponent={IconComponent}
       title={title}
       icon={icon}
       subtle={subtle}

data-browser/src/components/NewInstanceButton/NewInstanceButtonProps.ts

@@ -1,11 +1,13 @@
 import React from 'react';
+import { IconType } from 'react-icons';
 
 interface Props {
   /** URL of the Class to be instantiated */
   klass: string;
   subtle?: boolean;
   icon?: boolean;
-  /** ID of the parent Resource, which will be passed to the form */
+  IconComponent?: IconType;
+  /** subject of the parent Resource, which will be passed to the form */
   parent?: string;
   /** Give explicit label. If missing, uses the Shortname of the Class */
   label?: string;

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

@@ -0,0 +1,84 @@
+import styled from 'styled-components';
+import { AtomicLink } from '../AtomicLink';
+import { Logo } from '../Logo';
+import { SideBarHeader } from './SideBarHeader';
+import React from 'react';
+import { FaGithub, FaDiscord, FaBook } from 'react-icons/fa';
+
+interface AboutItem {
+  icon: React.ReactNode;
+  helper: string;
+  href: string;
+}
+
+const aboutMenuItems: AboutItem[] = [
+  {
+    icon: <FaGithub />,
+    helper: 'Github; View the source code for this application',
+    href: 'https://github.com/atomicdata-dev/atomic-data-browser',
+  },
+  {
+    icon: <FaDiscord />,
+    helper: 'Discord; Chat with the Atomic Data community',
+    href: 'https://discord.gg/a72Rv2P',
+  },
+  {
+    icon: <FaBook />,
+    helper: 'Docs; Read the Atomic Data documentation',
+    href: 'https://docs.atomicdata.dev',
+  },
+];
+
+export function About() {
+  return (
+    <>
+      <SideBarHeader>
+        <Logo style={{ height: '1.1rem', maxWidth: '100%' }} />
+      </SideBarHeader>
+      <AboutWrapper>
+        {aboutMenuItems.map(p => (
+          <AboutIcon key={p.helper} {...p} />
+        ))}
+      </AboutWrapper>
+    </>
+  );
+}
+
+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));
+`;
+
+interface AboutIconProps {
+  href?: string;
+  icon: React.ReactNode;
+  helper: string;
+}
+
+function AboutIcon({ icon, helper, href }: AboutIconProps) {
+  return (
+    <StyledAtomicLink href={href} clean title={helper}>
+      {icon}
+    </StyledAtomicLink>
+  );
+}
+
+const StyledAtomicLink = styled(AtomicLink)`
+  padding: 0.5rem;
+  display: grid;
+  place-items: center;
+  aspect-ratio: 1 / 1;
+  border-radius: ${p => p.theme.radius};
+  color: ${p => p.theme.colors.textLight};
+  font-size: 1.6rem;
+  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
+  &:hover,
+  &:focus {
+    background: ${p => p.theme.colors.bg1};
+    color: ${p => p.theme.colors.text};
+  }
+`;

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

@@ -2,10 +2,10 @@ import { classes, Resource, urls, useResources } from '@tomic/react';
 import React, { useMemo } from 'react';
 import {
   FaCog,
+  FaHdd,
   FaPlus,
   FaRegCheckCircle,
   FaRegCircle,
-  FaServer,
 } from 'react-icons/fa';
 import { useNavigate } from 'react-router-dom';
 import { useSettings } from '../../helpers/AppSettings';
@@ -19,7 +19,7 @@ import { useDefaultNewInstanceHandler } from '../NewInstanceButton';
 import { SideBarButton } from './ResourceSideBar/FloatingActions';
 
 const Trigger = buildDefaultTrigger(
-  <FaServer />,
+  <FaHdd />,
   SideBarButton,
   'Open Drive Settings',
 );