Add an HTTP API endpoint + UI widgets to stream logs (#49)

* Added JSON logs to Desktop

* Move logging config into librqbit for reuse

* Log printer now available in both Desktop and Web UI

* Fix JS type error

crates/librqbit/webui/src/rqbit-web.tsx

@@ -3,6 +3,9 @@ import { TorrentId, ErrorDetails as ApiErrorDetails } from "./api-types";
 import { AppContext, APIContext } from "./context";
 import { RootContent } from "./components/RootContent";
 import { customSetInterval } from "./helper/customSetInterval";
+import { IconButton } from "./components/IconButton";
+import { BsBodyText } from "react-icons/bs";
+import { LogStreamModal } from "./components/LogStreamModal";
 
 export interface ErrorWithLabel {
   text: string;
@@ -14,7 +17,10 @@ export interface ContextType {
   refreshTorrents: () => void;
 }
 
-export const RqbitWebUI = (props: { title: string }) => {
+export const RqbitWebUI = (props: {
+  title: string;
+  menuButtons?: JSX.Element[];
+}) => {
   const [closeableError, setCloseableError] = useState<ErrorWithLabel | null>(
     null
   );
@@ -22,6 +28,8 @@ export const RqbitWebUI = (props: { title: string }) => {
 
   const [torrents, setTorrents] = useState<Array<TorrentId> | null>(null);
   const [torrentsLoading, setTorrentsLoading] = useState(false);
+  let [logsOpened, setLogsOpened] = useState<boolean>(false);
+
   const API = useContext(APIContext);
 
   const refreshTorrents = async () => {
@@ -66,6 +74,17 @@ export const RqbitWebUI = (props: { title: string }) => {
           torrentsLoading={torrentsLoading}
         />
       </div>
+
+      {/* Menu buttons */}
+      <div className="position-absolute top-0 start-0 p-1">
+        {props.menuButtons &&
+          props.menuButtons.map((b, i) => <span key={i}>{b}</span>)}
+        <IconButton onClick={() => setLogsOpened(true)}>
+          <BsBodyText />
+        </IconButton>
+      </div>
+
+      <LogStreamModal show={logsOpened} onClose={() => setLogsOpened(false)} />
     </AppContext.Provider>
   );
 };