isolate tabs on the home screen

HolodexNet · Jul 4, 2024 · 83d80a4 · 83d80a4
1 parent 2529fde
commit 83d80a4
Show file tree

Hide file tree

Showing 11 changed files with 465 additions and 345 deletions.
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -20,7 +20,7 @@
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
-    "@radix-ui/react-checkbox": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-context-menu": "^2.2.1",
     "@radix-ui/react-dialog": "^1.1.1",
@@ -39,15 +39,15 @@
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
-    "@radix-ui/react-tooltip": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@react-oauth/google": "^0.12.1",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/react-query": "^5.18.1",
     "@tanstack/react-query-devtools": "^5.18.1",
     "@types/react-text-mask": "^5.4.14",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "cmdk": "^0.2.1",
+    "cmdk": "^1.0.0",
     "dayjs": "^1.11.10",
     "eslint-plugin-unused-imports": "^3.2.0",
     "i18next": "^23.7.6",
@@ -84,8 +84,8 @@
     "type-fest": "^4.18.3",
     "use-seconds": "^1.7.0",
     "usehooks-ts": "^3.1.0",
-    "vaul": "^0.9.0",
-    "virtua": "^0.31.0",
+    "vaul": "^0.9.1",
+    "virtua": "^0.33.2",
     "zod": "^3.23.8"
   },
   "devDependencies": {

diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx
@@ -83,7 +83,7 @@ export function Frame() {
   useOnClickOutside(ref, handleClickOutside);
   return (
     <div className={mainClasses} id="layout">
-      <aside className="z-50 border-r border-r-base" ref={ref}>
+      <aside className="z-30 border-r border-r-base" ref={ref}>
         <Sidebar id="sidebar" onClose={toggle} />
       </aside>
       <Header id="header" />

diff --git a/packages/react/src/components/video/VideoCardCountdownToLive.tsx b/packages/react/src/components/video/VideoCardCountdownToLive.tsx
@@ -2,12 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useAtomValue } from "jotai";
 import { useTranslation } from "react-i18next";
 import { formatCount } from "@/lib/time";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/shadcn/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/shadcn/ui/tooltip";
 import { localeAtom, preferredTimezonesAtom } from "@/store/i18n";
 import { VideoCardType } from "./VideoCard";
 
@@ -38,24 +33,20 @@ export function VideoCardCountdownToLive({
   };
 
   const renderTooltipContent = (timestamp: Parameters<typeof dayjs>[0]) => (
-    <div className="grid grid-cols-2 gap-x-4">
+    <div className="flex flex-col items-stretch gap-1">
       {video.certainty === "likely" && (
-        <span className="col-span-2 mb-2 max-w-56 text-yellow-10">
+        <span className="mb-2 block max-w-48 text-xs text-yellow-10">
           {t("component.videoCard.uncertainPlaceholder")}
         </span>
       )}
-      <div className="space-y-1">
-        {formatTimeForTimezones(timestamp).map(({ timezone }) => (
-          <div key={timezone} className="text-right font-semibold">
-            {timezone}:
+      {formatTimeForTimezones(timestamp).map(({ timezone, time }) => (
+        <div key={timezone} className="">
+          <div className="text-base-9">{timezone}:</div>
+          <div className="text-center text-sm font-semibold text-base-11">
+            {time}
           </div>
-        ))}
-      </div>
-      <div className="space-y-1">
-        {formatTimeForTimezones(timestamp).map(({ timezone, time }) => (
-          <div key={timezone}>{time}</div>
-        ))}
-      </div>
+        </div>
+      ))}
     </div>
   );
 
@@ -92,16 +83,14 @@ export function VideoCardCountdownToLive({
     });
 
     return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <span className={`text-base-11 ${className}`}>{countdownText}</span>
-          </TooltipTrigger>
-          <TooltipContent>
-            {renderTooltipContent(video.start_scheduled)}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className={`text-base-11 ${className}`}>{countdownText}</span>
+        </TooltipTrigger>
+        <TooltipContent className="bg-base-3 p-1.5">
+          {renderTooltipContent(video.start_scheduled)}
+        </TooltipContent>
+      </Tooltip>
     );
   }
 
@@ -111,16 +100,14 @@ export function VideoCardCountdownToLive({
     });
 
     return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <span className={`text-base-11 ${className}`}>{pastText}</span>
-          </TooltipTrigger>
-          <TooltipContent>
-            {renderTooltipContent(video.available_at)}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className={`text-base-11 ${className}`}>{pastText}</span>
+        </TooltipTrigger>
+        <TooltipContent className="bg-base-3 p-1.5" avoidCollisions>
+          {renderTooltipContent(video.available_at)}
+        </TooltipContent>
+      </Tooltip>
     );
   }
 

diff --git a/packages/react/src/main.tsx b/packages/react/src/main.tsx
@@ -15,6 +15,7 @@ import timezone from "dayjs/plugin/timezone";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import { ErrorFallback } from "./components/common/ErrorFallback";
 import { App } from "./App";
+import { TooltipProvider } from "./shadcn/ui/tooltip";
 
 const GOOGLE_CLIENT_ID =
   "275540829388-87s7f9v2ht3ih51ah0tjkqng8pd8bqo2.apps.googleusercontent.com";
@@ -71,7 +72,9 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
             FallbackComponent={ErrorFallback}
             onReset={() => window.location.reload()}
           >
-            <App />
+            <TooltipProvider>
+              <App />
+            </TooltipProvider>
           </ErrorBoundary>
         </GoogleOAuthProvider>
       </QueryClientProvider>

diff --git a/packages/react/src/routes/home.tsx b/packages/react/src/routes/home.tsx