feat(webapp): UI improvements, PR feedback changes

Author: 0ski

apps/webapp/app/components/primitives/Buttons.tsx

@@ -408,7 +408,7 @@ export const NavLinkButton = ({ to, className, target, ...props }: NavLinkPropsT
   return (
     <NavLink
       to={to}
-      className={cn("group/button outline-none", props.fullWidth ? "w-full" : "")}
+      className={cn("group/button outline-none display-block", props.fullWidth ? "w-full" : "")}
       target={target}
     >
       {({ isActive, isPending }) => (

apps/webapp/app/components/primitives/CopyableText.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { useCopy } from "~/hooks/useCopy";
 import { cn } from "~/utils/cn";
+import { Button } from "./Buttons";
 
 export function CopyableText({
   value,
@@ -20,9 +21,9 @@ export function CopyableText({
   const [isHovered, setIsHovered] = useState(false);
   const { copy, copied } = useCopy(copyValue ?? value);
 
-  variant = variant ?? "icon-right";
+  const resolvedVariant = variant ?? "icon-right";
 
-  if (variant === "icon-right") {
+  if (resolvedVariant === "icon-right") {
     return (
       <span
         className={cn("group relative inline-flex h-6 items-center", className)}
@@ -65,22 +66,23 @@ export function CopyableText({
     );
   }
 
-  if (variant === "text-below") {
+  if (resolvedVariant === "text-below") {
     return (
       <SimpleTooltip
         button={
-          <span
+          <Button
+            variant="minimal/small"
             onClick={(e) => { 
               e.stopPropagation();
               copy(); 
             }}
             className={cn(
-              "cursor-pointer text-text-bright transition-colors hover:text-white",
+              "cursor-pointer bg-transparent py-0 px-1 text-left text-text-bright transition-colors hover:text-white hover:bg-transparent",
               className
             )}
           >
-            {value}
-          </span>
+            <span className="text-text-white">{value}</span>
+          </Button>
         }
         content={copied ? "Copied" : "Click to copy"}
         className="font-sans px-2 py-1"

apps/webapp/app/components/primitives/PageHeader.tsx

@@ -36,10 +36,9 @@ type PageTitleProps = {
     to: string;
     text: string;
   };
-  actions?: ReactNode;
 };
 
-export function PageTitle({ title, backButton, actions }: PageTitleProps) {
+export function PageTitle({ title, backButton }: PageTitleProps) {
   return (
     <div className="flex items-center gap-2">
       {backButton && (
@@ -54,7 +53,6 @@ export function PageTitle({ title, backButton, actions }: PageTitleProps) {
         </div>
       )}
       <Header2 className="flex items-center gap-1">{title}</Header2>
-      {actions && <div className="ml-auto">{actions}</div>}
     </div>
   );
 }

apps/webapp/app/components/primitives/ShortcutKey.tsx

@@ -9,11 +9,11 @@ import { useOperatingSystem } from "./OperatingSystemProvider";
 import { KeyboardEnterIcon } from "~/assets/icons/KeyboardEnterIcon";
 
 const medium =
-  "text-[0.75rem] font-medium min-w-[17px] rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1.5 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase";
+  "justify-center min-w-[1.25rem] min-h-[1.25rem] text-[0.65rem] font-mono font-medium rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1.5 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase";
 
 export const variants = {
   small:
-    "text-[0.6rem] font-medium min-w-[17px] rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1 border border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-text-dimmed/60 transition uppercase",
+    "justify-center text-[0.6rem] font-mono font-medium min-w-[1rem] min-h-[1rem] rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1 border border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-text-dimmed/60 transition uppercase",
   medium: cn(medium, "group-hover:border-charcoal-550"),
   "medium/bright": cn(medium, "bg-charcoal-750 text-text-bright border-charcoal-650"),
 };
@@ -57,7 +57,7 @@ export function ShortcutKey({ shortcut, variant, className }: ShortcutKeyProps)
 function keyString(key: string, isMac: boolean, variant: "small" | "medium" | "medium/bright") {
   key = key.toLowerCase();
 
-  const className = variant === "small" ? "w-2.5 h-4" : "w-3 h-5";
+  const className = variant === "small" ? "w-2.5 h-4" : "w-2.5 h-4.5";
 
   switch (key) {
     case "enter":

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx

@@ -290,13 +290,13 @@ export default function Page() {
             to: v3RunsPath(organization, project, environment, filters),
             text: "Runs",
           }}
-          title={<CopyableText value={run.friendlyId} variant="text-below"/>}
-          actions={
-            tableState && (<div className="flex">
+          title={<>
+          <CopyableText value={run.friendlyId} variant="text-below" className="font-mono"/>
+          {tableState && (<div className="flex">
               <PreviousRunButton to={previousRunPath} />
               <NextRunButton to={nextRunPath} />
-            </div>)
-          }
+            </div>)}
+          </>}
         />
         {environment.type === "DEVELOPMENT" && <DevDisconnectedBanner isConnected={isConnected} />}
         <PageAccessories>
@@ -1547,8 +1547,7 @@ function KeyboardShortcuts({
   );
 }
 
-function AdjacentRunsShortcuts({
-}) {
+function AdjacentRunsShortcuts() {
   return (<div className="flex items-center gap-0.5">
       <ShortcutKey shortcut={{ key: "[" }} variant="medium" className="ml-0 mr-0 px-1" />
       <ShortcutKey shortcut={{ key: "]" }} variant="medium" className="ml-0 mr-0 px-1" />
@@ -1604,7 +1603,7 @@ function NumberShortcuts({ toggleLevel }: { toggleLevel: (depth: number) => void
   return (
     <div className="flex items-center gap-0.5">
       <span className={cn(variants.medium, "ml-0 mr-0")}>0</span>
-      <span className="text-[0.75rem] text-text-dimmed">–</span>
+      <span className="text-[0.65rem] text-text-dimmed">–</span>
       <span className={cn(variants.medium, "ml-0 mr-0")}>9</span>
       <Paragraph variant="extra-small" className="ml-1.5 whitespace-nowrap">
         Toggle level
@@ -1723,6 +1722,7 @@ function PreviousRunButton({ to }: { to: string | null }) {
         onClick={(e) => !to && e.preventDefault()}
         shortcut={{ key: "[" }}
         tooltip="Previous Run"
+        disabled={!to}
       />
     </div>
   );
@@ -1742,6 +1742,7 @@ function NextRunButton({ to }: { to: string | null }) {
         onClick={(e) => !to && e.preventDefault()}
         shortcut={{ key: "]" }}
         tooltip="Next Run"
+        disabled={!to}
       />
     </div>
   );

apps/webapp/app/utils/pathBuilder.ts

@@ -316,7 +316,7 @@ export function v3RunSpanPath(
   searchParams?: URLSearchParams
 ) {
   searchParams = searchParams ?? new URLSearchParams();
-  searchParams.set("span", encodeURIComponent(span.spanId));
+  searchParams.set("span", span.spanId);
   return `${v3RunPath(organization, project, environment, run, searchParams)}`;
 }