fix: what was fixable

Author: toto04

Dockerfile

@@ -23,7 +23,6 @@ RUN --mount=type=cache,id=pnpm,target=./pnpm/store pnpm install --frozen-lockfil
 FROM base AS builder
 
 COPY --from=deps /app/node_modules ./node_modules
-RUN pwd
 COPY . .
 
 # Next.js collects completely anonymous telemetry data about general usage.

package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-toggle": "^1.1.10",
     "@scalar/nextjs-api-reference": "^0.8.23",
     "@t3-oss/env-nextjs": "^0.13.8",
     "@tanstack/react-query": "^5.90.5",

pnpm-lock.yaml

@@ -12,6 +12,7 @@ const handler = createNextHandler(
         search: query.search,
         sortBy: query.sortBy,
         sortOrder: query.sortOrder,
+        customOnly: query.customOnly,
       })
       return {
         status: 200,

src/app/api/[...ts-rest]/route.ts

@@ -188,4 +188,11 @@
     @apply bg-background text-foreground;
     letter-spacing: var(--tracking-normal);
   }
+}
+
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
 }

src/app/globals.css

@@ -1,10 +1,12 @@
 "use client"
 
-import { Search } from "lucide-react"
+import { Search, Star } from "lucide-react"
+import Image from "next/image"
 import Link from "next/link"
 import { useState } from "react"
 import { toast } from "sonner"
 import { useDebounce } from "use-debounce"
+import logo from "@/assets/logo.png"
 import { Button } from "@/components/ui/button"
 import {
   Card,
@@ -30,9 +32,11 @@ import {
 } from "@/components/ui/table"
 import { useUrls } from "@/hooks/urls"
 import type { UrlRecord, UrlsQueryParams } from "@/lib/schemas"
+import { copyToClipboard } from "@/lib/utils"
 import { CreateUrlDialog } from "./create-url-dialog"
 import { EditUrlDialog } from "./edit-url-dialog"
 import { PaginationControls } from "./pagination"
+import { Toggle } from "./ui/toggle"
 import { UrlRecordRow } from "./url-record-row"
 
 export function Dashboard() {
@@ -58,6 +62,14 @@ export function Dashboard() {
     url?: UrlRecord
   }>({ open: false })
 
+  const handleCustomOnlyToggle = () => {
+    setQueryParams((prev) => ({
+      ...prev,
+      customOnly: !prev.customOnly,
+      page: 1,
+    }))
+  }
+
   const handleSortChange = (value: string) => {
     const [sortBy, sortOrder] = value.split("-") as [
       UrlsQueryParams["sortBy"],
@@ -97,22 +109,13 @@ export function Dashboard() {
     }
   }
 
-  const copyToClipboard = async (text: string) => {
-    try {
-      await navigator.clipboard.writeText(text)
-      toast.success("Copied to clipboard")
-    } catch (error) {
-      console.error("Error copying to clipboard:", error)
-      toast.error("Failed to copy to clipboard")
-    }
-  }
-
   const currentSort = `${qp.sortBy}-${qp.sortOrder}`
 
   return (
     <div className="container mx-auto p-6 space-y-6">
-      <div className="flex justify-between items-center">
-        <div>
+      <div className="flex gap-4 items-center">
+        <Image src={logo} alt="PoliNetwork Logo" className="h-16 w-16" />
+        <div className="mr-auto">
           <h1 className="text-3xl font-bold">URL Shortener Dashboard</h1>
           <p className="text-muted-foreground">
             Manage your shortened URLs for PoliNetwork domains
@@ -163,6 +166,14 @@ export function Dashboard() {
                 <SelectItem value="short_code-desc">Short Code Z-A</SelectItem>
               </SelectContent>
             </Select>
+            <Toggle
+              pressed={queryParams.customOnly}
+              onPressedChange={handleCustomOnlyToggle}
+              className="data-[state=on]:bg-secondary data-[state=on]:*:[svg]:fill-yellow-300 data-[state=on]:*:[svg]:stroke-yellow-300"
+            >
+              <Star className="h-4 w-4" />
+              Show Custom Only
+            </Toggle>
           </div>
 
           {/* Table */}
@@ -179,11 +190,14 @@ export function Dashboard() {
               <Table>
                 <TableHeader>
                   <TableRow>
+                    <TableHead className="w-4">
+                      <Star className="h-4 w-4" />
+                    </TableHead>
                     <TableHead>Short URL</TableHead>
                     <TableHead>Original URL</TableHead>
-                    <TableHead>Clicks</TableHead>
                     <TableHead>Created</TableHead>
-                    <TableHead>Actions</TableHead>
+                    <TableHead className="w-0 text-center">Clicks</TableHead>
+                    <TableHead className="w-0 text-center">Actions</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>

src/assets/logo.png

@@ -1,4 +1,5 @@
 import { useState } from "react"
+import type { PaginatedUrlsResponse } from "@/lib/schemas"
 import { withPages } from "@/lib/utils"
 import {
   Pagination,
@@ -16,13 +17,12 @@ import {
   SelectValue,
 } from "./ui/select"
 
-export function PaginationControls(props: {
-  page: number
-  limit: number
-  total: number
-  onPageChange: (page: number) => void
-  onLimitChange?: (limit: number) => void
-}) {
+export function PaginationControls(
+  props: {
+    onPageChange: (page: number) => void
+    onLimitChange?: (limit: number) => void
+  } & PaginatedUrlsResponse["pagination"]
+) {
   const [limit, setLimit] = useState(props.limit)
 
   const handleLimitChange = (value: string) => {
@@ -56,7 +56,7 @@ export function PaginationControls(props: {
             />
           </PaginationItem>
 
-          {withPages(props.page, props.total).map(({ page, ellipses }) => {
+          {withPages(props.page, props.totalPages).map(({ page, ellipses }) => {
             return (
               <div key={page} className="flex">
                 {ellipses && (

src/components/dashboard.tsx

@@ -1,4 +1,4 @@
-import type * as React from "react"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -20,7 +20,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
         className
       )}
       {...props}

src/components/pagination.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { XIcon } from "lucide-react"
-import type * as React from "react"
 
 import { cn } from "@/lib/utils"