chore: use shadcn for panel tabs

src/App.tsx

@@ -15,15 +15,16 @@ import "typeface-roboto-mono/index.css"; // Import the Roboto Mono font.
 import { ThemeProvider } from "@/components/ThemeProvider";
 
 import "./App.css";
-import { EmbeddedPlayground } from "./components/EmbeddedPlayground";
-import { FullPlayground } from "./components/FullPlayground";
-import { InlinePlayground } from "./components/InlinePlayground";
-import { Toaster } from "./components/ui/sonner";
-import { ConfirmDialogProvider } from "./playground-ui/ConfirmDialogProvider";
-import { useGoogleAnalytics } from "./playground-ui/GoogleAnalyticsHook";
-import PlaygroundUIThemed from "./playground-ui/PlaygroundUIThemed";
-import AppConfig from "./services/configservice";
-import { PLAYGROUND_UI_COLORS } from "./theme";
+import { EmbeddedPlayground } from "@/components/EmbeddedPlayground";
+import { FullPlayground } from "@/components/FullPlayground";
+import { InlinePlayground } from "@/components/InlinePlayground";
+import { Toaster } from "@/components/ui/sonner";
+import { ConfirmDialogProvider } from "@/playground-ui/ConfirmDialogProvider";
+import { useGoogleAnalytics } from "@/playground-ui/GoogleAnalyticsHook";
+import PlaygroundUIThemed from "@/playground-ui/PlaygroundUIThemed";
+import AppConfig from "@/services/configservice";
+import { PLAYGROUND_UI_COLORS } from "@/theme";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 const rootRoute = createRootRoute({
   component: () => (
@@ -73,6 +74,7 @@ function App() {
       <Toaster />
       {/* @ts-ignore-error react-cookie's types are screwy; CI and (local and vercel) disagree about whether there's an error or not. */}
       <CookiesProvider>
+      <TooltipProvider>
         <PostHogProvider client={posthog}>
           <ThemeProvider>
             <PlaygroundUIThemed {...PLAYGROUND_UI_COLORS} forceDarkMode={isEmbeddedPlayground}>
@@ -82,6 +84,7 @@ function App() {
             </PlaygroundUIThemed>
           </ThemeProvider>
         </PostHogProvider>
+        </TooltipProvider>
       </CookiesProvider>
     </>
   );

src/components/FullPlayground.tsx

@@ -824,7 +824,8 @@ export function ThemedAppView(props: { datastore: DataStore }) {
               </div>
             )}
 
-            {currentItem?.kind &&
+            {/* NOTE: the kind here is an enum, so 0 will render. */}
+            {currentItem?.kind !== undefined &&
               [DataStoreItemKind.ASSERTIONS, DataStoreItemKind.EXPECTED_RELATIONS].includes(
                 currentItem.kind,
               ) && (
@@ -834,7 +835,7 @@ export function ThemedAppView(props: { datastore: DataStore }) {
                   conductValidation={conductValidation}
                   developerService={developerService}
                 />
-              )}
+                )}
 
             {currentItem?.kind === DataStoreItemKind.EXPECTED_RELATIONS &&
               previousValidationForDiff === undefined && (

src/components/panels/base/common.tsx

@@ -9,7 +9,7 @@ import { ReflexedPanelLocation } from "../types";
 /**
  * Panel defines a single panel found in the panel display component.
  */
-export interface Panel {
+export type Panel = {
   /**
    * id is the unique ID for the panel. Must be stable across loads.
    */
@@ -29,7 +29,7 @@ export interface Panel {
 /**
  * PanelProps are the props passed to all panels content tags.
  */
-export interface PanelProps {
+export type PanelProps = {
   datastore: DataStore;
   services: Services;
   location: ReflexedPanelLocation;
@@ -38,7 +38,7 @@ export interface PanelProps {
 /**
  * PanelSummaryProps are the props passed to all panel summary tags.
  */
-export interface PanelSummaryProps {
+export type PanelSummaryProps = {
   services: Services;
   location: ReflexedPanelLocation;
 }