chore: refactor button and input components for better readability

src/routes/(manage)/manage/app/monitoring-data/+page.svelte

@@ -67,7 +67,11 @@
   let endDateTime = $state(formatDateTimeForInput(now));
   const limit = 50;
 
-  const hasActiveFilters = $derived(monitorTagFilter !== "ALL" || startDateTime !== formatDateTimeForInput(yesterday) || endDateTime !== formatDateTimeForInput(now));
+  const hasActiveFilters = $derived(
+    monitorTagFilter !== "ALL" ||
+      startDateTime !== formatDateTimeForInput(yesterday) ||
+      endDateTime !== formatDateTimeForInput(now)
+  );
 
   // Convert datetime string (YYYY-MM-DDTHH:mm) to Unix timestamp (seconds)
   function dateTimeStringToTimestamp(dateTimeStr: string): number {
@@ -205,11 +209,7 @@
 <div class="container mx-auto space-y-6 py-6">
   <div class="flex flex-col gap-3">
     <div class="flex items-center gap-2">
-      <Button
-        variant={showFilters ? "default" : "outline"}
-        size="sm"
-        onclick={() => (showFilters = !showFilters)}
-      >
+      <Button variant={showFilters ? "default" : "outline"} size="sm" onclick={() => (showFilters = !showFilters)}>
         <FilterIcon class="size-4" />
         Filters
         {#if hasActiveFilters}

src/routes/(manage)/manage/app/monitors/+page.svelte

@@ -102,11 +102,7 @@
   <div class="mb-4 flex flex-col gap-3">
     <div class="flex items-center justify-between gap-3">
       <div class="flex items-center gap-2">
-        <Button
-          variant={showFilters ? "default" : "outline"}
-          size="sm"
-          onclick={() => (showFilters = !showFilters)}
-        >
+        <Button variant={showFilters ? "default" : "outline"} size="sm" onclick={() => (showFilters = !showFilters)}>
           <FilterIcon class="size-4" />
           Filters
           {#if hasActiveFilters}
@@ -127,16 +123,17 @@
       <div class="bg-muted/50 flex flex-wrap items-end gap-3 rounded-lg border p-3">
         <div class="flex flex-col gap-1">
           <span class="text-muted-foreground text-xs font-medium">Search</span>
-          <Input
-            type="text"
-            placeholder="Search by name or tag..."
-            bind:value={searchQuery}
-            class="w-60"
-          />
+          <Input type="text" placeholder="Search by name or tag..." bind:value={searchQuery} class="w-60" />
         </div>
         <div class="flex flex-col gap-1">
           <span class="text-muted-foreground text-xs font-medium">Status</span>
-          <Select.Root type="single" value={statusFilter} onValueChange={(v) => { if (v) statusFilter = v; }}>
+          <Select.Root
+            type="single"
+            value={statusFilter}
+            onValueChange={(v) => {
+              if (v) statusFilter = v;
+            }}
+          >
             <Select.Trigger class="w-40">
               {statusOptions.find((o) => o.value === statusFilter)?.label || "All Status"}
             </Select.Trigger>