Sever icon and a few other stuff

src/app/dashboard/server.tsx

@@ -31,6 +31,7 @@ import {
   MemoryStick,
   Network,
   Pencil,
+  ServerIcon,
   Trash,
   Wifi,
 } from "lucide-react";
@@ -73,22 +74,29 @@ export default function ServerComponent({
     <>
       <ContextMenu>
         <ContextMenuTrigger>
-          <Card className="w-full transition-transform duration-500 hover:scale-102 hover:cursor-pointer">
+          <Card className="w-full transition-transform duration-500 hover:scale-102 hover:cursor-pointer !select-none">
             <CardHeader>
-              <CardTitle>{server.name}</CardTitle>
+              <div className="flex items-center gap-2">
-              <CardDescription className="flex justify-between">
+                <div className="bg-muted text-muted-foreground p-1.5 rounded-md">
-                <div className="flex gap-2">
+                  <ServerIcon className="w-4.5 h-4.5 text-current my-auto" />
-                  {server.status[0].toUpperCase() + server.status.slice(1)}{" "}
-                  {" · "}
-                  {server.ip}
-                  {server.location && (
-                    <div className="flex items-center gap-0.5">
-                      <MapPin size={14} />
-                      {server.location}
-                    </div>
-                  )}
                 </div>
-              </CardDescription>
+                <div>
+                  <CardTitle>{server.name}</CardTitle>
+                  <CardDescription className="flex justify-between">
+                    <div className="flex gap-2 items-center flex-wrap">
+                      {server.status[0].toUpperCase() + server.status.slice(1)}
+                      {" · "}
+                      {server.ip}
+                      {server.location && (
+                        <div className="flex items-center gap-1">
+                          <MapPin size={14} />
+                          {server.location}
+                        </div>
+                      )}
+                    </div>
+                  </CardDescription>
+                </div>
+              </div>
             </CardHeader>
             <CardContent className="w-full flex flex-col gap-3.5">
               <UsageBar

src/app/servers/Map.tsx

@@ -11,7 +11,14 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet";
 import ServerComponent, { UsageBar } from "../dashboard/server";
-import { Cpu, HardDrive, MapPin, MemoryStick, Network } from "lucide-react";
+import {
+  Cpu,
+  HardDrive,
+  MapPin,
+  MemoryStick,
+  Network,
+  ServerIcon,
+} from "lucide-react";
 
 export default function Map({ servers }: { servers: Server[] }) {
   const mapContainer = useRef<HTMLDivElement | null>(null);
@@ -71,17 +78,25 @@ export default function Map({ servers }: { servers: Server[] }) {
         {sheet && (
           <SheetContent>
             <SheetHeader>
-              <SheetTitle>{sheet.name}</SheetTitle>
+              <div className="flex items-center gap-2">
-              <SheetDescription className="flex gap-2">
+                <div className="bg-muted text-muted-foreground p-1.5 rounded-md">
-                {sheet.status[0].toUpperCase() + sheet.status.slice(1)} {" · "}
+                  <ServerIcon className="w-4.5 h-4.5 text-current my-auto" />
-                {sheet.ip}
+                </div>
-                {sheet.location && (
+                <div>
-                  <span className="flex items-center gap-0.5">
+                  <SheetTitle>{sheet.name}</SheetTitle>
-                    <MapPin size={14} />
+                  <SheetDescription className="flex gap-2">
-                    {sheet.location}
+                    {sheet.status[0].toUpperCase() + sheet.status.slice(1)}{" "}
-                  </span>
+                    {" · "}
-                )}
+                    {sheet.ip}
-              </SheetDescription>
+                    {sheet.location && (
+                      <span className="flex items-center gap-0.5">
+                        <MapPin size={14} />
+                        {sheet.location}
+                      </span>
+                    )}
+                  </SheetDescription>
+                </div>
+              </div>
             </SheetHeader>
             <div className="px-4 gap-4 flex flex-col">
               <UsageBar

src/hooks/useSession.ts

@@ -22,6 +22,10 @@ export default function useSession() {
           toast.error(e.response.data.message);
           router.replace("/login");
         });
+    else {
+      toast.error("Invalid session");
+      router.replace("/login");
+    }
   }, []);
 
   return session;