Redesign logs page (#10853)

* Adjust outline and structure to match designs

* More color changes to fit design

* Properly parse go2rtc severity

* Add ability to filter by clicking item

* Implement sheet / drawer for viewing full log

* Add toast and filtering

* Add links to docs when specific log items are selected

* Cleanup log seeking

* Use header in layout

* Fix mobile menus

* Fix safari theme

* Hide rings

* Theme adjustment

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>
+  );
+}