From 5e6bc93a6a12bffda9ed1fbdc724328ec1eb5ee6 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Thu, 4 Jun 2026 15:45:31 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20SPA=20quick=20wins=20=E2=80=94=20refres?=
 =?UTF-8?q?h,=20back=20nav,=20watchlist=20add,=20dates,=20haptics,=20expor?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- feed refresh button with spinning icon
- BackButton component using history.back()
- watchlist bookmark icon on search results
- timeAgo/shortDate date formatting (date-fns)
- haptic feedback on star rating, swipe-to-delete, review log
- global error toasts via QueryClient mutation defaults
- diary CSV export button
---
 spa/src/routes/_app/diary.tsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/spa/src/routes/_app/diary.tsx b/spa/src/routes/_app/diary.tsx
index 99d66e6..9773307 100644
--- a/spa/src/routes/_app/diary.tsx
+++ b/spa/src/routes/_app/diary.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router"
 import { useCallback, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { BookOpen, ChevronLeft, ChevronRight } from "lucide-react"
+import { BookOpen, ChevronLeft, ChevronRight, Download } from "lucide-react"
 import { format, startOfMonth, subMonths } from "date-fns"
 import { MovieCard } from "@/components/movie-card"
 import { EmptyState } from "@/components/empty-state"
@@ -10,6 +10,8 @@ import { VirtualList } from "@/components/virtual-list"
 import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
 import { useInfiniteDiary, useDeleteReview } from "@/hooks/use-diary"
+import { API_URL } from "@/lib/api/client"
+import { getToken } from "@/lib/auth"
 import type { DiaryEntryDto } from "@/lib/api/common"
 
 export const Route = createFileRoute("/_app/diary")({
@@ -75,6 +77,25 @@ function DiaryPage() {
     <div className="space-y-4 p-4">
       <div className="flex items-center justify-between">
         <h1 className="text-lg font-bold">{t("diary.title")}</h1>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8"
+          onClick={async () => {
+            const res = await fetch(`${API_URL}/api/v1/diary/export?format=csv`, {
+              headers: { Authorization: `Bearer ${getToken()}` },
+            })
+            const blob = await res.blob()
+            const url = URL.createObjectURL(blob)
+            const a = document.createElement("a")
+            a.href = url
+            a.download = "diary.csv"
+            a.click()
+            URL.revokeObjectURL(url)
+          }}
+        >
+          <Download className="size-4" />
+        </Button>
       </div>
 
       <div className="flex items-center justify-between rounded-xl bg-card px-3 py-2">