From 59727b6be979db2941b7610d2a0381b9b5bdee80 Mon Sep 17 00:00:00 2001
From: oiov <oiov@duck.com>
Date: Sat, 24 May 2025 22:36:31 +0800
Subject: [PATCH] style: adjust url list layout

---
 app/(protected)/admin/urls/page.tsx           |  35 +-
 .../dashboard/urls/globe/index.tsx            |  10 +-
 .../dashboard/urls/globe/realtime-globe.tsx   |   4 +-
 app/(protected)/dashboard/urls/page.tsx       |  42 +-
 app/(protected)/dashboard/urls/url-list.tsx   | 549 +++++++++---------
 app/(protected)/dashboard/urls/wrapper.tsx    |  57 ++
 public/sw.js.map                              |   2 +-
 7 files changed, 363 insertions(+), 336 deletions(-)
 create mode 100644 app/(protected)/dashboard/urls/wrapper.tsx

diff --git a/app/(protected)/admin/urls/page.tsx b/app/(protected)/admin/urls/page.tsx
index 506a461..360ca4d 100644
--- a/app/(protected)/admin/urls/page.tsx
+++ b/app/(protected)/admin/urls/page.tsx
@@ -2,11 +2,8 @@ import { redirect } from "next/navigation";
 
 import { getCurrentUser } from "@/lib/session";
 import { constructMetadata } from "@/lib/utils";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { DashboardHeader } from "@/components/dashboard/header";
 
-import Globe from "../../dashboard/urls/globe";
-import LiveLog from "../../dashboard/urls/live-logs";
 import UserUrlsList from "../../dashboard/urls/url-list";
 
 export const metadata = constructMetadata({
@@ -28,28 +25,16 @@ export default async function DashboardPage() {
         linkText="short urls."
       />
 
-      <Tabs defaultValue="Links">
-        <TabsList>
-          <TabsTrigger value="Links">Links</TabsTrigger>
-          <TabsTrigger value="Realtime">Realtime</TabsTrigger>
-        </TabsList>
-        <TabsContent className="space-y-3" value="Links">
-          <UserUrlsList
-            user={{
-              id: user.id,
-              name: user.name || "",
-              apiKey: user.apiKey || "",
-              role: user.role,
-              team: user.team,
-            }}
-            action="/api/url/admin"
-          />
-          <LiveLog admin={true} />
-        </TabsContent>
-        <TabsContent value="Realtime">
-          <Globe isAdmin />
-        </TabsContent>
-      </Tabs>
+      <UserUrlsList
+        user={{
+          id: user.id,
+          name: user.name || "",
+          apiKey: user.apiKey || "",
+          role: user.role,
+          team: user.team,
+        }}
+        action="/api/url/admin"
+      />
     </>
   );
 }
diff --git a/app/(protected)/dashboard/urls/globe/index.tsx b/app/(protected)/dashboard/urls/globe/index.tsx
index ea6f3e6..35ce839 100644
--- a/app/(protected)/dashboard/urls/globe/index.tsx
+++ b/app/(protected)/dashboard/urls/globe/index.tsx
@@ -487,14 +487,14 @@ export default function Realtime({ isAdmin = false }: { isAdmin?: boolean }) {
   };
 
   return (
-    <div className="relative">
+    <div className="relative w-full">
       <RealtimeTimePicker
         timeRange={timeRange}
         setTimeRange={handleTimeRangeChange}
       />
-      <div className="p-4 sm:relative">
+      <div className="sm:relative sm:p-4">
         <RealtimeChart
-          className="left-0 top-2 z-10 sm:absolute"
+          className="left-0 top-0 z-10 rounded-t-none text-left sm:absolute"
           chartData={chartData}
           totalClicks={stats.totalClicks}
         />
@@ -506,7 +506,7 @@ export default function Realtime({ isAdmin = false }: { isAdmin?: boolean }) {
           setHandleTrafficEvent={(fn) => (handleTrafficEventRef.current = fn)}
         />
         <RealtimeLogs
-          className="right-0 top-2 z-10 sm:absolute"
+          className="-top-9 right-0 z-10 sm:absolute"
           locations={locations}
         />
       </div>
@@ -523,7 +523,7 @@ export function RealtimeTimePicker({
 }) {
   return (
     <Select onValueChange={setTimeRange} name="time range" value={timeRange}>
-      <SelectTrigger className="absolute -top-[46px] right-0 z-20 hidden w-60 sm:inline-flex">
+      <SelectTrigger className="rounded-b-none border-b-0 sm:w-[326px]">
         <SelectValue placeholder="Select a time range" />
       </SelectTrigger>
       <SelectContent>
diff --git a/app/(protected)/dashboard/urls/globe/realtime-globe.tsx b/app/(protected)/dashboard/urls/globe/realtime-globe.tsx
index 52afbc2..6028ef9 100644
--- a/app/(protected)/dashboard/urls/globe/realtime-globe.tsx
+++ b/app/(protected)/dashboard/urls/globe/realtime-globe.tsx
@@ -123,7 +123,7 @@ export default function RealtimeGlobe({
       globe = new Globe(container)
         .width(wrapperWidth)
         .height(wrapperWidth > 728 ? wrapperWidth * 0.9 : wrapperWidth)
-        .globeOffset([0, -100])
+        .globeOffset([0, -130])
         .atmosphereColor("rgba(170, 170, 200, 0.8)")
         .backgroundColor("rgba(0,0,0,0)")
         .globeMaterial(
@@ -295,7 +295,7 @@ export default function RealtimeGlobe({
   }, [cleanup]);
 
   return (
-    <div ref={wrapperRef} className="relative">
+    <div ref={wrapperRef} className="relative max-h-screen overflow-hidden">
       <div
         ref={globeRef}
         className="flex justify-center"
diff --git a/app/(protected)/dashboard/urls/page.tsx b/app/(protected)/dashboard/urls/page.tsx
index 1bde5e3..d4f78b1 100644
--- a/app/(protected)/dashboard/urls/page.tsx
+++ b/app/(protected)/dashboard/urls/page.tsx
@@ -2,12 +2,8 @@ import { redirect } from "next/navigation";
 
 import { getCurrentUser } from "@/lib/session";
 import { constructMetadata } from "@/lib/utils";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { DashboardHeader } from "@/components/dashboard/header";
 
-import ApiReference from "../../../../components/shared/api-reference";
-import Globe from "./globe";
-import LiveLog from "./live-logs";
 import UserUrlsList from "./url-list";
 
 export const metadata = constructMetadata({
@@ -28,34 +24,16 @@ export default async function DashboardPage() {
         link="/docs/short-urls"
         linkText="short urls."
       />
-      <Tabs defaultValue="Links">
-        <TabsList>
-          <TabsTrigger value="Links">Links</TabsTrigger>
-          <TabsTrigger value="Realtime">Realtime</TabsTrigger>
-        </TabsList>
-
-        <TabsContent className="space-y-3" value="Links">
-          <UserUrlsList
-            user={{
-              id: user.id,
-              name: user.name || "",
-              apiKey: user.apiKey || "",
-              role: user.role,
-              team: user.team,
-            }}
-            action="/api/url"
-          />
-          <LiveLog admin={false} />
-          <ApiReference
-            badge="POST /api/v1/short"
-            target="creating short urls"
-            link="/docs/short-urls#api-reference"
-          />
-        </TabsContent>
-        <TabsContent value="Realtime">
-          <Globe />
-        </TabsContent>
-      </Tabs>
+      <UserUrlsList
+        user={{
+          id: user.id,
+          name: user.name || "",
+          apiKey: user.apiKey || "",
+          role: user.role,
+          team: user.team,
+        }}
+        action="/api/url"
+      />
     </>
   );
 }
diff --git a/app/(protected)/dashboard/urls/url-list.tsx b/app/(protected)/dashboard/urls/url-list.tsx
index 765dc99..7519a14 100644
--- a/app/(protected)/dashboard/urls/url-list.tsx
+++ b/app/(protected)/dashboard/urls/url-list.tsx
@@ -16,13 +16,6 @@ import {
   timeAgo,
 } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Modal } from "@/components/ui/modal";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -35,6 +28,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   Tooltip,
   TooltipContent,
@@ -43,6 +37,7 @@ import {
 } from "@/components/ui/tooltip";
 import { FormType } from "@/components/forms/record-form";
 import { UrlForm } from "@/components/forms/url-form";
+import ApiReference from "@/components/shared/api-reference";
 import { CopyButton } from "@/components/shared/copy-button";
 import { EmptyPlaceholder } from "@/components/shared/empty-placeholder";
 import { Icons } from "@/components/shared/icons";
@@ -50,6 +45,8 @@ import { LinkInfoPreviewer } from "@/components/shared/link-previewer";
 import { PaginationWrapper } from "@/components/shared/pagination";
 import QRCodeEditor from "@/components/shared/qr";
 
+import Globe from "./globe";
+import LiveLog from "./live-logs";
 import UserUrlMetaInfo from "./meta";
 
 export interface UrlListProps {
@@ -142,18 +139,268 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
     }
   };
 
+  const renderList = () => (
+    <div className="rounded-lg border p-4">
+      <div className="mb-2 flex-row items-center gap-2 space-y-2 sm:flex sm:space-y-0">
+        <div className="relative w-full">
+          <Input
+            className="h-8 text-xs md:text-xs"
+            placeholder="Search by slug..."
+            value={searchParams.slug}
+            onChange={(e) => {
+              setSearchParams({
+                ...searchParams,
+                slug: e.target.value,
+              });
+            }}
+          />
+          {searchParams.slug && (
+            <Button
+              className="absolute right-2 top-1/2 h-6 -translate-y-1/2 rounded-full px-1 text-gray-500 hover:text-gray-700"
+              onClick={() => setSearchParams({ ...searchParams, slug: "" })}
+              variant={"ghost"}
+            >
+              <Icons.close className="size-3" />
+            </Button>
+          )}
+        </div>
+
+        <div className="relative w-full">
+          <Input
+            className="h-8 text-xs md:text-xs"
+            placeholder="Search by target..."
+            value={searchParams.target}
+            onChange={(e) => {
+              setSearchParams({
+                ...searchParams,
+                target: e.target.value,
+              });
+            }}
+          />
+          {searchParams.target && (
+            <Button
+              className="absolute right-2 top-1/2 h-6 -translate-y-1/2 rounded-full px-1 text-gray-500 hover:text-gray-700"
+              onClick={() => setSearchParams({ ...searchParams, target: "" })}
+              variant={"ghost"}
+            >
+              <Icons.close className="size-3" />
+            </Button>
+          )}
+        </div>
+
+        {user.role === "ADMIN" && (
+          <div className="relative w-full">
+            <Input
+              className="h-8 text-xs md:text-xs"
+              placeholder="Search by user name..."
+              value={searchParams.userName}
+              onChange={(e) => {
+                setSearchParams({
+                  ...searchParams,
+                  userName: e.target.value,
+                });
+              }}
+            />
+            {searchParams.userName && (
+              <Button
+                className="absolute right-2 top-1/2 h-6 -translate-y-1/2 rounded-full px-1 text-gray-500 hover:text-gray-700"
+                onClick={() =>
+                  setSearchParams({ ...searchParams, userName: "" })
+                }
+                variant={"ghost"}
+              >
+                <Icons.close className="size-3" />
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+
+      <Table>
+        <TableHeader className="bg-gray-100/50 dark:bg-primary-foreground">
+          <TableRow className="grid grid-cols-3 items-center sm:grid-cols-11">
+            <TableHead className="col-span-1 flex items-center font-bold sm:col-span-2">
+              Slug
+            </TableHead>
+            <TableHead className="col-span-1 flex items-center font-bold sm:col-span-2">
+              Target
+            </TableHead>
+            <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
+              User
+            </TableHead>
+            <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
+              Enabled
+            </TableHead>
+            <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
+              Expiration
+            </TableHead>
+            <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
+              Updated
+            </TableHead>
+            <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
+              Created
+            </TableHead>
+            <TableHead className="col-span-1 flex items-center font-bold sm:col-span-2">
+              Actions
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {isLoading ? (
+            <>
+              <TableColumnSekleton />
+              <TableColumnSekleton />
+              <TableColumnSekleton />
+              <TableColumnSekleton />
+              <TableColumnSekleton />
+            </>
+          ) : data && data.list && data.list.length ? (
+            data.list.map((short) => (
+              <div className="border-b" key={short.id}>
+                <TableRow className="grid grid-cols-3 items-center sm:grid-cols-11">
+                  <TableCell className="col-span-1 flex items-center gap-1 sm:col-span-2">
+                    <Link
+                      className="overflow-hidden text-ellipsis whitespace-normal text-slate-600 hover:text-blue-400 hover:underline dark:text-slate-400"
+                      href={`https://${short.prefix}/s/${short.url}${short.password ? `?password=${short.password}` : ""}`}
+                      target="_blank"
+                      prefetch={false}
+                      title={short.url}
+                    >
+                      {short.url}
+                    </Link>
+                    <CopyButton
+                      value={`${short.prefix}/s/${short.url}${short.password ? `?password=${short.password}` : ""}`}
+                      className={cn(
+                        "size-[25px]",
+                        "duration-250 transition-all group-hover:opacity-100",
+                      )}
+                    />
+                    {short.password && (
+                      <Icons.lock className="size-3 text-neutral-600 dark:text-neutral-400" />
+                    )}
+                  </TableCell>
+                  <TableCell className="col-span-1 flex items-center justify-start sm:col-span-2">
+                    <LinkInfoPreviewer
+                      apiKey={user.apiKey ?? ""}
+                      url={short.target}
+                      formatUrl={removeUrlSuffix(short.target)}
+                    />
+                  </TableCell>
+                  <TableCell className="col-span-1 hidden truncate sm:flex">
+                    <TooltipProvider>
+                      <Tooltip delayDuration={200}>
+                        <TooltipTrigger className="truncate">
+                          {short.userName ?? "Anonymous"}
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          {short.userName ?? "Anonymous"}
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  </TableCell>
+                  <TableCell className="col-span-1 hidden sm:flex">
+                    <Switch
+                      defaultChecked={short.active === 1}
+                      onCheckedChange={(value) =>
+                        handleChangeStatu(value, short.id || "")
+                      }
+                    />
+                  </TableCell>
+                  <TableCell className="col-span-1 hidden sm:flex">
+                    {expirationTime(short.expiration, short.updatedAt)}
+                  </TableCell>
+                  <TableCell className="col-span-1 hidden truncate sm:flex">
+                    {timeAgo(short.updatedAt as Date)}
+                  </TableCell>
+                  <TableCell className="col-span-1 hidden truncate sm:flex">
+                    {timeAgo(short.createdAt as Date)}
+                  </TableCell>
+                  <TableCell className="col-span-1 flex items-center gap-1 sm:col-span-2">
+                    <Button
+                      className="h-7 px-1 text-xs hover:bg-slate-100 dark:hover:text-primary-foreground"
+                      size="sm"
+                      variant={"outline"}
+                      onClick={() => {
+                        setCurrentEditUrl(short);
+                        setShowForm(false);
+                        setFormType("edit");
+                        setShowForm(!isShowForm);
+                      }}
+                    >
+                      <p className="hidden sm:block">Edit</p>
+                      <PenLine className="mx-0.5 size-4 sm:ml-1 sm:size-3" />
+                    </Button>
+                    <Button
+                      className="h-7 px-1 text-xs hover:bg-slate-100 dark:hover:text-primary-foreground"
+                      size="sm"
+                      variant={"outline"}
+                      onClick={() => {
+                        setSelectedUrl(short);
+                        setShowQrcode(!isShowQrcode);
+                      }}
+                    >
+                      <Icons.qrcode className="mx-0.5 size-4" />
+                    </Button>
+                    <Button
+                      className="h-7 px-1 text-xs hover:bg-slate-100 dark:hover:text-primary-foreground"
+                      size="sm"
+                      variant="outline"
+                      onClick={() => {
+                        setSelectedUrl(short);
+                        if (isShowStats && selectedUrl?.id !== short.id) {
+                        } else {
+                          setShowStats(!isShowStats);
+                        }
+                      }}
+                    >
+                      <Icons.lineChart className="mx-0.5 size-4" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+                {isShowStats && selectedUrl?.id === short.id && (
+                  <UserUrlMetaInfo
+                    user={{
+                      id: user.id,
+                      name: user.name || "",
+                      team: user.team,
+                    }}
+                    action="/api/url/meta"
+                    urlId={short.id!}
+                  />
+                )}
+              </div>
+            ))
+          ) : (
+            <EmptyPlaceholder>
+              <EmptyPlaceholder.Icon name="link" />
+              <EmptyPlaceholder.Title>No urls</EmptyPlaceholder.Title>
+              <EmptyPlaceholder.Description>
+                You don&apos;t have any url yet. Start creating url.
+              </EmptyPlaceholder.Description>
+            </EmptyPlaceholder>
+          )}
+        </TableBody>
+        {data && Math.ceil(data.total / pageSize) > 1 && (
+          <PaginationWrapper
+            total={data.total}
+            currentPage={currentPage}
+            setCurrentPage={setCurrentPage}
+            pageSize={pageSize}
+            setPageSize={setPageSize}
+          />
+        )}
+      </Table>
+    </div>
+  );
+
   return (
     <>
-      <Card className="xl:col-span-2">
-        <CardHeader className="flex flex-row items-center">
-          {action.includes("/admin") ? (
-            <CardDescription className="text-balance text-lg font-bold">
-              <span>Total URLs:</span>{" "}
-              <span className="font-bold">{data && data.total}</span>
-            </CardDescription>
-          ) : (
-            <CardTitle>Short URLs</CardTitle>
-          )}
+      <Tabs defaultValue="Links">
+        <div className="mb-4 flex items-center justify-between gap-2">
+          <TabsList>
+            <TabsTrigger value="Links">Links</TabsTrigger>
+            <TabsTrigger value="Realtime">Realtime</TabsTrigger>
+          </TabsList>
           <div className="ml-auto flex items-center justify-end gap-3">
             <Button
               variant={"outline"}
@@ -180,261 +427,21 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
               <span className="hidden sm:inline">Add URL</span>
             </Button>
           </div>
-        </CardHeader>
-        <CardContent>
-          <div className="mb-2 flex-row items-center gap-2 space-y-2 sm:flex sm:space-y-0">
-            <div className="relative w-full">
-              <Input
-                className="h-8 text-xs md:text-xs"
-                placeholder="Search by slug..."
-                value={searchParams.slug}
-                onChange={(e) => {
-                  setSearchParams({
-                    ...searchParams,
-                    slug: e.target.value,
-                  });
-                }}
-              />
-              {searchParams.slug && (
-                <Button
-                  className="absolute right-2 top-1/2 h-6 -translate-y-1/2 rounded-full px-1 text-gray-500 hover:text-gray-700"
-                  onClick={() => setSearchParams({ ...searchParams, slug: "" })}
-                  variant={"ghost"}
-                >
-                  <Icons.close className="size-3" />
-                </Button>
-              )}
-            </div>
+        </div>
 
-            <div className="relative w-full">
-              <Input
-                className="h-8 text-xs md:text-xs"
-                placeholder="Search by target..."
-                value={searchParams.target}
-                onChange={(e) => {
-                  setSearchParams({
-                    ...searchParams,
-                    target: e.target.value,
-                  });
-                }}
-              />
-              {searchParams.target && (
-                <Button
-                  className="absolute right-2 top-1/2 h-6 -translate-y-1/2 rounded-full px-1 text-gray-500 hover:text-gray-700"
-                  onClick={() =>
-                    setSearchParams({ ...searchParams, target: "" })
-                  }
-                  variant={"ghost"}
-                >
-                  <Icons.close className="size-3" />
-                </Button>
-              )}
-            </div>
-
-            {user.role === "ADMIN" && (
-              <div className="relative w-full">
-                <Input
-                  className="h-8 text-xs md:text-xs"
-                  placeholder="Search by user name..."
-                  value={searchParams.userName}
-                  onChange={(e) => {
-                    setSearchParams({
-                      ...searchParams,
-                      userName: e.target.value,
-                    });
-                  }}
-                />
-                {searchParams.userName && (
-                  <Button
-                    className="absolute right-2 top-1/2 h-6 -translate-y-1/2 rounded-full px-1 text-gray-500 hover:text-gray-700"
-                    onClick={() =>
-                      setSearchParams({ ...searchParams, userName: "" })
-                    }
-                    variant={"ghost"}
-                  >
-                    <Icons.close className="size-3" />
-                  </Button>
-                )}
-              </div>
-            )}
-          </div>
-
-          <Table>
-            <TableHeader className="bg-gray-100/50 dark:bg-primary-foreground">
-              <TableRow className="grid grid-cols-3 items-center sm:grid-cols-11">
-                <TableHead className="col-span-1 flex items-center font-bold sm:col-span-2">
-                  Slug
-                </TableHead>
-                <TableHead className="col-span-1 flex items-center font-bold sm:col-span-2">
-                  Target
-                </TableHead>
-                <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
-                  User
-                </TableHead>
-                <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
-                  Enabled
-                </TableHead>
-                <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
-                  Expiration
-                </TableHead>
-                <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
-                  Updated
-                </TableHead>
-                <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
-                  Created
-                </TableHead>
-                <TableHead className="col-span-1 flex items-center font-bold sm:col-span-2">
-                  Actions
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {isLoading ? (
-                <>
-                  <TableColumnSekleton />
-                  <TableColumnSekleton />
-                  <TableColumnSekleton />
-                  <TableColumnSekleton />
-                  <TableColumnSekleton />
-                </>
-              ) : data && data.list && data.list.length ? (
-                data.list.map((short) => (
-                  <div className="border-b" key={short.id}>
-                    <TableRow className="grid grid-cols-3 items-center sm:grid-cols-11">
-                      <TableCell className="col-span-1 flex items-center gap-1 sm:col-span-2">
-                        <Link
-                          className="overflow-hidden text-ellipsis whitespace-normal text-slate-600 hover:text-blue-400 hover:underline dark:text-slate-400"
-                          href={`https://${short.prefix}/s/${short.url}${short.password ? `?password=${short.password}` : ""}`}
-                          target="_blank"
-                          prefetch={false}
-                          title={short.url}
-                        >
-                          {short.url}
-                        </Link>
-                        <CopyButton
-                          value={`${short.prefix}/s/${short.url}${short.password ? `?password=${short.password}` : ""}`}
-                          className={cn(
-                            "size-[25px]",
-                            "duration-250 transition-all group-hover:opacity-100",
-                          )}
-                        />
-                        {short.password && (
-                          <Icons.lock className="size-3 text-neutral-600 dark:text-neutral-400" />
-                        )}
-                      </TableCell>
-                      <TableCell className="col-span-1 flex items-center justify-start sm:col-span-2">
-                        <LinkInfoPreviewer
-                          apiKey={user.apiKey ?? ""}
-                          url={short.target}
-                          formatUrl={removeUrlSuffix(short.target)}
-                        />
-                      </TableCell>
-                      <TableCell className="col-span-1 hidden truncate sm:flex">
-                        <TooltipProvider>
-                          <Tooltip delayDuration={200}>
-                            <TooltipTrigger className="truncate">
-                              {short.userName ?? "Anonymous"}
-                            </TooltipTrigger>
-                            <TooltipContent>
-                              {short.userName ?? "Anonymous"}
-                            </TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      </TableCell>
-                      <TableCell className="col-span-1 hidden sm:flex">
-                        <Switch
-                          defaultChecked={short.active === 1}
-                          onCheckedChange={(value) =>
-                            handleChangeStatu(value, short.id || "")
-                          }
-                        />
-                      </TableCell>
-                      <TableCell className="col-span-1 hidden sm:flex">
-                        {expirationTime(short.expiration, short.updatedAt)}
-                      </TableCell>
-                      <TableCell className="col-span-1 hidden truncate sm:flex">
-                        {timeAgo(short.updatedAt as Date)}
-                      </TableCell>
-                      <TableCell className="col-span-1 hidden truncate sm:flex">
-                        {timeAgo(short.createdAt as Date)}
-                      </TableCell>
-                      <TableCell className="col-span-1 flex items-center gap-1 sm:col-span-2">
-                        <Button
-                          className="h-7 px-1 text-xs hover:bg-slate-100 dark:hover:text-primary-foreground"
-                          size="sm"
-                          variant={"outline"}
-                          onClick={() => {
-                            setCurrentEditUrl(short);
-                            setShowForm(false);
-                            setFormType("edit");
-                            setShowForm(!isShowForm);
-                          }}
-                        >
-                          <p className="hidden sm:block">Edit</p>
-                          <PenLine className="mx-0.5 size-4 sm:ml-1 sm:size-3" />
-                        </Button>
-                        <Button
-                          className="h-7 px-1 text-xs hover:bg-slate-100 dark:hover:text-primary-foreground"
-                          size="sm"
-                          variant={"outline"}
-                          onClick={() => {
-                            setSelectedUrl(short);
-                            setShowQrcode(!isShowQrcode);
-                          }}
-                        >
-                          <Icons.qrcode className="mx-0.5 size-4" />
-                        </Button>
-                        <Button
-                          className="h-7 px-1 text-xs hover:bg-slate-100 dark:hover:text-primary-foreground"
-                          size="sm"
-                          variant="outline"
-                          onClick={() => {
-                            setSelectedUrl(short);
-                            if (isShowStats && selectedUrl?.id !== short.id) {
-                            } else {
-                              setShowStats(!isShowStats);
-                            }
-                          }}
-                        >
-                          <Icons.lineChart className="mx-0.5 size-4" />
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                    {isShowStats && selectedUrl?.id === short.id && (
-                      <UserUrlMetaInfo
-                        user={{
-                          id: user.id,
-                          name: user.name || "",
-                          team: user.team,
-                        }}
-                        action="/api/url/meta"
-                        urlId={short.id!}
-                      />
-                    )}
-                  </div>
-                ))
-              ) : (
-                <EmptyPlaceholder>
-                  <EmptyPlaceholder.Icon name="link" />
-                  <EmptyPlaceholder.Title>No urls</EmptyPlaceholder.Title>
-                  <EmptyPlaceholder.Description>
-                    You don&apos;t have any url yet. Start creating url.
-                  </EmptyPlaceholder.Description>
-                </EmptyPlaceholder>
-              )}
-            </TableBody>
-            {data && Math.ceil(data.total / pageSize) > 1 && (
-              <PaginationWrapper
-                total={data.total}
-                currentPage={currentPage}
-                setCurrentPage={setCurrentPage}
-                pageSize={pageSize}
-                setPageSize={setPageSize}
-              />
-            )}
-          </Table>
-        </CardContent>
-      </Card>
+        <TabsContent className="space-y-3" value="Links">
+          {renderList()}
+          <LiveLog admin={action.indexOf("admin") > -1} />
+          <ApiReference
+            badge="POST /api/v1/short"
+            target="creating short urls"
+            link="/docs/short-urls#api-reference"
+          />
+        </TabsContent>
+        <TabsContent value="Realtime">
+          <Globe isAdmin={action.indexOf("admin") > -1} />
+        </TabsContent>
+      </Tabs>
 
       {/* QR code editor */}
       <Modal
diff --git a/app/(protected)/dashboard/urls/wrapper.tsx b/app/(protected)/dashboard/urls/wrapper.tsx
new file mode 100644
index 0000000..03b31fd
--- /dev/null
+++ b/app/(protected)/dashboard/urls/wrapper.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { useState } from "react";
+import { User } from "@prisma/client";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import ApiReference from "@/components/shared/api-reference";
+
+import Globe from "./globe";
+import LiveLog from "./live-logs";
+import UserUrlsList from "./url-list";
+
+export function Wrapper({
+  user,
+}: {
+  user: Pick<User, "id" | "name" | "apiKey" | "role" | "team">;
+}) {
+  const [tab, setTab] = useState("Links");
+  return (
+    <Tabs
+      value={tab}
+      onChangeCapture={(e) => console.log(e)}
+      defaultValue={tab}
+    >
+      <TabsList>
+        <TabsTrigger value="Links" onClick={() => setTab("Links")}>
+          Links
+        </TabsTrigger>
+        <TabsTrigger value="Realtime" onClick={() => setTab("Realtime")}>
+          Realtime
+        </TabsTrigger>
+      </TabsList>
+      )
+      <TabsContent className="space-y-3" value="Links">
+        <UserUrlsList
+          user={{
+            id: user.id,
+            name: user.name || "",
+            apiKey: user.apiKey || "",
+            role: user.role,
+            team: user.team,
+          }}
+          action="/api/url"
+        />
+        <LiveLog admin={false} />
+        <ApiReference
+          badge="POST /api/v1/short"
+          target="creating short urls"
+          link="/docs/short-urls#api-reference"
+        />
+      </TabsContent>
+      <TabsContent value="Realtime">
+        <Globe />
+      </TabsContent>
+    </Tabs>
+  );
+}
diff --git a/public/sw.js.map b/public/sw.js.map
index 948f0d8..8aea419 100644
--- a/public/sw.js.map
+++ b/public/sw.js.map
@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../../../private/var/folders/9b/3qmyp8zd2xvdspdrp149fyg00000gn/T/764b0516b4ef50300bb94f4104acc7f2/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/Users/songjunxi/Desktop/repos/wrdo-app/wr.do/node_modules/.pnpm/workbox-routing@6.6.0/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from '/Users/songjunxi/Desktop/repos/wrdo-app/wr.do/node_modules/.pnpm/workbox-strategies@6.6.0/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/Users/songjunxi/Desktop/repos/wrdo-app/wr.do/node_modules/.pnpm/workbox-strategies@6.6.0/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/Users/songjunxi/Desktop/repos/wrdo-app/wr.do/node_modules/.pnpm/workbox-core@6.6.0/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({ request, response, event, state }) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, { status: 200, statusText: 'OK', headers: response.headers }) } return response } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","plugins","cacheWillUpdate","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"sw.js","sources":["../../../../../../private/var/folders/9b/3qmyp8zd2xvdspdrp149fyg00000gn/T/55a92431d44686a99954e11021ff0405/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/Users/songjunxi/Desktop/repos/wrdo-app/wr.do/node_modules/.pnpm/workbox-routing@6.6.0/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from '/Users/songjunxi/Desktop/repos/wrdo-app/wr.do/node_modules/.pnpm/workbox-strategies@6.6.0/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/Users/songjunxi/Desktop/repos/wrdo-app/wr.do/node_modules/.pnpm/workbox-strategies@6.6.0/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/Users/songjunxi/Desktop/repos/wrdo-app/wr.do/node_modules/.pnpm/workbox-core@6.6.0/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({ request, response, event, state }) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, { status: 200, statusText: 'OK', headers: response.headers }) } return response } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","plugins","cacheWillUpdate","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly"],"mappings":"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"}
\ No newline at end of file