From 640b05a73e9ef42e42aacb71c777534cf648f731 Mon Sep 17 00:00:00 2001
From: Anthony Saah <thepapisogram@gmail.com>
Date: Tue, 24 Jun 2025 03:00:26 +0000
Subject: [PATCH] Added load recent logs btn

added button to load recent logs
---
 app/components/filter.tsx | 77 ++++++++++++++++++++++-----------------
 uno.config.ts             | 10 ++---
 2 files changed, 48 insertions(+), 39 deletions(-)

diff --git a/app/components/filter.tsx b/app/components/filter.tsx
index 90ed57b..6cfe2df 100644
--- a/app/components/filter.tsx
+++ b/app/components/filter.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { Input } from "./input";
 import { Select } from "./select";
 import { useSearchParams } from "react-router-dom";
+import { Button } from "./button";
 
 interface FilterForm {
 	query: string;
@@ -52,39 +53,47 @@ export function Filter({ onFilterChange }: FilterProps) {
 	}, [watch, onFilterChange]);
 
 	return (
-		<div className="flex gap-2 items-center border-t px-2 py-4 dark:border-neutral-700">
-			<Input
-				className="font-mono py-2"
-				placeholder="{ }"
-				{...register("query")}
-			/>
-			<div className="flex items-center border rounded-lg divide-x dark:border-neutral-700">
-				<Select
-					className="py-2 rounded-e-0 border-0 font-mono !w-6rem"
-					{...register("timeRange")}
-				>
-					<option value="45d">45d</option>
-					<option value="48h">48h</option>
-				</Select>
+    <div className="flex gap-2 items-center border-t px-2 py-4 dark:border-neutral-700">
+      <Button
+        className="font-mono py-2 min-w-max"
+        onClick={() =>
+          onFilterChange({ query: "", timeRange: "48h", maxDate: undefined })
+        }
+      >
+        Load recent logs
+      </Button>
+      <Input
+        className="font-mono py-2"
+        placeholder="{ }"
+        {...register("query")}
+      />
+      <div className="flex items-center border rounded-lg divide-x dark:border-neutral-700">
+        <Select
+          className="py-2 rounded-e-0 border-0 font-mono !w-6rem"
+          {...register("timeRange")}
+        >
+          <option value="45d">45d</option>
+          <option value="48h">48h</option>
+        </Select>
 
-				<Controller
-					control={control}
-					name="maxDate"
-					render={({ field: { value, onChange, ...fieldProps } }) => (
-						<Input
-							type="date"
-							className="py-2 rounded-s-0 border-0 font-mono"
-							max={format(defaultMaxDate, "yyyy-MM-dd")}
-							value={value ? format(value, "yyyy-MM-dd") : ""}
-							onChange={(e) => {
-								const val = e.target.value;
-								onChange(val ? parse(val, "yyyy-MM-dd", new Date()) : null);
-							}}
-							{...fieldProps}
-						/>
-					)}
-				/>
-			</div>
-		</div>
-	);
+        <Controller
+          control={control}
+          name="maxDate"
+          render={({ field: { value, onChange, ...fieldProps } }) => (
+            <Input
+              type="date"
+              className="py-2 rounded-s-0 border-0 font-mono"
+              max={format(defaultMaxDate, "yyyy-MM-dd")}
+              value={value ? format(value, "yyyy-MM-dd") : ""}
+              onChange={(e) => {
+                const val = e.target.value;
+                onChange(val ? parse(val, "yyyy-MM-dd", new Date()) : null);
+              }}
+              {...fieldProps}
+            />
+          )}
+        />
+      </div>
+    </div>
+  );
 }
diff --git a/uno.config.ts b/uno.config.ts
index 14ad68f..d44082c 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -8,9 +8,9 @@ import {
 } from "unocss";
 
 export default defineConfig({
-	content: {
-		filesystem: ["**/*.{html,js,ts,jsx,tsx,vue,svelte,astro}"],
-	},
-	presets: [presetWind3({ dark: "media" }), presetIcons(), presetForms()],
-	transformers: [transformerDirectives(), transformerVariantGroup()],
+  content: {
+    filesystem: ["app/**/*.{html,js,ts,tsx}"],
+  },
+  presets: [presetWind3({ dark: "media" }), presetIcons(), presetForms()],
+  transformers: [transformerDirectives(), transformerVariantGroup()],
 });