feat: mobile, footer text, GH link, minor changes

package.json

@@ -20,6 +20,7 @@
     "@conform-to/react": "^1.13.2",
     "@conform-to/zod": "^1.13.2",
     "@hookform/resolvers": "^5.2.1",
+    "@icons-pack/react-simple-icons": "^13.8.0",
     "@next/bundle-analyzer": "^16.0.1",
     "@openapi-contrib/json-schema-to-openapi-schema": "^4.2.0",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -38,7 +39,7 @@
     "ajv": "^8.17.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.542.0",
+    "lucide-react": "^0.552.0",
     "nanoid": "^5.1.5",
     "next": "15.5.2",
     "next-themes": "^0.4.6",

src/components/dashboard.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { Search, Star } from "lucide-react"
+import { SiGithub as Github } from "@icons-pack/react-simple-icons"
+import { FileCodeCorner, Plus, Search, Star } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 import { useState } from "react"
@@ -37,7 +38,7 @@ import { CreateUrlDialog } from "./create-url-dialog"
 import { type EditDialogState, EditUrlDialog } from "./edit-url-dialog"
 import { PaginationControls } from "./pagination"
 import { Toggle } from "./ui/toggle"
-import { UrlRecordRow } from "./url-record-row"
+import { MobileRow, UrlRecordRow } from "./url-record-row"
 
 export function Dashboard() {
   const [searchInput, setSearchInput] = useState("")
@@ -119,11 +120,41 @@ export function Dashboard() {
           </p>
         </div>
         <div className="flex gap-4">
+          <a
+            href="https://github.com/PoliNetworkOrg/polinet.cc"
+            className="underline flex items-center gap-1"
+            title="https://github.com/PoliNetworkOrg/polinet.cc"
+            aria-label="tmsu.cc github repository by Tommaso Morganti"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Button size="icon-lg" variant="outline">
+              <Github />
+            </Button>
+          </a>
           <Link href="/api" target="_blank" rel="noopener noreferral">
-            <Button variant="outline">API Docs</Button>
+            <Button variant="outline" size="icon-lg" className="md:hidden">
+              <FileCodeCorner />
+            </Button>
+            <Button size="lg" variant="outline" className="max-md:hidden">
+              <FileCodeCorner />
+              <span>API Docs</span>
+            </Button>
           </Link>
-          <Button onClick={() => setCreateDialogOpen(true)}>
-            Create Short URL
+          <Button
+            size="icon-lg"
+            className="md:hidden"
+            onClick={() => setCreateDialogOpen(true)}
+          >
+            <Plus />
+          </Button>
+          <Button
+            size="lg"
+            className="max-md:hidden"
+            onClick={() => setCreateDialogOpen(true)}
+          >
+            <Plus />
+            <span>Create Short URL</span>
           </Button>
         </div>
       </div>
@@ -137,8 +168,8 @@ export function Dashboard() {
         </CardHeader>
         <CardContent className="space-y-4">
           {/* Filters */}
-          <div className="flex gap-4 items-center">
-            <div className="relative flex-1">
+          <div className="flex gap-4 items-center max-md:flex-col">
+            <div className="relative flex-1 max-md:w-full max-md:order-2">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
               <Input
                 placeholder="Search URLs or short codes..."
@@ -147,31 +178,35 @@ export function Dashboard() {
                 className="pl-9"
               />
             </div>
-            <Select value={currentSort} onValueChange={handleSortChange}>
-              <SelectTrigger className="w-[200px]">
-                <SelectValue placeholder="Sort by" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="created_at-desc">Newest First</SelectItem>
-                <SelectItem value="created_at-asc">Oldest First</SelectItem>
-                <SelectItem value="updated_at-desc">
-                  Recently Updated
-                </SelectItem>
-                <SelectItem value="click_count-desc">Most Clicks</SelectItem>
-                <SelectItem value="click_count-asc">Least Clicks</SelectItem>
-                <SelectItem value="short_code-asc">Short Code A-Z</SelectItem>
-                <SelectItem value="short_code-desc">Short Code Z-A</SelectItem>
-              </SelectContent>
-            </Select>
-            <Toggle
-              pressed={queryParams.customOnly}
-              onPressedChange={handleCustomOnlyToggle}
-              variant="outline"
-              className="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 className="flex gap-4 items-center justify-between max-md:w-full max-md:order-3">
+              <Select value={currentSort} onValueChange={handleSortChange}>
+                <SelectTrigger className="w-[170px] max-md:flex-1">
+                  <SelectValue placeholder="Sort by" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="created_at-desc">Newest First</SelectItem>
+                  <SelectItem value="created_at-asc">Oldest First</SelectItem>
+                  <SelectItem value="updated_at-desc">
+                    Recently Updated
+                  </SelectItem>
+                  <SelectItem value="click_count-desc">Most Clicks</SelectItem>
+                  <SelectItem value="click_count-asc">Least Clicks</SelectItem>
+                  <SelectItem value="short_code-asc">Short Code A-Z</SelectItem>
+                  <SelectItem value="short_code-desc">
+                    Short Code Z-A
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+              <Toggle
+                pressed={queryParams.customOnly}
+                onPressedChange={handleCustomOnlyToggle}
+                variant="outline"
+                className="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>
           </div>
 
           {/* Table */}
@@ -185,7 +220,20 @@ export function Dashboard() {
             </div>
           ) : (
             <>
-              <Table>
+              <div className="lg:hidden flex flex-col gap-4">
+                {urls.map((url: UrlRecord) => (
+                  <MobileRow
+                    key={url.id}
+                    url={url}
+                    onCopy={(url) =>
+                      copyToClipboard(`https://polinet.cc/${url.short_code}`)
+                    }
+                    onDelete={(url) => handleDelete(url.short_code)}
+                    onEdit={(url) => setEditDialog({ open: true, url })}
+                  />
+                ))}
+              </div>
+              <Table className="max-lg:hidden">
                 <TableHeader>
                   <TableRow>
                     <TableHead className="w-4">
@@ -225,6 +273,19 @@ export function Dashboard() {
           )}
         </CardContent>
       </Card>
+      <div className="flex text-center items-center justify-center gap-1">
+        <p className="text-muted-foreground text-sm">
+          Made with 💙 by{" "}
+          <a
+            href="https://polinetwork.org"
+            target="_blank"
+            rel="noreferrer noopener"
+            className="underline underline-offset-2"
+          >
+            PoliNetwork
+          </a>
+        </p>
+      </div>
 
       <CreateUrlDialog
         open={createDialogOpen}

src/components/pagination.tsx

@@ -35,14 +35,14 @@ export function PaginationControls(
   console.log(props.page, props.totalPages)
 
   return (
-    <div className="flex items-center justify-between">
-      <div className="flex flex-[1_0_auto] items-center gap-4">
+    <div className="flex items-center justify-between max-md:flex-col gap-2">
+      <div className="flex flex-[1_0_auto] items-center gap-4 max-md:order-2">
         <p className="text-sm text-muted-foreground">
           Showing {(props.page - 1) * limit + 1} to{" "}
           {Math.min(props.page * limit, props.total)} of {props.total} results
         </p>
       </div>
-      <Pagination>
+      <Pagination className="max-md:order-1">
         <PaginationContent>
           <PaginationItem>
             <PaginationPrevious
@@ -94,7 +94,7 @@ export function PaginationControls(
           </PaginationItem>
         </PaginationContent>
       </Pagination>
-      <div className="flex flex-[1_0_auto] items-center gap-2">
+      <div className="flex flex-[1_0_auto] items-center gap-2 max-md:order-3">
         <span className="text-sm text-muted-foreground">Items per page:</span>
         <Select value={limit.toString()} onValueChange={handleLimitChange}>
           <SelectTrigger className="w-[70px] h-8">

src/components/url-record-row.tsx

@@ -1,4 +1,12 @@
-import { Copy, Diamond, Edit, Star, Trash2 } from "lucide-react"
+import {
+  ArrowRight,
+  Copy,
+  Diamond,
+  Edit,
+  Pointer,
+  Star,
+  Trash2,
+} from "lucide-react"
 import type { UrlRecord } from "@/lib/schemas"
 import { copyToClipboard } from "@/lib/utils"
 import { Button } from "./ui/button"
@@ -11,9 +19,74 @@ export type UrlRecordRowProps = {
   onEdit: (url: UrlRecord) => void
 }
 
+export function MobileRow({
+  url,
+  onCopy,
+  onDelete,
+  onEdit,
+}: UrlRecordRowProps) {
+  return (
+    <div className="flex flex-col gap-1 border rounded-md py-2 px-4">
+      <div className="flex justify-start gap-2 items-center">
+        {url.is_custom ? (
+          <Star className="h-4 w-4 fill-yellow-400 stroke-yellow-400" />
+        ) : (
+          <Diamond className="h-4 w-4 fill-gray-400 stroke-gray-400" />
+        )}
+
+        <a
+          href={`https://polinet.cc/${url.short_code}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-blue-400 hover:underline font-mono"
+        >
+          polinet.cc/{url.short_code}
+        </a>
+        <Button variant="ghost" size="icon" onClick={() => onCopy(url)}>
+          <Copy />
+        </Button>
+      </div>
+      <div className="flex justify-start gap-2 items-center">
+        <ArrowRight className="text-blue-400" />
+        <a
+          href={url.original_url}
+          className="text-blue-400 hover:underline font-mono truncate"
+          title={url.original_url}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {url.original_url}
+        </a>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => copyToClipboard(url.original_url)}
+        >
+          <Copy />
+        </Button>
+      </div>
+      <div className="flex justify-end gap-2 items-center py-1">
+        <Pointer className="h-3 w-3 text-muted-foreground" />
+        <span className="text-sm">{url.click_count}</span>
+        <div className="flex-1" />
+        <span className="text-sm text-muted-foreground">
+          {url.created_at.toLocaleString()}
+        </span>
+
+        <Button variant="ghost" size="icon" onClick={() => onEdit(url)}>
+          <Edit />
+        </Button>
+        <Button variant="ghost" size="icon" onClick={() => onDelete(url)}>
+          <Trash2 className="stroke-destructive" />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
 export function UrlRecordRow({ url, ...props }: UrlRecordRowProps) {
   return (
-    <TableRow key={url.id}>
+    <TableRow key={url.id} className="max-sm:hidden">
       <TableCell>
         {url.is_custom ? (
           <Star className="h-4 w-4 fill-yellow-400 stroke-yellow-400" />