Implement sheet / drawer for viewing full log

web/src/components/indicators/Chip.tsx

@@ -1,4 +1,5 @@
-import { ReactNode, useRef } from "react";
+import { LogSeverity } from "@/types/log";
+import { ReactNode, useMemo, useRef } from "react";
 import { CSSTransition } from "react-transition-group";
 
 type ChipProps = {
@@ -39,3 +40,35 @@ export default function Chip({
     </CSSTransition>
   );
 }
+
+type LogChipProps = {
+  severity: LogSeverity;
+  onClickSeverity?: () => void;
+};
+export function LogChip({ severity, onClickSeverity }: LogChipProps) {
+  const severityClassName = useMemo(() => {
+    switch (severity) {
+      case "info":
+        return "text-primary-foreground/60 bg-secondary hover:bg-secondary/60";
+      case "warning":
+        return "text-warning-foreground bg-warning hover:bg-warning/80";
+      case "error":
+        return "text-destructive-foreground bg-destructive hover:bg-destructive/80";
+    }
+  }, [severity]);
+
+  return (
+    <div
+      className={`py-[1px] px-1 capitalize text-xs rounded-md ${onClickSeverity ? "cursor-pointer" : ""} ${severityClassName}`}
+      onClick={(e) => {
+        e.stopPropagation();
+
+        if (onClickSeverity) {
+          onClickSeverity();
+        }
+      }}
+    >
+      {severity}
+    </div>
+  );
+}

web/src/components/overlay/LogInfoDialog.tsx

@@ -0,0 +1,53 @@
+import { LogLine } from "@/types/log";
+import { isDesktop } from "react-device-detect";
+import { Sheet, SheetContent } from "../ui/sheet";
+import { Drawer, DrawerContent } from "../ui/drawer";
+import { LogChip } from "../indicators/Chip";
+
+type LogInfoDialogProps = {
+  logLine?: LogLine;
+  setLogLine: (log: LogLine | undefined) => void;
+};
+export default function LogInfoDialog({
+  logLine,
+  setLogLine,
+}: LogInfoDialogProps) {
+  const Overlay = isDesktop ? Sheet : Drawer;
+  const Content = isDesktop ? SheetContent : DrawerContent;
+
+  return (
+    <Overlay
+      open={logLine != undefined}
+      onOpenChange={(open) => {
+        if (!open) {
+          setLogLine(undefined);
+        }
+      }}
+    >
+      <Content className={isDesktop ? "" : "max-h-[75dvh] p-2 overflow-hidden"}>
+        {logLine && (
+          <div className="size-full flex flex-col gap-5">
+            <div className="w-min flex flex-col gap-1.5">
+              <div className="text-sm text-primary-foreground/40">Type</div>
+              <LogChip severity={logLine.severity} />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <div className="text-sm text-primary-foreground/40">
+                Timestamp
+              </div>
+              <div className="text-sm">{logLine.dateStamp}</div>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <div className="text-sm text-primary-foreground/40">Tag</div>
+              <div className="text-sm">{logLine.section}</div>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <div className="text-sm text-primary-foreground/40">Message</div>
+              <div className="text-sm">{logLine.content}</div>
+            </div>
+          </div>
+        )}
+      </Content>
+    </Overlay>
+  );
+}

web/src/pages/Logs.tsx

@@ -5,6 +5,8 @@ import copy from "copy-to-clipboard";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { LuCopy } from "react-icons/lu";
 import axios from "axios";
+import LogInfoDialog from "@/components/overlay/LogInfoDialog";
+import { LogChip } from "@/components/indicators/Chip";
 
 const logTypes = ["frigate", "go2rtc", "nginx"] as const;
 type LogType = (typeof logTypes)[number];
@@ -300,8 +302,14 @@ function Logs() {
 
   const [filterSeverity, setFilterSeverity] = useState<LogSeverity>();
 
+  // log selection
+
+  const [selectedLog, setSelectedLog] = useState<LogLine>();
+
   return (
     <div className="size-full p-2 flex flex-col">
+      <LogInfoDialog logLine={selectedLog} setLogLine={setSelectedLog} />
+
       <div className="flex justify-between items-center">
         <ToggleGroup
           className="*:px-3 *:py-4 *:rounded-md"
@@ -394,6 +402,7 @@ function Logs() {
                   className={initialScroll ? "" : "invisible"}
                   line={line}
                   onClickSeverity={() => setFilterSeverity(line.severity)}
+                  onSelect={() => setSelectedLog(line)}
                 />
               );
             }
@@ -411,54 +420,34 @@ type LogLineDataProps = {
   className: string;
   line: LogLine;
   onClickSeverity: () => void;
+  onSelect: () => void;
 };
 function LogLineData({
   startRef,
   className,
   line,
   onClickSeverity,
+  onSelect,
 }: LogLineDataProps) {
-  // long log message
-
-  const contentRef = useRef<HTMLDivElement | null>(null);
-
-  // severity coloring
-
-  const severityClassName = useMemo(() => {
-    switch (line.severity) {
-      case "info":
-        return "text-primary-foreground/60 bg-secondary hover:bg-secondary/60";
-      case "warning":
-        return "text-warning-foreground bg-warning hover:bg-warning/80";
-      case "error":
-        return "text-destructive-foreground bg-destructive hover:bg-destructive/80";
-    }
-  }, [line]);
-
   return (
     <div
       ref={startRef}
-      className={`py-2 grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 gap-2 border-secondary border-t ${className} *:text-sm`}
+      className={`py-2 grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 gap-2 border-secondary border-t cursor-pointer hover:bg-muted ${className} *:text-sm`}
+      onClick={onSelect}
     >
       <div className="h-full p-1 flex items-center gap-2">
-        <div
-          className={`py-[1px] px-1 capitalize text-xs rounded-md cursor-pointer ${severityClassName}`}
-          onClick={onClickSeverity}
-        >
-          {line.severity}
-        </div>
+        <LogChip severity={line.severity} onClickSeverity={onClickSeverity} />
       </div>
       <div className="h-full col-span-2 sm:col-span-1 flex items-center">
         {line.dateStamp}
       </div>
-      <div className="s-full col-span-2 overflow-hidden whitespace-nowrap text-ellipsis">
+      <div className="size-full pr-2 col-span-2 flex items-center">
+        <div className="w-full overflow-hidden whitespace-nowrap text-ellipsis">
           {line.section}
         </div>
-      <div className="w-full col-span-5 sm:col-span-4 md:col-span-8 flex justify-between items-center">
-        <div
-          ref={contentRef}
-          className="w-[94%] flex items-center overflow-hidden whitespace-nowrap text-ellipsis"
-        >
+      </div>
+      <div className="size-full pr-2 col-span-5 sm:col-span-4 md:col-span-8 flex justify-between items-center">
+        <div className="w-full overflow-hidden whitespace-nowrap text-ellipsis">
           {line.content}
         </div>
       </div>