From 7df9a61e429d83b643074f9e62c8f79aa10eb8a0 Mon Sep 17 00:00:00 2001
From: David Cramer <dcramer@users.noreply.github.com>
Date: Wed, 22 Nov 2023 11:03:27 -0800
Subject: [PATCH] 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.
---
 packages/core/src/components/Trigger.tsx | 54 +++++++++++++++++++++---
 packages/core/src/index.tsx              |  4 +-
 2 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/components/Trigger.tsx b/packages/core/src/components/Trigger.tsx
index 062ba5cc..12f88bb9 100644
--- 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,11 +25,38 @@ 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;
@@ -26,23 +64,25 @@ export default function Trigger({
   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
index e4c4178d..7ce3ccea 100644
--- 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;