add stashed frontend updates

frontend/src/components/updates/header.tsx

@@ -10,7 +10,7 @@ import { Button } from "@ui/button";
 import { Calendar, User } from "lucide-react";
 import { UpdateDetails, UpdateUser } from "./details";
 import { ResourceComponents } from "@components/resources";
-import { cn } from "@lib/utils";
+import { cn, fmt_verison } from "@lib/utils";
 import { Types } from "@monitor/client";
 
 const fmt_date = (d: Date) =>
@@ -33,18 +33,21 @@ export const SingleUpdate = ({ update }: { update: Types.UpdateListItem }) => {
     <UpdateDetails id={update.id}>
       <div className="px-2 py-4 hover:bg-muted transition-colors border-b last:border-none cursor-pointer">
         <div className="flex items-center justify-between">
-          <div className="ml-2 mr-4">
-            <Icon />
-          </div>
           <div className="text-sm w-full">
-            {update.operation.match(/[A-Z][a-z]+|[0-9]+/g)?.join(" ")}
+            <div className="flex items-center gap-2">
+              <Icon />
+              {update.operation.match(/[A-Z][a-z]+|[0-9]+/g)?.join(" ")}
+              <div className="text-xs text-muted-foreground">
+                {fmt_verison(update.version)}
+              </div>
+            </div>
             <div className="flex items-center gap-2 text-muted-foreground">
-              {Components && <Components.Icon id={update.target.id} />}
+              {Components && <Components.Icon />}
               {Components && <Components.Name id={update.target.id} />}
             </div>
           </div>
-          <div className="text-xs w-48">
-            <div className="flex items-center gap-2">
+          <div className="text-xs text-muted-foreground w-48">
+            <div className="flex items-center gap-2 h-[20px]">
               <Calendar className="w-4 h-4" />
               <div>
                 {update.status === Types.UpdateStatus.InProgress
@@ -52,7 +55,7 @@ export const SingleUpdate = ({ update }: { update: Types.UpdateListItem }) => {
                   : fmt_date(new Date(update.start_ts))}
               </div>
             </div>
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2 h-[20px]">
               <User className="w-4 h-4" />
               <UpdateUser user_id={update.operator} />
             </div>
@@ -68,7 +71,7 @@ export const HeaderUpdates = () => {
 
   const last_opened = useRead("GetUser", {}).data?.last_update_view;
   const unseen_update = updates?.updates.some(
-    (u) => u.start_ts > (last_opened ?? Number.MAX_SAFE_INTEGER),
+    (u) => u.start_ts > (last_opened ?? Number.MAX_SAFE_INTEGER)
   );
 
   const invalidate = useInvalidate();
@@ -84,7 +87,7 @@ export const HeaderUpdates = () => {
           <Circle
             className={cn(
               "absolute top-2 right-2 w-2 h-2 stroke-red-500 fill-red-500 transition-opacity",
-              unseen_update ? "opacity-1" : "opacity-0",
+              unseen_update ? "opacity-1" : "opacity-0"
             )}
           />
         </Button>

frontend/src/components/updates/resource.tsx

@@ -15,29 +15,30 @@ import {
   Check,
   X,
   Loader2,
+  Milestone,
 } from "lucide-react";
 import { Link } from "react-router-dom";
 import { Types } from "@monitor/client";
 import { Section } from "@components/layouts";
-import { fmt_update_date } from "@lib/utils";
+import { fmt_update_date, fmt_verison } from "@lib/utils";
 import { UpdateDetails, UpdateUser } from "./details";
 import { UpdateStatus } from "@monitor/client/dist/types";
 
-const UpdatePlaceHolder = () => (
-  <Card>
-    <CardHeader>
-      <CardTitle>...</CardTitle>
-      <CardContent>
-        <CardDescription className="flex items-center gap-2">
-          <User className="w-4 h-4" /> ...
-        </CardDescription>
-        <CardDescription className="flex items-center gap-2">
-          <Calendar className="w-4 h-4" /> ...
-        </CardDescription>
-      </CardContent>
-    </CardHeader>
-  </Card>
-);
+// const UpdatePlaceHolder = () => (
+//   <Card>
+//     <CardHeader>
+//       <CardTitle>...</CardTitle>
+//       <CardContent>
+//         <CardDescription className="flex items-center gap-2">
+//           <User className="w-4 h-4" /> ...
+//         </CardDescription>
+//         <CardDescription className="flex items-center gap-2">
+//           <Calendar className="w-4 h-4" /> ...
+//         </CardDescription>
+//       </CardContent>
+//     </CardHeader>
+//   </Card>
+// );
 
 const UpdateCard = ({ update }: { update: Types.UpdateListItem }) => {
   const Icon = () => {
@@ -50,8 +51,14 @@ const UpdateCard = ({ update }: { update: Types.UpdateListItem }) => {
   return (
     <UpdateDetails id={update.id}>
       <Card className="cursor-pointer hover:translate-y-[-2.5%] hover:bg-accent/50 transition-all">
-        <CardHeader className="flex-row justify-between">
-          <CardTitle>{update.operation}</CardTitle>
+        <CardHeader className="justify-between">
+          <div>
+            <CardTitle>{update.operation}</CardTitle>
+            <CardDescription className="flex items-center gap-2">
+              <Milestone className="w-4 h-4" />
+              {fmt_verison(update.version)}
+            </CardDescription>
+          </div>
           <Icon />
         </CardHeader>
         <CardContent>
@@ -70,7 +77,7 @@ const UpdateCard = ({ update }: { update: Types.UpdateListItem }) => {
 };
 
 export const ResourceUpdates = ({ type, id }: Types.ResourceTarget) => {
-  const { data, isLoading } = useRead("ListUpdates", {
+  const { data } = useRead("ListUpdates", {
     query: {
       "target.type": type,
       "target.id": id,
@@ -90,10 +97,10 @@ export const ResourceUpdates = ({ type, id }: Types.ResourceTarget) => {
       }
     >
       <div className="grid md:grid-cols-3 gap-4">
-        {isLoading && <UpdatePlaceHolder />}
-        {data?.updates
-          .slice(0, 3)
-          .map((update) => <UpdateCard update={update} key={update.id} />)}
+        {/* {isLoading && <UpdatePlaceHolder />} */}
+        {data?.updates.slice(0, 3).map((update) => (
+          <UpdateCard update={update} key={update.id} />
+        ))}
       </div>
     </Section>
   );

frontend/src/components/util.tsx

@@ -334,18 +334,19 @@ export const ResourcesDropdown = () => {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-48" side="bottom">
+        <DropdownMenuGroup>
+          <Link to={`/${type.toLowerCase()}s`}>
+            <DropdownMenuItem className="flex items-center gap-2">
+              <Components.Icon />
+              All {type}s
+            </DropdownMenuItem>
+          </Link>
+        </DropdownMenuGroup>
         <DropdownMenuGroup>
           {!list?.length && (
             <DropdownMenuItem disabled>No {type}s Found.</DropdownMenuItem>
           )}
-          {list?.length && (
-            <Link to={`/${type.toLowerCase()}s`}>
-              <DropdownMenuItem className="flex items-center gap-2">
-                <Components.Icon />
-                All {type}s
-              </DropdownMenuItem>
-            </Link>
-          )}
+
           {list?.map(({ id, name }) => (
             <Link key={id} to={`/${type.toLowerCase()}s/${id}`}>
               <DropdownMenuItem className="flex items-center gap-2">