feat: add new popup app to go to login, dashboard, and logout

assets/manifest.json

@@ -64,5 +64,10 @@
             "id": "contact@lumeweb.com",
             "strict_min_version": "91.1.0"
         }
+    },
+    "browser_action": {
+        "default_icon": "icon.png",
+        "default_title": "Lume Web",
+        "default_popup": "popup.html"
     }
 }

ui/apps/popup/App.scss

@@ -0,0 +1,144 @@
+@font-face {
+    font-family: 'Jaldi';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("../../fonts/Jaldi-Regular.woff2") format('woff2');
+}
+
+body {
+    background: #1D1D1D;
+    min-width: 15em;
+}
+
+.body {
+    background: #3B3B3B;
+    display: flex;
+    flex-direction: column;
+
+    .button-container {
+        margin: auto;
+        //max-width: 13.7em;
+        margin-bottom: 2em;
+        margin-left: 1em;
+        margin-right: 1em;
+        display: flex;
+    }
+
+    button {
+        display: flex;
+        border-radius: 5px;
+        padding-left: 1.6em;
+        padding-right: 1.6em;
+        padding-top: 0.8em;
+        padding-bottom: 0.8em;
+        margin: auto;
+        cursor: pointer;
+        border: none;
+        font-size: 1em;
+        color: #F2F2F2;
+
+        > svg, span {
+            flex: 1;
+        }
+    }
+
+    .dashboard-btn {
+        background: #1B1B1B;
+        box-shadow: 1px 0 5px 0 rgb(27, 27, 27, 0.75);
+
+
+        > svg {
+            margin-right: 1em;
+            height: 1.2em;
+            width: 1.2em;
+        }
+    }
+
+    .login-btn {
+        background: #1B1B1B;
+        box-shadow: 1px 0 5px 0 rgb(27, 27, 27, 0.75);
+        border: none;
+
+        &:hover {
+            background: #3B3B3B;
+        }
+    }
+}
+
+.connection-text {
+    font-family: Jaldi;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 2.1em;
+    color: #BFBFBF;
+    margin: auto;
+    padding-left: 2em;
+    padding-right: 2em;
+    padding-top: 1em;
+    margin-bottom: 2em;
+}
+
+.connection {
+    width: 100%;
+    max-width: 7em;
+    margin: auto;
+    margin-top: 2em;
+}
+
+
+.header {
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+    min-width: 2.75em;
+    margin-bottom: 0.5em;
+
+    .icons {
+        display: flex;
+    }
+
+    .logo,
+    .exit,
+    .logout {
+        padding: 1em;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        width: 2em;
+        height: 2em;
+        max-width: 1.2em;
+        max-height: 1.2em;
+
+        svg {
+            width: 100%;
+            height: 100%;
+            fill: #8E8E93; // Set the fill color to gray for both icons
+        }
+    }
+
+    .exit, .logout {
+        &:hover {
+            svg {
+                fill: #62C554;
+            }
+        }
+    }
+
+    .logo {
+        margin-right: auto;
+
+        &.connected {
+            svg {
+                fill: #62C554;
+            }
+        }
+    }
+
+    .exit {
+        margin-left: auto;
+    }
+}
+

ui/apps/popup/App.tsx

@@ -0,0 +1,163 @@
+import "./App.scss";
+import { useEffect, useState } from "react";
+import { init, loginComplete } from "@lumeweb/libkernel/kernel";
+import browser from "webextension-polyfill";
+import classNames from "classnames";
+import { clearLoginKey } from "../../../shared/keys.js";
+
+export default function App() {
+  const [loggedIn, setLoggedIn] = useState(false);
+
+  useEffect(() => {
+    init().then(() => {
+      loginComplete().then(() => {
+        setLoggedIn(true);
+      });
+    });
+  }, [loggedIn]);
+
+  function openDashboard() {
+    browser.tabs.create({
+      url: browser.runtime.getURL("dashboard.html"),
+      active: true,
+    });
+  }
+
+  function openAccount() {
+    browser.tabs.create({
+      url: browser.runtime.getURL("account.html"),
+      active: true,
+    });
+  }
+
+  function close() {
+    window.close();
+  }
+
+  async function logout() {
+    await clearLoginKey();
+    window.location.reload();
+  }
+  return (
+    <>
+      <div className="header">
+        <div className={classNames("logo", { connected: loggedIn })}>
+          <svg
+            viewBox="0 0 339.18999 339.19"
+            xmlns="http://www.w3.org/2000/svg">
+            <g transform="translate(-425.68,-251.35)">
+              <g>
+                <path d="m 697.89,382.61 c -0.96,-3.95 -3.58,-7.25 -7.1,-9.09 -1.93,-1.01 -4.13,-1.59 -6.46,-1.59 H 653.6 c -20.14,-0.03 -30.35,-10.26 -30.35,-30.42 0,-0.02 0,-0.04 0,-0.06 v 0 -76.11 c 0,-0.55 -0.04,-1.09 -0.1,-1.62 -0.01,-0.13 -0.04,-0.25 -0.06,-0.37 -0.06,-0.41 -0.13,-0.82 -0.23,-1.22 -0.03,-0.12 -0.06,-0.24 -0.09,-0.36 -0.11,-0.42 -0.24,-0.84 -0.39,-1.25 -0.03,-0.08 -0.05,-0.15 -0.08,-0.23 -0.19,-0.48 -0.4,-0.96 -0.64,-1.41 -0.01,-0.03 -0.04,-0.05 -0.05,-0.08 -0.28,-0.52 -0.58,-1.03 -0.92,-1.51 -0.01,-0.01 -0.02,-0.02 -0.03,-0.04 -0.34,-0.47 -0.7,-0.92 -1.09,-1.34 -0.04,-0.05 -0.08,-0.09 -0.13,-0.14 -0.81,-0.86 -1.72,-1.61 -2.71,-2.24 -0.09,-0.06 -0.19,-0.11 -0.28,-0.17 -0.43,-0.26 -0.88,-0.5 -1.34,-0.71 -0.08,-0.04 -0.15,-0.08 -0.23,-0.11 -0.53,-0.23 -1.07,-0.43 -1.63,-0.6 -0.11,-0.03 -0.22,-0.06 -0.33,-0.09 -0.45,-0.12 -0.92,-0.22 -1.39,-0.3 -0.16,-0.03 -0.31,-0.05 -0.47,-0.07 -0.58,-0.07 -1.18,-0.13 -1.78,-0.13 0,0 0,0 0,0 v 0 c -0.73,0 -1.43,0.07 -2.13,0.18 -0.12,0.02 -0.25,0.03 -0.37,0.06 -0.67,0.12 -1.32,0.29 -1.96,0.5 -0.1,0.03 -0.2,0.07 -0.3,0.11 -1.33,0.48 -2.56,1.15 -3.67,1.99 -0.05,0.04 -0.1,0.08 -0.16,0.12 -0.56,0.43 -1.08,0.91 -1.57,1.42 -0.02,0.02 -0.04,0.04 -0.06,0.07 -1,1.07 -1.84,2.3 -2.46,3.65 0,0 0,0.01 0,0.01 -0.3,0.64 -0.54,1.31 -0.74,2 -0.01,0.04 -0.04,0.09 -0.05,0.13 -0.15,0.55 -0.27,1.12 -0.36,1.7 -0.01,0.08 -0.03,0.16 -0.04,0.24 -0.08,0.6 -0.13,1.2 -0.13,1.82 v 76.17 c 0,0.02 0,0.04 0,0.07 0.02,28.2 15.37,58.31 58.36,58.33 0.01,0 0.02,0 0.03,0 0.01,0 0.02,0 0.03,0 h 30.63 c 3.86,0 7.36,-1.57 9.89,-4.1 2.53,-2.53 4.1,-6.03 4.1,-9.89 v -0.02 c -0.01,-1.15 -0.17,-2.24 -0.43,-3.3 z" />
+                <path d="m 556.94,318.33 c -3.95,0.96 -7.25,3.58 -9.09,7.1 -1.01,1.93 -1.59,4.13 -1.59,6.46 v 30.73 c -0.03,20.14 -10.26,30.35 -30.42,30.35 -0.02,0 -0.04,0 -0.06,0 v 0 h -76.11 c -0.55,0 -1.09,0.04 -1.62,0.1 -0.13,0.01 -0.25,0.04 -0.37,0.06 -0.41,0.06 -0.82,0.13 -1.22,0.23 -0.12,0.03 -0.24,0.06 -0.36,0.09 -0.42,0.11 -0.84,0.24 -1.25,0.39 -0.08,0.03 -0.15,0.05 -0.23,0.08 -0.48,0.19 -0.96,0.4 -1.41,0.64 -0.03,0.01 -0.05,0.04 -0.08,0.05 -0.52,0.28 -1.03,0.58 -1.51,0.92 -0.01,0.01 -0.02,0.02 -0.04,0.03 -0.47,0.34 -0.92,0.7 -1.34,1.09 -0.05,0.04 -0.09,0.08 -0.14,0.13 -0.86,0.81 -1.61,1.72 -2.24,2.71 -0.06,0.09 -0.11,0.19 -0.17,0.28 -0.26,0.43 -0.5,0.88 -0.71,1.34 -0.04,0.08 -0.08,0.15 -0.11,0.23 -0.23,0.53 -0.43,1.07 -0.6,1.63 -0.03,0.11 -0.06,0.22 -0.09,0.33 -0.12,0.45 -0.22,0.92 -0.3,1.39 -0.03,0.16 -0.05,0.31 -0.07,0.47 -0.07,0.58 -0.13,1.18 -0.13,1.78 0,0 0,0 0,0 v 0 c 0,0.73 0.07,1.43 0.18,2.13 0.02,0.12 0.03,0.25 0.06,0.37 0.12,0.67 0.29,1.32 0.5,1.96 0.03,0.1 0.07,0.2 0.11,0.3 0.48,1.33 1.15,2.56 1.99,3.67 0.04,0.05 0.08,0.1 0.12,0.16 0.43,0.56 0.91,1.08 1.42,1.57 0.02,0.02 0.04,0.04 0.07,0.06 1.07,1 2.3,1.84 3.65,2.46 0,0 0.01,0 0.01,0 0.64,0.3 1.31,0.54 2,0.74 0.04,0.01 0.09,0.04 0.13,0.05 0.55,0.15 1.12,0.27 1.7,0.36 0.08,0.01 0.16,0.03 0.24,0.04 0.6,0.08 1.2,0.13 1.82,0.13 h 76.17 c 0.02,0 0.04,0 0.07,0 28.2,-0.02 58.31,-15.37 58.33,-58.36 0,-0.01 0,-0.02 0,-0.03 0,-0.01 0,-0.02 0,-0.03 v -30.63 c 0,-3.86 -1.57,-7.36 -4.1,-9.89 -2.53,-2.53 -6.03,-4.1 -9.89,-4.1 h -0.02 c -1.15,0.01 -2.24,0.17 -3.3,0.43 z" />
+                <path d="m 492.66,459.28 c 0.96,3.95 3.58,7.25 7.1,9.09 1.93,1.01 4.13,1.59 6.46,1.59 h 30.73 c 20.14,0.03 30.35,10.26 30.35,30.42 0,0.02 0,0.04 0,0.06 v 0 76.11 c 0,0.55 0.04,1.09 0.1,1.62 0.01,0.13 0.04,0.25 0.06,0.37 0.06,0.41 0.13,0.82 0.23,1.22 0.03,0.12 0.06,0.24 0.09,0.36 0.11,0.42 0.24,0.84 0.39,1.25 0.03,0.08 0.05,0.15 0.08,0.23 0.19,0.48 0.4,0.96 0.64,1.41 0.01,0.03 0.04,0.05 0.05,0.08 0.28,0.52 0.58,1.03 0.92,1.51 0.01,0.01 0.02,0.02 0.03,0.04 0.34,0.47 0.7,0.92 1.09,1.34 0.04,0.05 0.08,0.09 0.13,0.14 0.81,0.86 1.72,1.61 2.71,2.24 0.09,0.06 0.19,0.11 0.28,0.17 0.43,0.26 0.88,0.5 1.34,0.71 0.08,0.04 0.15,0.08 0.23,0.11 0.53,0.23 1.07,0.43 1.63,0.6 0.11,0.03 0.22,0.06 0.33,0.09 0.45,0.12 0.92,0.22 1.39,0.3 0.16,0.03 0.31,0.05 0.47,0.07 0.58,0.07 1.18,0.13 1.78,0.13 0,0 0,0 0,0 v 0 c 0.73,0 1.43,-0.07 2.13,-0.18 0.12,-0.02 0.25,-0.03 0.37,-0.06 0.67,-0.12 1.32,-0.29 1.96,-0.5 0.1,-0.03 0.2,-0.07 0.3,-0.11 1.33,-0.48 2.56,-1.15 3.67,-1.99 0.05,-0.04 0.1,-0.08 0.16,-0.12 0.56,-0.43 1.08,-0.91 1.57,-1.42 0.02,-0.02 0.04,-0.04 0.06,-0.07 1,-1.07 1.84,-2.3 2.46,-3.65 0,0 0,-0.01 0,-0.01 0.3,-0.64 0.54,-1.31 0.74,-2 0.01,-0.04 0.04,-0.09 0.05,-0.13 0.15,-0.55 0.27,-1.12 0.36,-1.7 0.01,-0.08 0.03,-0.16 0.04,-0.24 0.08,-0.6 0.13,-1.2 0.13,-1.82 v -76.17 c 0,-0.02 0,-0.04 0,-0.07 -0.02,-28.2 -15.37,-58.31 -58.36,-58.33 -0.01,0 -0.02,0 -0.03,0 -0.01,0 -0.02,0 -0.03,0 h -30.63 c -3.86,0 -7.36,1.57 -9.89,4.1 -2.53,2.53 -4.1,6.03 -4.1,9.89 v 0.02 c 0.01,1.15 0.17,2.24 0.43,3.3 z" />
+                <path d="m 633.61,523.56 c 3.95,-0.96 7.25,-3.58 9.09,-7.1 1.01,-1.93 1.59,-4.13 1.59,-6.46 v -30.73 c 0.03,-20.14 10.26,-30.35 30.42,-30.35 0.02,0 0.04,0 0.06,0 v 0 h 76.11 c 0.55,0 1.09,-0.04 1.62,-0.1 0.13,-0.01 0.25,-0.04 0.37,-0.06 0.41,-0.06 0.82,-0.13 1.22,-0.23 0.12,-0.03 0.24,-0.06 0.36,-0.09 0.42,-0.11 0.84,-0.24 1.25,-0.39 0.08,-0.03 0.15,-0.05 0.23,-0.08 0.48,-0.19 0.96,-0.4 1.41,-0.64 0.03,-0.01 0.05,-0.04 0.08,-0.05 0.52,-0.28 1.03,-0.58 1.51,-0.92 0.01,-0.01 0.02,-0.02 0.04,-0.03 0.47,-0.34 0.92,-0.7 1.34,-1.09 0.05,-0.04 0.09,-0.08 0.14,-0.13 0.86,-0.81 1.61,-1.72 2.24,-2.71 0.06,-0.09 0.11,-0.19 0.17,-0.28 0.26,-0.43 0.5,-0.88 0.71,-1.34 0.04,-0.08 0.08,-0.15 0.11,-0.23 0.23,-0.53 0.43,-1.07 0.6,-1.63 0.03,-0.11 0.06,-0.22 0.09,-0.33 0.12,-0.45 0.22,-0.92 0.3,-1.39 0.03,-0.16 0.05,-0.31 0.07,-0.47 0.07,-0.58 0.13,-1.18 0.13,-1.78 0,0 0,0 0,0 v 0 c 0,-0.73 -0.07,-1.43 -0.18,-2.13 -0.02,-0.12 -0.03,-0.25 -0.06,-0.37 -0.12,-0.67 -0.29,-1.32 -0.5,-1.96 -0.03,-0.1 -0.07,-0.2 -0.11,-0.3 -0.48,-1.33 -1.15,-2.56 -1.99,-3.67 -0.04,-0.05 -0.08,-0.1 -0.12,-0.16 -0.43,-0.56 -0.91,-1.08 -1.42,-1.57 -0.02,-0.02 -0.04,-0.04 -0.07,-0.06 -1.07,-1 -2.3,-1.84 -3.65,-2.46 0,0 -0.01,0 -0.01,0 -0.64,-0.3 -1.31,-0.54 -2,-0.74 -0.04,-0.01 -0.09,-0.04 -0.13,-0.05 -0.55,-0.15 -1.12,-0.27 -1.7,-0.36 -0.08,-0.01 -0.16,-0.03 -0.24,-0.04 -0.6,-0.08 -1.2,-0.13 -1.82,-0.13 H 674.7 c -0.02,0 -0.04,0 -0.07,0 -28.2,0.02 -58.31,15.37 -58.33,58.36 0,0.01 0,0.02 0,0.03 0,0.01 0,0.02 0,0.03 V 510 c 0,3.86 1.57,7.36 4.1,9.89 2.53,2.53 6.03,4.1 9.89,4.1 h 0.02 c 1.15,-0.01 2.24,-0.17 3.3,-0.43 z" />
+              </g>
+            </g>
+          </svg>
+        </div>
+        <div className="icons">
+          {loggedIn && (
+            <div className="logout" onClick={logout}>
+              <svg
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M6.31111 11.2L7.55556 12.4444L12 8L7.55556 3.55556L6.31111 4.8L8.62222 7.11111H0V8.88889H8.62222L6.31111 11.2ZM14.2222 0H1.77778C0.8 0 0 0.8 0 1.77778V5.33333H1.77778V1.77778H14.2222V14.2222H1.77778V10.6667H0V14.2222C0 15.2 0.8 16 1.77778 16H14.2222C15.2 16 16 15.2 16 14.2222V1.77778C16 0.8 15.2 0 14.2222 0Z"
+                />
+              </svg>
+            </div>
+          )}
+          <div className="exit" onClick={close}>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+              <g>
+                <path d="M12.255 6.992a.75.75 0 1 0-1.023-1.097L9.037 7.94 6.992 5.745a.75.75 0 0 0-1.097 1.023L7.94 8.963l-2.195 2.045a.75.75 0 0 0 1.023 1.097l2.195-2.045 2.045 2.195a.75.75 0 0 0 1.097-1.023L10.06 9.037l2.195-2.045z" />
+                <path
+                  fillRule="evenodd"
+                  d="M.75 9a8.25 8.25 0 1 1 16.5 0A8.25 8.25 0 1 1 .75 9zM9 15.75a6.75 6.75 0 1 1 0-13.5 6.75 6.75 0 1 1 0 13.5z"
+                />
+              </g>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div className="body">
+        <div className="connection">
+          <svg viewBox="0 0 113 113" xmlns="http://www.w3.org/2000/svg">
+            <g clipPath="url(#clip0_625_565)">
+              <path
+                d="M24.7188 63.5625H88.2812C101.912 63.5625 113 52.4744 113 38.8438C113 25.2131 101.912 14.125 88.2812 14.125H28.25C28.25 6.32094 21.9291 0 14.125 0C6.32094 0 0 6.32094 0 14.125C0 21.9291 6.32094 28.25 14.125 28.25C19.3371 28.25 23.843 25.3897 26.2937 21.1875H88.2812C98.0134 21.1875 105.938 29.1116 105.938 38.8438C105.938 48.5759 98.0134 56.5 88.2812 56.5H24.7188C11.0881 56.5 0 67.5881 0 81.2188C0 94.8494 11.0881 105.938 24.7188 105.938H86.7063C89.1499 110.14 93.6558 113 98.875 113C106.679 113 113 106.679 113 98.875C113 91.0709 106.679 84.75 98.875 84.75C91.0709 84.75 84.75 91.0709 84.75 98.875H24.7188C14.9866 98.875 7.0625 90.9509 7.0625 81.2188C7.0625 71.4866 14.9866 63.5625 24.7188 63.5625Z"
+                fill="url(#paint0_linear_625_565)"
+              />
+            </g>
+            <defs>
+              <linearGradient
+                id="paint0_linear_625_565"
+                x1="56.5"
+                y1="0"
+                x2="56.5"
+                y2="113"
+                gradientUnits="userSpaceOnUse">
+                <stop stopColor="#1F6E46" />
+                <stop offset="1" stopColor="#484848" stopOpacity="0" />
+              </linearGradient>
+              <clipPath id="clip0_625_565">
+                <rect width="113" height="113" fill="white" />
+              </clipPath>
+            </defs>
+          </svg>
+        </div>
+        <div className="connection-text">
+          {!loggedIn && <>Looks like you’re not connected.</>}
+          {loggedIn && <>Connected to Lume Web.</>}
+        </div>
+        <div className="button-container">
+          {loggedIn && (
+            <button className="dashboard-btn" onClick={openDashboard}>
+              <svg
+                width=""
+                height=""
+                viewBox=""
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <g clipPath="url(#clip0_625_287)">
+                  <path
+                    d="M0 8C0 9.58225 0.469192 11.129 1.34824 12.4446C2.22729 13.7602 3.47672 14.7855 4.93853 15.391C6.40034 15.9965 8.00887 16.155 9.56072 15.8463C11.1126 15.5376 12.538 14.7757 13.6569 13.6569C14.7757 12.538 15.5376 11.1126 15.8463 9.56072C16.155 8.00887 15.9965 6.40034 15.391 4.93853C14.7855 3.47672 13.7602 2.22729 12.4446 1.34824C11.129 0.469192 9.58225 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8Z"
+                    fill="#BFBFBF"
+                  />
+                  <path
+                    d="M11.4999 10.545V12.0225C11.4999 12.0824 11.4763 12.1399 11.4342 12.1825C11.392 12.2251 11.3348 12.2494 11.2749 12.25H4.4999C4.44 12.2494 4.38277 12.2251 4.34065 12.1825C4.29852 12.1399 4.2749 12.0824 4.2749 12.0225V10.545C4.2749 9.35251 5.8924 8.38501 7.8874 8.38501C9.8824 8.38501 11.4999 9.35251 11.4999 10.545Z"
+                    stroke="#1E1F21"
+                    strokeWidth="2"
+                    strokeMiterlimit="10"
+                    strokeLinecap="round"
+                  />
+                  <path
+                    d="M7.88747 6.84C8.77389 6.84 9.49247 6.14828 9.49247 5.295C9.49247 4.44172 8.77389 3.75 7.88747 3.75C7.00105 3.75 6.28247 4.44172 6.28247 5.295C6.28247 6.14828 7.00105 6.84 7.88747 6.84Z"
+                    stroke="#1E1F21"
+                    strokeWidth="2"
+                    strokeMiterlimit="10"
+                    strokeLinecap="round"
+                  />
+                </g>
+                <defs>
+                  <clipPath id="clip0_625_287">
+                    <rect width="16" height="16" fill="white" />
+                  </clipPath>
+                </defs>
+              </svg>
+              <span>Dashboard</span>
+            </button>
+          )}
+          {!loggedIn && (
+            <button className="login-btn" onClick={openAccount}>
+              <span>Login</span>
+            </button>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

ui/popup.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lume Web</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./popup.js"></script>
+  </body>
+</html>

ui/popup.js

@@ -0,0 +1,8 @@
+import { createRoot } from "react-dom";
+import React from "react";
+
+import App from "./apps/popup/App.tsx";
+
+const root = createRoot(document.getElementById("app"));
+
+root.render(React.createElement(App));

ui/tailwind.config.js

@@ -3,6 +3,7 @@ module.exports = {
     "./onboarding.html",
     "./account.html",
     "./dashboard.html",
+    "./popup.html",
     "./src/**/*.{js,ts, tsx}",
   ],
   mode: "jit",

ui/vite.config.js

@@ -12,6 +12,7 @@ export default defineConfig({
         onboarding: resolve(__dirname, "onboarding.html"),
         account: resolve(__dirname, "account.html"),
         dashboard: resolve(__dirname, "dashboard.html"),
+        popup: resolve(__dirname, "popup.html"),
       },
     },
     minify: false,