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
2405 <Tooltip>2405 <Tooltip>
2406 <TooltipTrigger2406 <TooltipTrigger
2407 render={2407 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 >
2409 Server update available2412 Server update available
2410 </button>2413 </button>
2411 }2414 }
apps/web/src/components/chat/ComposerBanner.tsx+4−1
@@ -178,7 +178,7 @@ function Row({ · 177 unmodified lines
178 layout = "inline",178 layout = "inline",
179 ...props179 ...props
180}: useRender.ComponentProps<"div"> & {180}: useRender.ComponentProps<"div"> & {
181 layout?: "inline" | "wrap-actions";181 layout?: "inline" | "wrap-actions" | "wrap-actions-narrow";
182}) {182}) {
183 const rowProps = {183 const rowProps = {
184 className: cn(184 className: cn(
@@ -187,6 +187,8 @@ function Row({ · 2 unmodified lines
187 "[&: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",187 "[&: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",
188 layout === "wrap-actions" &&188 layout === "wrap-actions" &&
189 "@max-[400px]:*:data-[slot=composer-banner-content]:min-h-(--composer-banner-icon-column)",189 "@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)",
190 className,192 className,
191 ),193 ),
192 "data-composer-banner-row": "true",194 "data-composer-banner-row": "true",
@@ -247,6 +249,7 @@ function Actions({ className, ...props }: ComponentProps<"span">) { · 54 unmodified lines
247 className={cn(249 className={cn(
248 "col-start-3 row-start-1 flex flex-wrap items-center justify-end gap-1",250 "col-start-3 row-start-1 flex flex-wrap items-center justify-end gap-1",
249 "@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",251 "@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",
250 className,253 className,
251 )}254 )}
252 {...props}255 {...props}
apps/web/src/components/chat/ComposerBannerStack.tsx+1−1
@@ -269,7 +269,7 @@ function ComposerBannerStackAlert({ · 268 unmodified lines
269 variant={item.variant}269 variant={item.variant}
270 density="comfortable"270 density="comfortable"
271 >271 >
272 <ComposerBanner.Row layout="wrap-actions">272 <ComposerBanner.Row layout="wrap-actions-narrow">
273 <ComposerBanner.Icon className="h-(--composer-banner-icon-column) self-start">273 <ComposerBanner.Icon className="h-(--composer-banner-icon-column) self-start">
274 {item.icon}274 {item.icon}
275 </ComposerBanner.Icon>275 </ComposerBanner.Icon>
apps/web/src/components/chat/ComposerServerUpdateStatus.tsx+2−2
@@ -1,5 +1,5 @@
1import type { ServerUpdateState } from "@t3tools/client-runtime/state/server";1import type { ServerUpdateState } from "@t3tools/client-runtime/state/server";
2import { CircleAlertIcon, InfoIcon, LoaderCircleIcon } from "lucide-react";2import { CircleAlertIcon, DownloadIcon, LoaderCircleIcon } from "lucide-react";
3import { useId, useState } from "react";3import { useId, useState } from "react";
4 4
5import { serverUpdateStageLabel } from "../ServerUpdateAction";5import { serverUpdateStageLabel } from "../ServerUpdateAction";
@@ -17,7 +17,7 @@ export function ComposerServerUpdateIcon({ · 11 unmodified lines
17 if (status === "failed") {17 if (status === "failed") {
18 return <CircleAlertIcon aria-hidden className="text-error" />;18 return <CircleAlertIcon aria-hidden className="text-error" />;
19 }19 }
20 return <InfoIcon aria-hidden />;20 return <DownloadIcon aria-hidden />;
21}21}
22 22
23/** One text line, clipped at the end so the error detail never squeezes its title. */23/** One text line, clipped at the end so the error detail never squeezes its title. */