railwatch 0.6.0 → 0.7.0

data/app/frontend/components/railwatch/env-nav.tsx

@@ -0,0 +1,130 @@
+import { Link, usePage } from "@inertiajs/react"
+import { Bookmark, ChevronRight } from "lucide-react"
+import { useState } from "react"
+
+import { isViewActive, samePage } from "@/components/railwatch/saved-views"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/components/ui/sidebar"
+import { ENV_PAGE_GROUPS, envPages } from "@/lib/env-pages"
+import { cn } from "@/lib/utils"
+import type { SharedProps } from "@/types"
+
+// Environment navigation in the sidebar: Overview at the top, then one
+// collapsible section per page group (Activity, Monitoring, Settings). The
+// section containing the current page starts open; the others start
+// closed so the list stays short.
+export function EnvNav() {
+  const page = usePage<SharedProps>()
+  const { environment } = page.props
+  const current = page.url.split("?")[0]
+  const [openOverride, setOpenOverride] = useState<
+    Record<string, boolean | undefined>
+  >({})
+  if (!environment) return null
+
+  const items = envPages(
+    environment.application_id,
+    environment.id,
+    page.props.window as string,
+  )
+  const pinnedViews = (page.props.saved_views ?? []).filter((v) => v.pinned)
+  const isCurrent = (href: string) => {
+    const path = href.split("?")[0]
+    return current === path || current.startsWith(path + "/")
+  }
+  const overview = items[0]
+
+  return (
+    <SidebarGroup className="p-0">
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton
+            asChild
+            isActive={current === overview.href.split("?")[0]}
+            tooltip={{ children: overview.title }}
+          >
+            <Link href={overview.href} prefetch>
+              {overview.icon && <overview.icon />}
+              <span>{overview.title}</span>
+            </Link>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+        {ENV_PAGE_GROUPS.map((group) => {
+          const groupItems = items.filter(
+            (i) => i.group === group.key && i !== overview,
+          )
+          const containsCurrent = groupItems.some((i) => isCurrent(i.href))
+          const open = openOverride[group.key] ?? containsCurrent
+          const GroupIcon = groupItems[0]?.icon
+          return (
+            <Collapsible
+              key={group.key}
+              open={open}
+              onOpenChange={(v) =>
+                setOpenOverride((o) => ({ ...o, [group.key]: v }))
+              }
+              className="group/collapsible"
+            >
+              <SidebarMenuItem>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuButton
+                    tooltip={{ children: group.title }}
+                    className={cn(containsCurrent && "text-sidebar-foreground")}
+                  >
+                    {GroupIcon && <GroupIcon />}
+                    <span>{group.title}</span>
+                    <ChevronRight className="ml-auto size-3.5 opacity-60 transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                  </SidebarMenuButton>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <SidebarMenuSub className="mr-0 gap-0.5 pr-0">
+                    {groupItems.map((item) => (
+                      <SidebarMenuSubItem key={item.title}>
+                        <SidebarMenuSubButton
+                          asChild
+                          isActive={isCurrent(item.href)}
+                        >
+                          <Link href={item.href} prefetch>
+                            <span>{item.title}</span>
+                          </Link>
+                        </SidebarMenuSubButton>
+                        {pinnedViews
+                          .filter((view) => samePage(view.url, item.href))
+                          .map((view) => (
+                            <SidebarMenuSubButton
+                              key={view.id}
+                              asChild
+                              size="sm"
+                              className="pl-4"
+                              isActive={isViewActive(page.url, view.url)}
+                            >
+                              <Link href={view.url}>
+                                <Bookmark className="opacity-60" />
+                                <span>{view.name}</span>
+                              </Link>
+                            </SidebarMenuSubButton>
+                          ))}
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          )
+        })}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}

data/app/frontend/components/railwatch/env-switcher.tsx

@@ -0,0 +1,145 @@
+import { Link, router, usePage } from "@inertiajs/react"
+import { Check, ChevronsUpDown, Plus } from "lucide-react"
+
+import { LiveDot } from "@/components/railwatch/live-dot"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+import { cn } from "@/lib/utils"
+import {
+  applicationEnvironmentOverviewPath,
+  newApplicationPath,
+} from "@/routes"
+import type { SharedProps } from "@/types"
+
+function Monogram({ name, className }: { name: string; className?: string }) {
+  return (
+    <span
+      className={cn(
+        "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-md font-mono text-xs font-semibold",
+        className,
+      )}
+    >
+      {name.slice(0, 2).toUpperCase()}
+    </span>
+  )
+}
+
+// Application · environment switcher at the top of the sidebar. Mirrors the
+// Nightwatch app card: monogram, application name, environment name, and
+// a dropdown listing every environment across the account's applications.
+export function EnvSwitcher() {
+  const { applications, environment, embedded } = usePage<SharedProps>().props
+  if (applications.length === 0) return null
+  // Account-level pages (dashboard, issues) have no environment; fall back to
+  // the first application so the card still names something real.
+  const currentApp =
+    applications.find((a) => a.id === environment?.application_id) ??
+    applications[0]
+  // Embedded: one application, one environment, nothing to switch to. The
+  // card stays as a header (which app, which environment) with no menu.
+  if (embedded) {
+    const env = environment ?? currentApp.environments[0]
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton
+            size="lg"
+            asChild
+            className="border-0 py-2 pr-3 pl-2 hover:bg-transparent"
+          >
+            <Link
+              href={applicationEnvironmentOverviewPath(currentApp.id, env.id)}
+              prefetch
+            >
+              <Monogram name={currentApp.name} />
+              <span className="grid flex-1 text-left leading-tight">
+                <span className="truncate text-sm font-semibold">
+                  {currentApp.name}
+                </span>
+                <span className="text-muted-foreground truncate text-xs">
+                  {env.name}
+                </span>
+              </span>
+            </Link>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    )
+  }
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent hover:bg-sidebar-accent border-0 py-2 pr-3 pl-2"
+            >
+              <Monogram name={currentApp.name} />
+              <span className="grid flex-1 text-left leading-tight">
+                <span className="truncate text-sm font-semibold">
+                  {currentApp.name}
+                </span>
+                <span className="text-muted-foreground truncate text-xs">
+                  {environment
+                    ? environment.name
+                    : `${currentApp.environments.length} environment${currentApp.environments.length === 1 ? "" : "s"}`}
+                </span>
+              </span>
+              <ChevronsUpDown className="size-3.5 opacity-60" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="start"
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-64"
+          >
+            {applications.map((app) => (
+              <div key={app.id}>
+                <DropdownMenuLabel className="label-caps">
+                  {app.name}
+                </DropdownMenuLabel>
+                {app.environments.map((env) => (
+                  <DropdownMenuItem
+                    key={env.id}
+                    onSelect={() =>
+                      router.visit(
+                        applicationEnvironmentOverviewPath(app.id, env.id),
+                      )
+                    }
+                  >
+                    <LiveDot
+                      lastSeenAt={env.paused ? null : env.last_seen_at}
+                      thresholdMs={10 * 60 * 1000}
+                    />
+                    <span className="flex-1">{env.name}</span>
+                    {env.id === environment?.id && (
+                      <Check className="size-3.5" />
+                    )}
+                  </DropdownMenuItem>
+                ))}
+              </div>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={() => router.visit(newApplicationPath())}
+            >
+              <Plus className="size-3.5" />
+              Add application
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

data/app/frontend/components/railwatch/filter-bar.tsx

@@ -0,0 +1,153 @@
+import { Filter as FilterIcon, Search, X } from "lucide-react"
+import { useState } from "react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { parseFilter, serializeFilter } from "@/lib/filter"
+
+export interface FilterField {
+  key: string
+  label: string
+  options?: string[]
+}
+
+// key:value key2:value2 free text query bar: chips for parsed field tokens,
+// a raw-text input for typing (Enter/blur commits), and a field/option
+// autocomplete popover. Full width on phones, a search-box on desktop.
+export function FilterBar({
+  value,
+  fields,
+  onChange,
+  placeholder = "Filter...",
+}: {
+  value: string
+  fields: FilterField[]
+  onChange: (query: string) => void
+  placeholder?: string
+}) {
+  const [draft, setDraft] = useState(value)
+  const [open, setOpen] = useState(false)
+  // Re-sync the draft when `value` changes from outside (e.g. a chip removal
+  // round-tripping through the server, or browser back/forward) without an
+  // effect: https://react.dev/learn/you-might-not-need-an-effect
+  const [syncedValue, setSyncedValue] = useState(value)
+  if (value !== syncedValue) {
+    setSyncedValue(value)
+    setDraft(value)
+  }
+  const parsed = parseFilter(value)
+
+  const removeField = (key: string) => {
+    const next = { ...parsed.fields }
+    delete next[key]
+    const q = serializeFilter({ text: parsed.text, fields: next })
+    setDraft(q)
+    onChange(q)
+  }
+
+  const applyToken = (key: string, val: string) => {
+    const q = serializeFilter({
+      text: parsed.text,
+      fields: { ...parsed.fields, [key]: val },
+    })
+    setDraft(q)
+    onChange(q)
+    setOpen(false)
+  }
+
+  const startToken = (key: string) => {
+    setDraft((d) => `${d}${d && !d.endsWith(" ") ? " " : ""}${key}:`)
+    setOpen(false)
+  }
+
+  const commit = () => onChange(draft)
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <div className="bg-card focus-within:border-ring flex h-8 min-w-0 flex-1 items-center gap-1.5 rounded-md border px-2 md:max-w-md md:flex-none md:basis-80">
+        <Search className="text-muted-foreground size-3.5 shrink-0" />
+        {Object.entries(parsed.fields).map(([key, val]) => (
+          <Badge
+            key={key}
+            variant="secondary"
+            className="shrink-0 gap-1 rounded-sm px-1.5 font-mono text-[10px]"
+          >
+            {key}:{val}
+            <button
+              type="button"
+              onClick={() => removeField(key)}
+              className="hover:text-destructive"
+              aria-label={`Remove ${key} filter`}
+            >
+              <X className="size-3" />
+            </button>
+          </Badge>
+        ))}
+        <input
+          data-filter-bar-input
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && commit()}
+          onBlur={commit}
+          placeholder={placeholder}
+          className="placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent font-mono text-xs outline-none"
+        />
+        <kbd className="bg-muted text-muted-foreground hidden rounded px-1 font-mono text-[10px] md:inline">
+          /
+        </kbd>
+      </div>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="h-8 px-2"
+            aria-label="Add filter"
+          >
+            <FilterIcon className="size-3.5" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-56 p-0" align="start">
+          <Command>
+            <CommandList>
+              <CommandEmpty>No fields.</CommandEmpty>
+              {fields.map((f) =>
+                f.options ? (
+                  <CommandGroup key={f.key} heading={f.label}>
+                    {f.options.map((opt) => (
+                      <CommandItem
+                        key={opt}
+                        onSelect={() => applyToken(f.key, opt)}
+                      >
+                        {opt}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                ) : (
+                  <CommandGroup key={f.key} heading={f.label}>
+                    <CommandItem onSelect={() => startToken(f.key)}>
+                      {f.key}:…
+                    </CommandItem>
+                  </CommandGroup>
+                ),
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}