- {services.map((service) => {
- const serviceMetrics = metrics[service.monitorName || service.name] || {
- status: 'pending',
- responseTime: 0,
- certDaysRemaining: 0
- }
+
)
}
@@ -195,7 +249,98 @@ function ServiceSection({ section, services, metrics }: {
function App() {
const { metrics } = useMetrics()
const { config, error } = useConfig()
- const { services, sections } = config
+ const { services } = config
+ const [searchQuery, setSearchQuery] = useState('')
+ const [sortBy, setSortBy] = useState
('name')
+ const [selectedTags, setSelectedTags] = useState([])
+ const searchInputRef = useRef(null)
+ const { setTheme } = useTheme()
+
+ // Force system mode on initial load
+ useEffect(() => {
+ setTheme('system')
+ }, [])
+
+ // Focus search input on mount
+ useEffect(() => {
+ searchInputRef.current?.focus()
+ }, [])
+
+ // Handle enter key in search
+ const handleSearchKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' && filteredAndSortedServices.length > 0) {
+ const firstService = filteredAndSortedServices[0]
+ window.open(firstService.url, '_blank', 'noopener,noreferrer')
+ }
+ }
+
+ // Get unique tags from all services
+ const availableTags = useMemo(() => {
+ if (!services) return []
+ const tags = new Set()
+ services.forEach(service => {
+ // Add the category as a tag for backward compatibility
+ tags.add(service.category)
+ // Add any additional tags
+ service.tags?.forEach(tag => tags.add(tag))
+ })
+ return Array.from(tags).sort()
+ }, [services])
+
+ const filteredAndSortedServices = useMemo(() => {
+ if (!services) return []
+
+ let filtered = services.filter(service => {
+ const matchesSearch =
+ service.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ service.description.toLowerCase().includes(searchQuery.toLowerCase())
+
+ const matchesTags = selectedTags.length === 0 || (
+ selectedTags.some(tag =>
+ service.category === tag || // Check category for backward compatibility
+ service.tags?.includes(tag) // Check additional tags
+ )
+ )
+
+ return matchesSearch && matchesTags
+ })
+
+ return filtered.sort((a, b) => {
+ const metricsA = metrics[a.monitorName || a.name] || { status: 'pending', responseTime: 0 }
+ const metricsB = metrics[b.monitorName || b.name] || { status: 'pending', responseTime: 0 }
+
+ switch (sortBy) {
+ case 'name':
+ return a.name.localeCompare(b.name)
+ case 'status':
+ // Sort by status: up > maintenance > pending > down
+ const statusOrder = { up: 0, maintenance: 1, pending: 2, down: 3 }
+ const statusA = statusOrder[metricsA.status] ?? 4 // Unknown status goes last
+ const statusB = statusOrder[metricsB.status] ?? 4
+ return statusA - statusB || metricsA.responseTime - metricsB.responseTime // Use response time as secondary sort
+ case 'response-time':
+ // Put services with no response time (0 or undefined) at the end
+ const rtA = metricsA.responseTime || Number.MAX_SAFE_INTEGER
+ const rtB = metricsB.responseTime || Number.MAX_SAFE_INTEGER
+ return rtA - rtB || a.name.localeCompare(b.name) // Use name as secondary sort
+ case 'primary-tag':
+ // Get primary tag (first tag or category)
+ const tagA = a.tags?.[0] || a.category
+ const tagB = b.tags?.[0] || b.category
+ return tagA.localeCompare(tagB)
+ default:
+ return 0
+ }
+ })
+ }, [services, searchQuery, sortBy, metrics, selectedTags])
+
+ const toggleTag = (tag: string) => {
+ setSelectedTags(prev =>
+ prev.includes(tag)
+ ? [] // If clicking the selected tag, clear selection
+ : [tag] // Otherwise, replace any existing selection with the new tag
+ )
+ }
return (
@@ -214,22 +359,65 @@ function App() {
)}
- {sections?.length > 0 ? (
- <>
- {sections.map((section: Section) => {
- const sectionServices = services.filter((s: { category: string }) => s.category === section.id)
- if (sectionServices.length === 0) return null
-
- return (
-
- )
- })}
-
+
+
+
+
+ setSearchQuery(e.target.value)}
+ onKeyDown={handleSearchKeyDown}
+ className="pl-8 pr-8 bg-gray-50 dark:bg-gray-950/30 max-w-md"
+ />
+ {searchQuery && (
+
+ )}
+
+
+
+
+
+
+
+ {availableTags.map(tag => (
+ toggleTag(tag)}
+ className="gap-1 cursor-pointer bg-gray-50 dark:bg-gray-950/30"
+ >
+ {config.tags?.[tag] || tag}
+ {selectedTags.includes(tag) && }
+
+ ))}
+
+
+
+ {services?.length > 0 ? (
+
) : !error && (
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..e87d62b
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+ "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+ secondary:
+ "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ destructive:
+ "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+ outline: "text-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+export interface BadgeProps
+ extends React.HTMLAttributes,
+ VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return (
+
+ )
+}
+
+export { Badge, badgeVariants }
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..69b64fb
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef>(
+ ({ className, type, ...props }, ref) => {
+ return (
+
+ )
+ }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..a84242c
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,157 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+ span]:line-clamp-1",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+))
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+
+ {children}
+
+
+
+
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+ Select,
+ SelectGroup,
+ SelectValue,
+ SelectTrigger,
+ SelectContent,
+ SelectLabel,
+ SelectItem,
+ SelectSeparator,
+ SelectScrollUpButton,
+ SelectScrollDownButton,
+}
diff --git a/src/index.css b/src/index.css
index 92c8440..c69a9da 100644
--- a/src/index.css
+++ b/src/index.css
@@ -73,7 +73,7 @@ button:focus-visible {
@layer base {
:root {
- --background: 210 20% 96%;
+ --background: 220 13% 91%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
@@ -89,15 +89,15 @@ button:focus-visible {
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
- --border: 214.3 31.8% 91.4%;
+ --border: 216 12.2% 83.9%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
.dark {
- --background: 222.2 84% 4.9%;
- --foreground: 210 40% 98%;
- --card: 222.2 84% 4.9%;
+ --background: 215 27.9% 16.9%;
+ --foreground: 220 14.3% 95.9%;
+ --card: 220.9 39.3% 11%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
@@ -111,7 +111,7 @@ button:focus-visible {
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
- --border: 217.2 32.6% 17.5%;
+ --border: 215 13.8% 34.1%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
diff --git a/src/main.tsx b/src/main.tsx
index 889c719..f1162b6 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -6,7 +6,7 @@ import { ThemeProvider } from './components/theme-provider'
ReactDOM.createRoot(document.getElementById('root')!).render(
-
+
,
diff --git a/src/types/services.ts b/src/types/services.ts
index 1bcedfc..fda7200 100644
--- a/src/types/services.ts
+++ b/src/types/services.ts
@@ -21,6 +21,7 @@ export interface ServiceCard {
icon?: ReactNode
iconName?: string
category: CategoryId
+ tags?: string[]
monitorName?: string
cardStyle?: CardStyle
}
@@ -28,4 +29,5 @@ export interface ServiceCard {
export interface Config {
sections: Section[]
services: ServiceCard[]
+ tags?: { [key: string]: string }
}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index f0c1cab..3e3ba15 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,14 +7,14 @@ export default {
],
safelist: [
{
- pattern: /^bg-(blue|gray|green|red|yellow|purple|pink|indigo|orange)-(50|100|200|300|400|500|600|700|800|900|950)/,
- variants: ['hover', 'dark']
+ pattern: /^bg-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/,
+ variants: ['hover', 'dark']
},
{
- pattern: /^text-(blue|gray|green|red|yellow|purple|pink|indigo|orange)-(50|100|200|300|400|500|600|700|800|900|950)/,
- variants: ['dark']
+ pattern: /^text-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/,
+ variants: ['dark']
}
- ],
+ ],
theme: {
container: {
center: true,