diff --git a/client/core/ts/src/types.ts b/client/core/ts/src/types.ts index 97b7658ec..840c10edc 100644 --- a/client/core/ts/src/types.ts +++ b/client/core/ts/src/types.ts @@ -962,6 +962,8 @@ export type GetSystemInformationResponse = SystemInformation; export interface SingleDiskUsage { /** The mount point of the disk */ mount: string; + /** Detected file system */ + file_system: string; /** Used portion of the disk in GB */ used_gb: number; /** Total size of the disk in GB */ @@ -2369,6 +2371,8 @@ export interface GetUsername { export interface GetUsernameResponse { /** The username of the user. */ username: string; + /** An optional icon for the user. */ + avatar?: string; } /** diff --git a/frontend/src/components/topbar.tsx b/frontend/src/components/topbar.tsx index 4e6e70edf..c57a6e7e7 100644 --- a/frontend/src/components/topbar.tsx +++ b/frontend/src/components/topbar.tsx @@ -28,7 +28,7 @@ import { RESOURCE_TARGETS, usableResourcePath } from "@lib/utils"; import { OmniSearch, OmniDialog } from "./omnibar"; import { WsStatusIndicator } from "@lib/socket"; import { TopbarUpdates } from "./updates/topbar"; -import { Logout } from "./util"; +import { Logout, UserAvatar } from "./util"; import { ThemeToggle } from "@ui/theme"; import { UsableResource } from "@types"; import { useAtom } from "jotai"; @@ -476,10 +476,3 @@ const UsersDropdown = ({ user_id }: { user_id: string | undefined }) => { ); }; - -const UserAvatar = ({ avatar }: { avatar: string | undefined }) => - avatar ? ( - Avatar - ) : ( - - ); diff --git a/frontend/src/components/updates/details.tsx b/frontend/src/components/updates/details.tsx index d85603325..697353ad3 100644 --- a/frontend/src/components/updates/details.tsx +++ b/frontend/src/components/updates/details.tsx @@ -19,19 +19,53 @@ import { useRead } from "@lib/hooks"; import { ResourceComponents } from "@components/resources"; import { Link } from "react-router-dom"; import { fmt_duration, fmt_version } from "@lib/formatting"; -import { sanitizeOnlySpan, usableResourcePath, version_is_none } from "@lib/utils"; +import { + cn, + sanitizeOnlySpan, + usableResourcePath, + version_is_none, +} from "@lib/utils"; import { UsableResource } from "@types"; +import { UserAvatar } from "@components/util"; -export const UpdateUser = ({ user_id }: { user_id: string }) => { - if (user_id === "Procedure") return <>{user_id}; - if (user_id === "Github") return <>{user_id}; - if (user_id === "Auto Redeploy") return <>{user_id}; +export const UpdateUser = ({ + user_id, + className, +}: { + user_id: string; + className?: string; +}) => { + if ( + user_id === "Procedure" || + user_id === "Github" || + user_id === "Auto Redeploy" + ) { + return ( +
+ + {user_id} +
+ ); + } return ; }; -const RealUpdateUser = ({ user_id }: { user_id: string }) => { - const username = useRead("GetUsername", { user_id }).data?.username; - return <>{username || user_id}; +const RealUpdateUser = ({ + user_id, + className, +}: { + user_id: string; + className?: string; +}) => { + const res = useRead("GetUsername", { user_id }).data; + const username = res?.username; + const avatar = res?.avatar; + return ( +
+ + {username || user_id} +
+ ); }; export const UpdateDetails = ({ @@ -76,7 +110,11 @@ export const UpdateDetailsInner = ({ return ( {children} - + setOpen(false)} + > {update.operation @@ -86,10 +124,7 @@ export const UpdateDetailsInner = ({ {!version_is_none(update.version) && fmt_version(update.version)} -
- - -
+
); -}; \ No newline at end of file +}; diff --git a/frontend/src/components/updates/resource.tsx b/frontend/src/components/updates/resource.tsx index 6776a2b23..e180d62f2 100644 --- a/frontend/src/components/updates/resource.tsx +++ b/frontend/src/components/updates/resource.tsx @@ -3,7 +3,6 @@ import { Button } from "@ui/button"; import { Bell, ExternalLink, - User, Calendar, Check, X, @@ -48,10 +47,7 @@ const UpdateCard = ({ update }: { update: Types.UpdateListItem }) => { {fmt_date(new Date(update.start_ts))}
-
- - -
+ diff --git a/frontend/src/components/util.tsx b/frontend/src/components/util.tsx index 57ccbd562..7fe6aace6 100644 --- a/frontend/src/components/util.tsx +++ b/frontend/src/components/util.tsx @@ -14,6 +14,7 @@ import { Loader2, LogOut, Settings, + User, } from "lucide-react"; import { Input } from "../ui/input"; import { @@ -370,3 +371,16 @@ export const TextUpdateMenu = ({ ); }; + +export const UserAvatar = ({ + avatar, + size = 4, +}: { + avatar: string | undefined; + size?: number; +}) => + avatar ? ( + Avatar + ) : ( + + ); \ No newline at end of file diff --git a/frontend/src/ui/sheet.tsx b/frontend/src/ui/sheet.tsx index 6d905a5fa..2894452e6 100644 --- a/frontend/src/ui/sheet.tsx +++ b/frontend/src/ui/sheet.tsx @@ -29,11 +29,11 @@ const SheetOverlay = React.forwardRef< SheetOverlay.displayName = SheetPrimitive.Overlay.displayName const sheetVariants = cva( - "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", + "fixed z-50 transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:duration-300", { variants: { side: { - top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", + top: "flex justify-center w-[100vw] inset-x-0 top-0 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left", @@ -45,7 +45,7 @@ const sheetVariants = cva( side: "right", }, } -) +); interface SheetContentProps extends React.ComponentPropsWithoutRef, @@ -59,17 +59,19 @@ const SheetContent = React.forwardRef< - {children} - - - Close - +
e.stopPropagation()}> + {children} + + + Close + +
-)) +)); SheetContent.displayName = SheetPrimitive.Content.displayName const SheetHeader = ({