From 32c1be3d75214fdccbb65ff6e644ac61c3c26fd1 Mon Sep 17 00:00:00 2001 From: Nezumi-2711 Date: Thu, 27 Aug 2026 21:40:05 +0700 Subject: [PATCH] feat: migrate icon on app using lib --- bun.lock | 3 +++ package.json | 1 + src/client/components/RequireAuth.tsx | 4 +-- src/client/components/icons.tsx | 36 --------------------------- src/client/pages/DashboardPage.tsx | 12 ++++----- src/client/pages/LoginPage.tsx | 4 +-- 6 files changed, 14 insertions(+), 46 deletions(-) delete mode 100644 src/client/components/icons.tsx diff --git a/bun.lock b/bun.lock index 292a419..8b7484c 100644 --- a/bun.lock +++ b/bun.lock @@ -8,6 +8,7 @@ "@tanstack/react-query": "^5.102.7", "drizzle-orm": "^0.45.2", "hono": "^4.13.5", + "lucide-react": "^1.34.0", "react": "19", "react-dom": "19", }, @@ -357,6 +358,8 @@ "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.33.0", "", { "os": "win32", "cpu": "x64" }, "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA=="], + "lucide-react": ["lucide-react@1.34.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-vnjGJNI7Htk5+oWW8gXGuaLgwgAb0T6/iZbBrp9JCfRFwdNWZ0YTm3eyxjOLgwN6r8iyAf3UA70zNmBRBNv7yg=="], + "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="], "miniflare": ["miniflare@5.20260826.0-alpha", "", { "dependencies": { "@cspotcode/source-map-support": "0.8.1", "sharp": "0.35.2", "undici": "7.29.0", "workerd": "1.20260826.1", "ws": "8.21.0", "youch": "4.1.0-beta.10" } }, "sha512-ZXR3Bieg+B5MK0T/zYIWaZiCGCb9Z3en4+/TleYKhIGPLx/e0cRcG/ZvvTviUapVBBK2zODB+aiypdIojU3x6Q=="], diff --git a/package.json b/package.json index 3dcbee7..0e56e7f 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "@tanstack/react-query": "^5.102.7", "drizzle-orm": "^0.45.2", "hono": "^4.13.5", + "lucide-react": "^1.34.0", "react": "19", "react-dom": "19" }, diff --git a/src/client/components/RequireAuth.tsx b/src/client/components/RequireAuth.tsx index fbd165a..4ef6f8e 100644 --- a/src/client/components/RequireAuth.tsx +++ b/src/client/components/RequireAuth.tsx @@ -1,12 +1,12 @@ import { type ReactNode, useEffect } from "react"; -import { LogoMark } from "./icons"; +import { Zap } from "lucide-react"; import { navigate } from "../lib/router"; import { useSessionQuery } from "../queries/auth"; function FullPageLoading() { return (
- +

Checking session…

); diff --git a/src/client/components/icons.tsx b/src/client/components/icons.tsx deleted file mode 100644 index 31b3375..0000000 --- a/src/client/components/icons.tsx +++ /dev/null @@ -1,36 +0,0 @@ -type IconProps = { - className?: string; -}; - -export function LogoMark({ className }: IconProps) { - return ( - - ); -} - -export function ArrowIcon({ className }: IconProps) { - return ( - - ); -} - -export function RefreshIcon({ className }: IconProps) { - return ( - - ); -} - -export function DatabaseIcon({ className }: IconProps) { - return ( - - ); -} diff --git a/src/client/pages/DashboardPage.tsx b/src/client/pages/DashboardPage.tsx index d6d39b0..e1cbbee 100644 --- a/src/client/pages/DashboardPage.tsx +++ b/src/client/pages/DashboardPage.tsx @@ -1,6 +1,6 @@ import { type FormEvent, useState } from "react"; +import { ArrowRight, Database, RefreshCw, Zap } from "lucide-react"; import type { Monitor, MonitorInput, MonitorMethod } from "../api/monitors"; -import { ArrowIcon, DatabaseIcon, LogoMark, RefreshIcon } from "../components/icons"; import { useLogoutMutation } from "../queries/auth"; import { useCreateMonitorMutation, @@ -101,7 +101,7 @@ export function DashboardPage() {
- + upwatch
@@ -124,7 +124,7 @@ export function DashboardPage() { ) : monitorsQuery.isSuccess && monitors.length > 0 ? ( ) : null} @@ -162,7 +162,7 @@ export function DashboardPage() {

Configured sites

Latest result for each monitored endpoint.

@@ -171,7 +171,7 @@ export function DashboardPage() { ) : monitorsQuery.isError ? (
Monitors could not be loaded

{errorMessage(monitorsQuery.error, "Unknown request error")}

) : monitors.length === 0 ? ( -
No monitors yet

Add the first endpoint to start collecting availability checks.

{!formOpen && }
+
No monitors yet

Add the first endpoint to start collecting availability checks.

{!formOpen && }
) : (
MonitorLatest resultActions
@@ -182,7 +182,7 @@ export function DashboardPage() { const toggling = updateMutation.isPending && updateMutation.variables?.id === monitor.id; return (
-
{monitor.name}{monitor.url}{monitor.method} · expect {monitor.expectedStatus} · every {monitor.intervalSeconds / 60}m
+
{monitor.name}{monitor.url}{monitor.method} · expect {monitor.expectedStatus} · every {monitor.intervalSeconds / 60}m
{checking ? "Checking" : status.label}{monitor.lastStatusCode === null ? "—" : `HTTP ${monitor.lastStatusCode}`} · {monitor.lastLatencyMs === null ? "—" : `${monitor.lastLatencyMs} ms`}{monitor.lastError ?? formatCheckedAt(monitor.lastCheckedAt)}
diff --git a/src/client/pages/LoginPage.tsx b/src/client/pages/LoginPage.tsx index 3f916f7..60e9d71 100644 --- a/src/client/pages/LoginPage.tsx +++ b/src/client/pages/LoginPage.tsx @@ -1,5 +1,5 @@ import { type FormEvent, useEffect, useState } from "react"; -import { LogoMark } from "../components/icons"; +import { Zap } from "lucide-react"; import { navigate } from "../lib/router"; import { useLoginMutation, useSessionQuery } from "../queries/auth"; @@ -27,7 +27,7 @@ export function LoginPage() { return (
- + upwatch