History

fix(web): refine server update notice (#9744)

maria committed 2 months ago

Commit 0de956e1 parent a76b8984 files · +11 −5Browse files

Unified · Split

4 files
  1. apps/web/src/components/ChatView.tsx +4 −1
  2. apps/web/src/components/chat/ComposerBanner.tsx +4 −1
  3. apps/web/src/components/chat/ComposerBannerStack.tsx +1 −1
  4. apps/web/src/components/chat/ComposerServerUpdateStatus.tsx +2 −2
apps/web/src/components/ChatView.tsx+4−1
@@ -2405,7 +2405,10 @@ export default function ChatView(props: ChatViewProps) { · 2404 unmodified lines
24052405 <Tooltip>
24062406 <TooltipTrigger
24072407 render={
2408− <button type="button" className="cursor-help rounded-sm text-left">
2408+ <button
2409+ type="button"
2410+ className="block max-w-full cursor-help truncate rounded-sm text-left"
2411+ >
24092412 Server update available
24102413 </button>
24112414 }
apps/web/src/components/chat/ComposerBanner.tsx+4−1
@@ -178,7 +178,7 @@ function Row({ · 177 unmodified lines
178178 layout = "inline",
179179 ...props
180180 }: useRender.ComponentProps<"div"> & {
181− layout?: "inline" | "wrap-actions";
181+ layout?: "inline" | "wrap-actions" | "wrap-actions-narrow";
182182 }) {
183183 const rowProps = {
184184 className: cn(
@@ -187,6 +187,8 @@ function Row({ · 2 unmodified lines
187187 "[&:is(button)]:cursor-pointer [&:is(button)]:rounded-[0.5rem] [&:is(button)]:focus-visible:outline-2 [&:is(button)]:focus-visible:-outline-offset-2 [&:is(button)]:focus-visible:outline-ring",
188188 layout === "wrap-actions" &&
189189 "@max-[400px]:*:data-[slot=composer-banner-content]:min-h-(--composer-banner-icon-column)",
190+ layout === "wrap-actions-narrow" &&
191+ "@max-[320px]:*:data-[slot=composer-banner-content]:min-h-(--composer-banner-icon-column)",
190192 className,
191193 ),
192194 "data-composer-banner-row": "true",
@@ -247,6 +249,7 @@ function Actions({ className, ...props }: ComponentProps<"span">) { · 54 unmodified lines
247249 className={cn(
248250 "col-start-3 row-start-1 flex flex-wrap items-center justify-end gap-1",
249251 "@max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:col-start-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:col-end-4 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:row-start-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:-ms-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:justify-start",
252+ "@max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:col-start-2 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:col-end-4 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:row-start-2 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:-ms-2 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:justify-start",
250253 className,
251254 )}
252255 {...props}
apps/web/src/components/chat/ComposerBannerStack.tsx+1−1
@@ -269,7 +269,7 @@ function ComposerBannerStackAlert({ · 268 unmodified lines
269269 variant={item.variant}
270270 density="comfortable"
271271 >
272− <ComposerBanner.Row layout="wrap-actions">
272+ <ComposerBanner.Row layout="wrap-actions-narrow">
273273 <ComposerBanner.Icon className="h-(--composer-banner-icon-column) self-start">
274274 {item.icon}
275275 </ComposerBanner.Icon>
apps/web/src/components/chat/ComposerServerUpdateStatus.tsx+2−2
@@ -1,5 +1,5 @@
11 import type { ServerUpdateState } from "@t3tools/client-runtime/state/server";
2−import { CircleAlertIcon, InfoIcon, LoaderCircleIcon } from "lucide-react";
2+import { CircleAlertIcon, DownloadIcon, LoaderCircleIcon } from "lucide-react";
33 import { useId, useState } from "react";
44
55 import { serverUpdateStageLabel } from "../ServerUpdateAction";
@@ -17,7 +17,7 @@ export function ComposerServerUpdateIcon({ · 11 unmodified lines
1717 if (status === "failed") {
1818 return <CircleAlertIcon aria-hidden className="text-error" />;
1919 }
20− return <InfoIcon aria-hidden />;
20+ return <DownloadIcon aria-hidden />;
2121 }
2222
2323 /** One text line, clipped at the end so the error detail never squeezes its title. */