testeranto 0.189.0 → 0.197.0

package/dist/module/src/components/pure/ProcessManagerView.js

@@ -0,0 +1,200 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState, useEffect, useRef } from "react";
+import { Container, Row, Col, Badge, Button } from "react-bootstrap";
+import { useNavigate } from "react-router-dom";
+export const ProcessManagerView = ({ processes, onRefresh, onBack, loading, onKillProcess, }) => {
+    const navigate = useNavigate();
+    const [selectedProcess, setSelectedProcess] = useState(null);
+    const [ws, setWs] = useState(null);
+    const [processLogs, setProcessLogs] = useState([]);
+    const [autoScroll, setAutoScroll] = useState(true);
+    const logsContainerRef = useRef(null);
+    const [isNavbarCollapsed, setIsNavbarCollapsed] = useState(false);
+    // Set up WebSocket connection
+    useEffect(() => {
+        const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+        const wsUrl = `${wsProtocol}//${window.location.host}`;
+        const websocket = new WebSocket(wsUrl);
+        setWs(websocket);
+        websocket.onmessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                // Handle process data response
+                if (data.type === "processData" &&
+                    selectedProcess &&
+                    data.processId === selectedProcess.processId) {
+                    setSelectedProcess((prev) => prev
+                        ? Object.assign(Object.assign({}, prev), { logs: data.logs || [] }) : null);
+                    setProcessLogs(data.logs || []);
+                }
+                // Handle new log messages
+                else if ((data.type === "processStdout" || data.type === "processStderr") &&
+                    selectedProcess &&
+                    data.processId === selectedProcess.processId) {
+                    setProcessLogs((prev) => [...prev, data.data]);
+                }
+            }
+            catch (error) {
+                console.error("Error parsing WebSocket message:", error);
+            }
+        };
+        return () => {
+            websocket.close();
+        };
+    }, [selectedProcess]);
+    // Request process data when selected
+    useEffect(() => {
+        if (selectedProcess && ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({
+                type: "getProcess",
+                processId: selectedProcess.processId,
+            }));
+        }
+    }, [selectedProcess, ws]);
+    // Auto-scroll to bottom when new logs arrive and autoScroll is enabled
+    useEffect(() => {
+        if (autoScroll && logsContainerRef.current) {
+            logsContainerRef.current.scrollTop =
+                logsContainerRef.current.scrollHeight;
+        }
+    }, [processLogs, autoScroll]);
+    // Handle scroll events to determine if we should auto-scroll
+    const handleLogsScroll = () => {
+        if (logsContainerRef.current) {
+            const { scrollTop, scrollHeight, clientHeight } = logsContainerRef.current;
+            const isAtBottom = scrollHeight - scrollTop <= clientHeight + 10; // 10px threshold
+            setAutoScroll(isAtBottom);
+        }
+    };
+    const getStatusBadge = (process) => {
+        switch (process.status) {
+            case "running":
+                return React.createElement(Badge, { bg: "success" }, "Running");
+            case "exited":
+                return React.createElement(Badge, { bg: "secondary" },
+                    "Exited (",
+                    process.exitCode,
+                    ")");
+            case "error":
+                return React.createElement(Badge, { bg: "danger" }, "Error");
+            default:
+                return React.createElement(Badge, { bg: "warning" }, "Unknown");
+        }
+    };
+    const handleSelectProcess = (process) => {
+        setSelectedProcess(process);
+        setProcessLogs(process.logs || []);
+    };
+    const handleInput = (data) => {
+        if (ws &&
+            ws.readyState === WebSocket.OPEN &&
+            (selectedProcess === null || selectedProcess === void 0 ? void 0 : selectedProcess.status) === "running") {
+            ws.send(JSON.stringify({
+                type: "stdin",
+                processId: selectedProcess.processId,
+                data: data,
+            }));
+        }
+    };
+    return (React.createElement(Container, { fluid: true, className: "px-0 h-100" },
+        React.createElement(Row, { className: "g-0", style: { height: "calc(100vh - 56px)" } },
+            React.createElement(Col, { sm: 3, className: "border-end", style: {
+                    height: "100%",
+                    overflow: "auto",
+                    backgroundColor: "#f8f9fa",
+                } },
+                React.createElement("div", { className: "p-1" },
+                    processes.map((process) => (React.createElement("div", { key: process.processId, className: `p-2 mb-1 rounded ${(selectedProcess === null || selectedProcess === void 0 ? void 0 : selectedProcess.processId) === process.processId
+                            ? "bg-primary text-white"
+                            : "bg-white border"}`, style: { cursor: "pointer" }, onClick: () => handleSelectProcess(process), title: process.command },
+                        React.createElement("div", { className: "d-flex justify-content-between align-items-start" },
+                            React.createElement("div", { className: "flex-grow-1", style: { minWidth: 0 } },
+                                React.createElement("div", { className: "fw-bold text-truncate small" }, process.command.split(" ")[0]),
+                                React.createElement("div", { className: `text-truncate ${(selectedProcess === null || selectedProcess === void 0 ? void 0 : selectedProcess.processId) === process.processId
+                                        ? "text-white-50"
+                                        : "text-muted"}`, style: { fontSize: "0.7rem" } },
+                                    "PID: ",
+                                    process.pid || "N/A",
+                                    " |",
+                                    " ",
+                                    new Date(process.timestamp).toLocaleTimeString())),
+                            React.createElement("div", { className: "ms-2" }, getStatusBadge(process))),
+                        process.error && (React.createElement("div", { className: `mt-1 ${(selectedProcess === null || selectedProcess === void 0 ? void 0 : selectedProcess.processId) === process.processId
+                                ? "text-warning"
+                                : "text-danger"}`, style: { fontSize: "0.7rem" } },
+                            React.createElement("div", { className: "text-truncate" },
+                                "Error: ",
+                                process.error)))))),
+                    processes.length === 0 && !loading && (React.createElement("div", { className: "p-2 text-center text-muted small" }, "No active processes")),
+                    loading && processes.length === 0 && (React.createElement("div", { className: "p-2 text-center small" },
+                        React.createElement("div", { className: "spinner-border spinner-border-sm", role: "status" },
+                            React.createElement("span", { className: "visually-hidden" }, "Loading...")))))),
+            React.createElement(Col, { sm: 5, className: "border-end p-3", style: { height: "100%", overflow: "auto" } }, selectedProcess ? (React.createElement("div", null,
+                React.createElement("div", { className: "mb-3" },
+                    React.createElement("strong", null, "Command:"),
+                    React.createElement("code", { className: "bg-light p-2 rounded d-block mt-1", style: { fontSize: "0.8rem" } }, selectedProcess.command)),
+                React.createElement("div", { className: "mb-2" },
+                    React.createElement("strong", null, "Status:"),
+                    React.createElement("div", { className: "mt-1" }, getStatusBadge(selectedProcess))),
+                React.createElement("div", { className: "mb-2" },
+                    React.createElement("strong", null, "PID:"),
+                    React.createElement("div", { className: "text-muted" }, selectedProcess.pid || "N/A")),
+                React.createElement("div", { className: "mb-2" },
+                    React.createElement("strong", null, "Started:"),
+                    React.createElement("div", { className: "text-muted" }, new Date(selectedProcess.timestamp).toLocaleString())),
+                selectedProcess.exitCode !== undefined && (React.createElement("div", { className: "mb-2" },
+                    React.createElement("strong", null, "Exit Code:"),
+                    React.createElement("div", { className: "text-muted" }, selectedProcess.exitCode))),
+                selectedProcess.error && (React.createElement("div", { className: "mt-3" },
+                    React.createElement("strong", { className: "text-danger" }, "Error:"),
+                    React.createElement("div", { className: "text-danger small mt-1" }, selectedProcess.error))))) : (React.createElement("div", { className: "text-center text-muted mt-5" },
+                React.createElement("i", null, "Select a process to view details")))),
+            React.createElement(Col, { sm: 4, className: "p-0", style: { height: "100%", overflow: "hidden" } }, selectedProcess ? (React.createElement("div", { className: "d-flex flex-column h-100" },
+                React.createElement("div", { ref: logsContainerRef, className: "bg-dark text-light flex-grow-1", style: {
+                        overflowY: "auto",
+                        fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+                        fontSize: "14px",
+                        lineHeight: "1.4",
+                        // padding: '1rem'
+                    }, onScroll: handleLogsScroll },
+                    processLogs.length > 0 ? (React.createElement("pre", { className: "mb-0", style: {
+                            whiteSpace: "pre-wrap",
+                            wordBreak: "break-word",
+                            backgroundColor: "transparent",
+                            border: "none",
+                            color: "inherit",
+                        } }, processLogs.join(""))) : (React.createElement("div", { className: "text-muted text-center py-4" },
+                        React.createElement("i", null, "No output yet"))),
+                    !autoScroll && (React.createElement("div", { className: "position-sticky bottom-0 d-flex justify-content-center mb-2" },
+                        React.createElement(Button, { variant: "primary", size: "sm", onClick: () => {
+                                setAutoScroll(true);
+                                if (logsContainerRef.current) {
+                                    logsContainerRef.current.scrollTop =
+                                        logsContainerRef.current.scrollHeight;
+                                }
+                            } }, "Scroll to Bottom")))),
+                selectedProcess.status === "running" && (React.createElement("div", { className: "border-top bg-white p-3", style: { flexShrink: 0 } },
+                    onKillProcess && (React.createElement("div", { className: "mb-3" },
+                        React.createElement(Button, { variant: "danger", size: "sm", onClick: () => onKillProcess(selectedProcess.processId), className: "w-100" }, "\u23F9\uFE0F Stop Process"))),
+                    React.createElement("div", { className: "input-group" },
+                        React.createElement("input", { type: "text", className: "form-control", placeholder: "Type input and press Enter...", onKeyPress: (e) => {
+                                if (e.key === "Enter") {
+                                    const target = e.target;
+                                    const inputValue = target.value;
+                                    if (inputValue.trim()) {
+                                        handleInput(inputValue + "\n");
+                                        target.value = "";
+                                    }
+                                }
+                            }, autoFocus: true }),
+                        React.createElement("button", { className: "btn btn-primary", type: "button", onClick: () => {
+                                const input = document.querySelector("input");
+                                const inputValue = input.value;
+                                if (inputValue.trim()) {
+                                    handleInput(inputValue + "\n");
+                                    input.value = "";
+                                }
+                            } }, "Send")),
+                    React.createElement("small", { className: "text-muted" }, "\uD83D\uDCA1 Press Enter to send input to the process"))))) : (React.createElement("div", { className: "p-3 text-center text-muted mt-5" },
+                React.createElement("i", null, "Live logs will appear here when a process is selected")))))));
+};

package/dist/module/src/components/pure/ProjectPageView.test/implementation.js

@@ -4,150 +4,178 @@ export const implementation = {
         Default: "Project Page View Tests",
     },
     givens: {
-        Default: () => ({
-            summary: {
-                "test-suite-1": {
-                    testsExist: true,
-                    runTimeErrors: 0,
-                    typeErrors: 2,
-                    staticErrors: 1
-                },
-                "test-suite-2": {
-                    testsExist: true,
-                    runTimeErrors: 1,
-                    typeErrors: 0,
-                    staticErrors: 0
-                }
-            },
-            nodeLogs: {
-                errors: [],
-                warnings: [
-                    {
-                        text: "Unused variable",
-                        location: { file: "src/file1.ts", line: 10 },
-                        pluginName: "typescript"
-                    }
-                ],
-                metafile: {
-                    inputs: {
-                        "src/file1.ts": { bytes: 1024 },
-                        "src/file2.ts": { bytes: 2048 }
+        Default: () => {
+            // Create a container to mount the component
+            const container = document.createElement('div');
+            document.body.appendChild(container);
+            return {
+                summary: {
+                    "test-suite-1": {
+                        testsExist: true,
+                        runTimeErrors: 0,
+                        typeErrors: 2,
+                        staticErrors: 1
                     },
-                    outputs: {
-                        "dist/file1.js": { bytes: 1536, entryPoint: true },
-                        "dist/file2.js": { bytes: 2560 }
+                    "test-suite-2": {
+                        testsExist: true,
+                        runTimeErrors: 1,
+                        typeErrors: 0,
+                        staticErrors: 0
                     }
-                }
-            },
-            webLogs: {
-                errors: [],
-                warnings: [],
-                metafile: {
-                    inputs: {
-                        "src/file1.ts": { bytes: 1024 },
-                        "src/file2.ts": { bytes: 2048 }
-                    },
-                    outputs: {
-                        "dist/file1.js": { bytes: 1536, entryPoint: true },
-                        "dist/file2.js": { bytes: 2560 }
+                },
+                nodeLogs: {
+                    errors: [],
+                    warnings: [
+                        {
+                            text: "Unused variable",
+                            location: { file: "src/file1.ts", line: 10 },
+                            pluginName: "typescript"
+                        }
+                    ],
+                    metafile: {
+                        inputs: {
+                            "src/file1.ts": { bytes: 1024 },
+                            "src/file2.ts": { bytes: 2048 }
+                        },
+                        outputs: {
+                            "dist/file1.js": { bytes: 1536, entryPoint: true },
+                            "dist/file2.js": { bytes: 2560 }
+                        }
                     }
-                }
-            },
-            pureLogs: {
-                errors: [
-                    {
-                        text: "Syntax error",
-                        location: { file: "src/file3.ts", line: 5 },
-                        pluginName: "typescript"
+                },
+                webLogs: {
+                    errors: [],
+                    warnings: [],
+                    metafile: {
+                        inputs: {
+                            "src/file1.ts": { bytes: 1024 },
+                            "src/file2.ts": { bytes: 2048 }
+                        },
+                        outputs: {
+                            "dist/file1.js": { bytes: 1536, entryPoint: true },
+                            "dist/file2.js": { bytes: 2560 }
+                        }
                     }
-                ],
-                warnings: [],
-                metafile: {
-                    inputs: {
-                        "src/file3.ts": { bytes: 512 },
-                        "src/file4.ts": { bytes: 768 }
-                    },
-                    outputs: {
-                        "dist/file3.js": { bytes: 1024, entryPoint: true },
-                        "dist/file4.js": { bytes: 1280 }
+                },
+                pureLogs: {
+                    errors: [
+                        {
+                            text: "Syntax error",
+                            location: { file: "src/file3.ts", line: 5 },
+                            pluginName: "typescript"
+                        }
+                    ],
+                    warnings: [],
+                    metafile: {
+                        inputs: {
+                            "src/file3.ts": { bytes: 512 },
+                            "src/file4.ts": { bytes: 768 }
+                        },
+                        outputs: {
+                            "dist/file3.js": { bytes: 1024, entryPoint: true },
+                            "dist/file4.js": { bytes: 1280 }
+                        }
                     }
-                }
-            },
-            config: {
-                tests: [
-                    ["test-suite-1", "node"],
-                    ["test-suite-2", "web"]
-                ]
-            },
-            loading: false,
-            error: null,
-            projectName: "test-project",
-            route: "tests",
-            setRoute: () => { },
-            navigate: () => { },
-        }),
-        WithError: () => ({
-            summary: null,
-            nodeLogs: null,
-            webLogs: null,
-            pureLogs: null,
-            config: { tests: [] },
-            loading: false,
-            error: "Test error message",
-            projectName: "test-project",
-            route: "tests",
-            setRoute: () => { },
-            navigate: () => { },
-        }),
+                },
+                config: {
+                    tests: [
+                        ["test-suite-1", "node"],
+                        ["test-suite-2", "web"]
+                    ]
+                },
+                loading: false,
+                error: null,
+                projectName: "test-project",
+                activeTab: "tests",
+                setActiveTab: () => { },
+                route: "tests",
+                setRoute: () => { },
+                navigate: () => { },
+                // Add the required properties for ISelection
+                htmlElement: container,
+                reactElement: null,
+                domRoot: null
+            };
+        },
+        WithError: () => {
+            const container = document.createElement('div');
+            document.body.appendChild(container);
+            return {
+                summary: null,
+                nodeLogs: null,
+                webLogs: null,
+                pureLogs: null,
+                config: { tests: [] },
+                loading: false,
+                error: "Test error message",
+                projectName: "test-project",
+                activeTab: "tests",
+                setActiveTab: () => { },
+                route: "tests",
+                setRoute: () => { },
+                navigate: () => { },
+                // Add the required properties for ISelection
+                htmlElement: container,
+                reactElement: null,
+                domRoot: null
+            };
+        },
     },
     whens: {},
     thens: {
-        hasContainerFluid: () => async ({ htmlElement }) => {
+        hasContainerFluid: () => (state) => {
+            const htmlElement = state.htmlElement;
             const container = htmlElement.querySelector('.container-fluid');
             assert.exists(container, 'Should have container-fluid div');
-            return { htmlElement };
+            return state;
         },
-        hasNavBar: () => async ({ htmlElement }) => {
+        hasNavBar: () => (state) => {
+            const htmlElement = state.htmlElement;
             const navBar = htmlElement.querySelector('nav.navbar');
             assert.exists(navBar, 'Should render NavBar component');
-            return { htmlElement };
+            return state;
         },
-        hasNavBarTitle: () => async ({ htmlElement }) => {
+        hasNavBarTitle: () => (state) => {
             var _a;
+            const htmlElement = state.htmlElement;
             const navBarTitle = (_a = htmlElement.querySelector('nav.navbar .navbar-brand')) === null || _a === void 0 ? void 0 : _a.textContent;
             assert.isNotEmpty(navBarTitle, 'NavBar should have title');
-            return { htmlElement };
+            return state;
         },
-        hasTestTable: () => async ({ htmlElement }) => {
+        hasTestTable: () => (state) => {
+            const htmlElement = state.htmlElement;
             const testTable = htmlElement.querySelector('table');
             assert.exists(testTable, 'Should render test table');
-            return { htmlElement };
+            return state;
         },
-        rendersTestSuite1: () => async ({ htmlElement }) => {
+        rendersTestSuite1: () => (state) => {
+            const htmlElement = state.htmlElement;
             const testTable = htmlElement.querySelector('table');
             const testNames = Array.from(testTable.querySelectorAll('tbody tr td:first-child'))
                 .map(el => el.textContent);
             assert.include(testNames, 'test-suite-1', 'Should render test-suite-1');
-            return { htmlElement };
+            return state;
         },
-        rendersTestSuite2: () => async ({ htmlElement }) => {
+        rendersTestSuite2: () => (state) => {
+            const htmlElement = state.htmlElement;
             const testTable = htmlElement.querySelector('table');
             const testNames = Array.from(testTable.querySelectorAll('tbody tr td:first-child'))
                 .map(el => el.textContent);
             assert.include(testNames, 'test-suite-2', 'Should render test-suite-2');
-            return { htmlElement };
+            return state;
         },
-        unhappyPath: () => async ({ htmlElement }) => {
+        unhappyPath: () => (state) => {
+            const htmlElement = state.htmlElement;
             const errorAlert = htmlElement.querySelector('.alert-danger');
             assert.exists(errorAlert, 'Should show error alert');
             const errorText = errorAlert === null || errorAlert === void 0 ? void 0 : errorAlert.textContent;
             assert.include(errorText, 'Test error message', 'Should display error message');
-            return { htmlElement };
+            return state;
         },
-        takeScreenshot: (name) => async ({ htmlElement }, pm) => {
+        takeScreenshot: (name) => async (state, pm) => {
             const p = await pm.page();
             await pm.customScreenShot({ path: name }, p);
-            return { htmlElement };
+            return state;
         },
     },
 };

package/dist/module/src/components/pure/ProjectsPageView.js

@@ -1,13 +1,16 @@
-import React from 'react';
-import { Table, Alert } from 'react-bootstrap';
-import { NavBar } from './NavBar';
-export const ProjectsPageView = ({ projects, summaries, configs, loading, error, navigate }) => {
+import React from "react";
+import { Table, Alert } from "react-bootstrap";
+export const ProjectsPageView = ({ projects, summaries, configs, loading, error, navigate, }) => {
     const getStatusIcon = (status) => {
         switch (status) {
-            case 'success': return '✅';
-            case 'failed': return '❌';
-            case 'warning': return '⚠️';
-            default: return '❓';
+            case "success":
+                return "✅";
+            case "failed":
+                return "❌";
+            case "warning":
+                return "⚠️";
+            default:
+                return "❓";
         }
     };
     if (loading)
@@ -16,8 +19,7 @@ export const ProjectsPageView = ({ projects, summaries, configs, loading, error,
         return React.createElement(Alert, { variant: "danger" },
             "Error: ",
             error);
-    return (React.createElement("div", { className: "p-3" },
-        React.createElement(NavBar, { title: "Testeranto", backLink: undefined }),
+    return (React.createElement("div", { className: "" },
         React.createElement(Table, { striped: true, bordered: true, hover: true, responsive: true },
             React.createElement("thead", null,
                 React.createElement("tr", null,
@@ -33,16 +35,20 @@ export const ProjectsPageView = ({ projects, summaries, configs, loading, error,
                             navigate(`/projects/${project.name}`);
                         } }, project.name)),
                 React.createElement("td", null,
-                    React.createElement("div", { style: { maxHeight: '200px', overflowY: 'auto' } }, summaries[project.name] ? (Object.keys(summaries[project.name]).map(testName => {
+                    React.createElement("div", null, summaries[project.name] ? (Object.keys(summaries[project.name]).map((testName) => {
                         var _a, _b, _c;
                         const testData = summaries[project.name][testName];
-                        const runTime = ((_c = (_b = (_a = configs[project.name]) === null || _a === void 0 ? void 0 : _a.tests) === null || _b === void 0 ? void 0 : _b.find((t) => t[0] === testName)) === null || _c === void 0 ? void 0 : _c[1]) || 'node';
+                        const runTime = ((_c = (_b = (_a = configs[project.name]) === null || _a === void 0 ? void 0 : _a.tests) === null || _b === void 0 ? void 0 : _b.find((t) => t[0] === testName)) === null || _c === void 0 ? void 0 : _c[1]) || "node";
                         const hasRuntimeErrors = testData.runTimeErrors > 0;
                         const hasStaticErrors = testData.typeErrors > 0 || testData.staticErrors > 0;
                         return (React.createElement("div", { key: testName },
                             React.createElement("a", { href: `#/projects/${project.name}/tests/${encodeURIComponent(testName)}/${runTime}` },
-                                hasRuntimeErrors ? '❌ ' : hasStaticErrors ? '⚠️ ' : '',
-                                testName.split('/').pop() || testName)));
+                                hasRuntimeErrors
+                                    ? "❌ "
+                                    : hasStaticErrors
+                                        ? "⚠️ "
+                                        : "",
+                                testName.split("/").pop() || testName)));
                     })) : (React.createElement("div", null, "Loading tests...")))),
                 React.createElement("td", null,
                     React.createElement("a", { href: `#/projects/${project.name}#node` },

package/dist/module/src/components/pure/SettingsButton.js

@@ -1,43 +1,6 @@
-import React, { useState, useEffect } from "react";
-import { Button, Modal } from "react-bootstrap";
-import { ModalContent } from "./ModalContent";
-import SunriseAnimation from "../SunriseAnimation";
-export const SettingsButton = ({ className }) => {
-    useEffect(() => {
-        return () => {
-            // Cleanup if needed
-        };
-    }, []);
-    const [showModal, setShowModal] = useState(false);
-    useEffect(() => {
-        let themeToApply = theme;
-        if (theme === 'system') {
-            themeToApply = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
-        }
-        document.documentElement.setAttribute('data-bs-theme', themeToApply);
-    }, []);
-    const [theme, setTheme] = useState(localStorage.getItem('theme') || 'system');
-    const handleThemeChange = (e) => {
-        const newTheme = e.target.value;
-        setTheme(newTheme);
-        localStorage.setItem('theme', newTheme);
-        // Remove all theme classes first
-        // document.body.classList.remove('light-theme', 'dark-theme', 'lovely-theme', 'light-grayscale-theme', 'dark-grayscale-theme', 'sepia-theme');
-        let themeToApply = newTheme;
-        if (newTheme === 'system') {
-            themeToApply = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
-        }
-        document.documentElement.setAttribute('data-bs-theme', themeToApply);
-        // Animation is now handled by SunriseAnimation component
-        // document.body.classList.add(`${themeToApply}-theme`);
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { id: "settings-button" },
-            React.createElement("button", { className: `btn btn-sm btn-outline-secondary ${className}`, onClick: () => setShowModal(true) },
-                React.createElement("div", { id: "gear-icon-settings" }, "\u2699\uFE0F"))),
-        React.createElement(SunriseAnimation, { active: theme === 'daily' }),
-        React.createElement(Modal, { show: showModal, onHide: () => setShowModal(false), size: "lg" },
-            React.createElement(ModalContent, { theme: theme, handleThemeChange: handleThemeChange }),
-            React.createElement(Modal.Footer, { className: "border-0" },
-                React.createElement(Button, { variant: "btn-primary", onClick: () => setShowModal(false) }, "Done")))));
+import React from 'react';
+import { Nav } from 'react-bootstrap';
+import { NavLink } from 'react-router-dom';
+export const SettingsButton = () => {
+    return (React.createElement(Nav.Link, { as: NavLink, to: "/settings" }, "Settings"));
 };