update sheet from top

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;
 }
 
 /**

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 }) => {
     </Popover>
   );
 };
-
-const UserAvatar = ({ avatar }: { avatar: string | undefined }) =>
-  avatar ? (
-    <img src={avatar} alt="Avatar" className="w-4" />
-  ) : (
-    <UserCircle2 className="w-4" />
-  );

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 (
+      <div className={cn("flex items-center gap-2 text-nowrap", className)}>
+        <User className="w-4" />
+        {user_id}
+      </div>
+    );
+  }
   return <RealUpdateUser user_id={user_id} />;
 };
 
-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 (
+    <div className={cn("flex gap-2 text-nowrap", className)}>
+      <UserAvatar avatar={avatar} />
+      {username || user_id}
+    </div>
+  );
 };
 
 export const UpdateDetails = ({
@@ -76,7 +110,11 @@ export const UpdateDetailsInner = ({
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>{children}</SheetTrigger>
-      <SheetContent className="overflow-y-auto w-[100vw] md:w-[75vw] lg:w-[50vw]">
+      <SheetContent
+        className="overflow-y-auto w-[1000px] max-w-[100vw] max-h-[90vh]"
+        side="top"
+        onClick={() => setOpen(false)}
+      >
         <SheetHeader className="mb-4">
           <SheetTitle>
             {update.operation
@@ -86,10 +124,7 @@ export const UpdateDetailsInner = ({
             {!version_is_none(update.version) && fmt_version(update.version)}
           </SheetTitle>
           <SheetDescription className="flex flex-col gap-2">
-            <div className="flex items-center gap-2">
-              <User className="w-4 h-4" />
-              <UpdateUser user_id={update.operator} />
-            </div>
+            <UpdateUser user_id={update.operator} />
             <div className="flex gap-4">
               <Link
                 to={`/${usableResourcePath(
@@ -179,4 +214,4 @@ export const UpdateDetailsInner = ({
       </SheetContent>
     </Sheet>
   );
-};
+};

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 }) => {
             <Calendar className="w-4" />
             {fmt_date(new Date(update.start_ts))}
           </div>
-          <div className="flex items-center gap-2 text-muted-foreground">
-            <User className="w-4" />
-            <UpdateUser user_id={update.operator} />
-          </div>
+          <UpdateUser user_id={update.operator} />
         </div>
       </Card>
     </UpdateDetails>

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 = ({
     </Dialog>
   );
 };
+
+export const UserAvatar = ({
+  avatar,
+  size = 4,
+}: {
+  avatar: string | undefined;
+  size?: number;
+}) =>
+  avatar ? (
+    <img src={avatar} alt="Avatar" className={`w-${size}`} />
+  ) : (
+    <User className={`w-${size}`} />
+  );

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<typeof SheetPrimitive.Content>,
@@ -59,17 +59,19 @@ const SheetContent = React.forwardRef<
     <SheetOverlay />
     <SheetPrimitive.Content
       ref={ref}
-      className={cn(sheetVariants({ side }), className)}
+      className={sheetVariants({ side })}
       {...props}
     >
-      {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <Cross2Icon className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
+      <div className={cn("gap-4 bg-background p-6 shadow-lg relative border-b", className)} onClick={(e) => e.stopPropagation()}>
+        {children}
+        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+          <Cross2Icon className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </div>
     </SheetPrimitive.Content>
   </SheetPortal>
-))
+));
 SheetContent.displayName = SheetPrimitive.Content.displayName
 
 const SheetHeader = ({