Redesign toolbar to incorporate vertical stack (#115)

This sets up the toolbar to be extensible with stacked vertical items. It also tweaks the design a bit to give it more room to breath. Adds new anchor points as well.
getsentry · Nov 22, 2023 · 7df9a61 · 7df9a61
1 parent 193bf51
commit 7df9a61
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 9 deletions.
diff --git a/packages/core/src/components/Trigger.tsx b/packages/core/src/components/Trigger.tsx
@@ -1,11 +1,22 @@
+import { ComponentPropsWithoutRef } from 'react';
 import { ReactComponent as Logo } from '~/assets/glyph.svg';
 import classNames from '../lib/classNames';
 import { TriggerButtonCount } from '../types';
 
-export type Anchor = 'bottomRight' | 'bottomLeft';
+export const DEFAULT_ANCHOR = 'bottomRight';
+
+export type Anchor = 'bottomRight' | 'bottomLeft' | 'centerRight' | 'centerLeft' | 'topLeft' | 'topRight';
 
 function getAnchorClasses(anchor: Anchor) {
  switch (anchor) {
+ case 'centerRight':
+ return 'bottom-[45%] right-4';
+ case 'centerLeft':
+ return 'bottom-[45%] left-4';
+ case 'topLeft':
+ return 'top-4 left-4';
+ case 'topRight':
+ return 'top-4 right-4';
  case 'bottomLeft':
  return 'bottom-4 left-4';
  case 'bottomRight':
@@ -14,35 +25,64 @@ function getAnchorClasses(anchor: Anchor) {
  }
 }
 
+function ToolbarItem({
+ count,
+ children,
+ severe = false,
+ ...props
+}: Omit<ComponentPropsWithoutRef<'div'>, 'className'> & {
+ severe?: boolean;
+ count?: number | null;
+}) {
+ return (
+ <div className="gap-x relative flex items-center rounded p-3 hover:bg-indigo-400" {...props}>
+ {children}
+
+ {!!count && (
+ <span
+ className={classNames(
+ severe ? 'bg-red-500' : 'bg-indigo-500',
+ 'absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full font-sans text-[0.65rem] font-medium',
+ )}
+ >
+ {count}
+ </span>
+ )}
+ </div>
+ );
+}
+
 export default function Trigger({
  isOpen,
  setOpen,
  count,
- anchor = 'bottomRight',
+ anchor = DEFAULT_ANCHOR,
 }: {
  isOpen: boolean;
  setOpen: (value: boolean) => void;
  count: TriggerButtonCount;
  anchor?: Anchor;
 }) {
  const countSum = count.general + count.severe;
+ const iconSize = 24;
 
  return (
  <div
  className={classNames(
  'z-[999999]',
- 'fixed inline-flex items-center justify-center gap-x-2 rounded border px-3 py-2 font-medium opacity-80 hover:opacity-100',
- 'font-raleway cursor-pointer border-indigo-950 bg-indigo-900 font-light uppercase tracking-widest text-white',
+ 'fixed inline-flex items-center rounded font-medium',
+ 'font-raleway cursor-pointer bg-indigo-700 text-white',
+ 'flex-col',
  getAnchorClasses(anchor),
- count.severe === 0 ? 'bg-indigo-300 text-indigo-600' : 'bg-red-500 text-white',
  )}
  style={{
  display: isOpen ? 'none' : undefined,
  }}
  onClick={() => setOpen(!isOpen)}
  >
- <Logo height={24} width={24} />
- <span className="font-sans font-medium">{countSum}</span>
+ <ToolbarItem count={countSum} severe={Boolean(count.severe)}>
+ <Logo height={iconSize} width={iconSize} />
+ </ToolbarItem>
  </div>
  );
 }
diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
@@ -4,7 +4,7 @@ import fontStyles from '@fontsource/raleway/index.css?inline';
 import spotlightEventTarget from './lib/eventTarget.ts';
 
 import App from './App.tsx';
-import { type Anchor } from './components/Trigger.tsx';
+import { DEFAULT_ANCHOR, type Anchor } from './components/Trigger.tsx';
 import globalStyles from './index.css?inline';
 import type { Integration } from './integrations/integration.ts';
 import { initIntegrations } from './integrations/integration.ts';
@@ -50,7 +50,7 @@ export async function init({
  defaultEventId,
  injectImmediately = false,
  sidecar = DEFAULT_SIDECAR,
- anchor = 'bottomRight',
+ anchor = DEFAULT_ANCHOR,
 }: {
  integrations?: Integration[];
  fullScreen?: boolean;