Merge pull request #114 from Friedrich482/features

Websocket connection between dashboard and extension and extension ux improvements and fixes

Author: Friedrich482

apps/dashboard/src/App.tsx

@@ -11,6 +11,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { createTRPCClient, httpBatchLink } from "@trpc/client";
 
+import useExtensionWebsocket from "./hooks/useExtensionWebsocket";
 import { TRPCProvider } from "./utils/trpc";
 
 function makeQueryClient() {
@@ -85,6 +86,8 @@ function App() {
     }),
   );
 
+  useExtensionWebsocket();
+
   return (
     <ThemeProvider>
       <QueryClientProvider client={queryClient}>

apps/dashboard/src/components/project-page/files-list/LanguagesDropDown.tsx

@@ -42,7 +42,7 @@ const LanguagesDropDown = ({
                 key={entry.languageSlug}
                 onCheckedChange={() => handleCheckEntry(entry)}
                 onSelect={(e) => e.preventDefault()}
-                className="cursor-pointer gap-3 rounded-md px-3 py-1 text-base"
+                className="cursor-pointer gap-3 rounded-md py-1 text-base"
               >
                 <span
                   className="size-4 shrink-0 rounded-full"

apps/dashboard/src/hooks/useExtensionWebsocket.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useRef } from "react";
+
+import { DASHBOARD_DEVELOPMENT_WS_PORT } from "@repo/common/constants";
+import { WsData, WsDataSchema } from "@repo/common/types-schemas";
+
+export const initializeWebSocket = () => {
+  const isDev = import.meta.env.DEV;
+  let wsUrl: string;
+
+  if (isDev) {
+    wsUrl = `ws://localhost:${DASHBOARD_DEVELOPMENT_WS_PORT}`;
+  } else {
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    wsUrl = `${protocol}//${window.location.host}`;
+  }
+
+  const ws = new WebSocket(wsUrl);
+
+  ws.onopen = () => {
+    ws.send(JSON.stringify({ type: "ready" } satisfies WsData));
+  };
+
+  ws.onmessage = async (event) => {
+    try {
+      const data = JSON.parse(event.data);
+      const validated = WsDataSchema.safeParse(data);
+      if (!validated.success) {
+        console.error("Invalid message shape");
+        return;
+      }
+
+      const { type } = validated.data;
+
+      if (type === "navigate") {
+        const { path } = validated.data;
+
+        window.history.pushState({}, "", path);
+        window.dispatchEvent(new PopStateEvent("popstate"));
+
+        if (window.Notification && Notification.permission === "granted") {
+          const notification = new Notification("Dashboard", {
+            body: "Click to go to the dashboard",
+            icon: "/moon.svg",
+            requireInteraction: false,
+          });
+
+          notification.onclick = () => {
+            window.focus();
+            notification.close();
+          };
+
+          setTimeout(() => notification.close(), 3000);
+        } else if (
+          window.Notification &&
+          Notification.permission === "default"
+        ) {
+          Notification.requestPermission();
+        } else {
+          window.focus();
+        }
+
+        ws.send(JSON.stringify({ type: "navigated", path } satisfies WsData));
+      }
+    } catch (error) {
+      console.error("Failed to handle WebSocket message:", error);
+    }
+  };
+
+  ws.onerror = (error) => {
+    console.error("WebSocket error:", error);
+  };
+
+  return ws;
+};
+
+const useExtensionWebsocket = () => {
+  const wsRef = useRef<WebSocket>(null);
+
+  useEffect(() => {
+    wsRef.current = initializeWebSocket();
+
+    return () => {
+      if (wsRef.current) {
+        if (wsRef.current.readyState === WebSocket.OPEN) {
+          wsRef.current.send(
+            JSON.stringify({ type: "closed" } satisfies WsData),
+          );
+        }
+        wsRef.current.close();
+      }
+    };
+  }, []);
+};
+
+export default useExtensionWebsocket;

apps/vscode-extension/package.json

@@ -2,7 +2,7 @@
   "name": "mooncode",
   "displayName": "MoonCode",
   "description": "MoonCode is an extension that tracks your coding time (like WakaTime) and gives you a detailed summary about all your coding statistics. With MoonCode, developers get the full history of their coding activity.",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "icon": "./public/moon.png",
   "publisher": "Friedrich482",
   "author": {
@@ -127,6 +127,7 @@
     "@types/mocha": "^10.0.9",
     "@types/node": "20.x",
     "@types/vscode": "^1.95.0",
+    "@types/ws": "^8.18.1",
     "@typescript-eslint/eslint-plugin": "^8.23.0",
     "@typescript-eslint/parser": "^8.23.0",
     "@vscode/test-cli": "^0.0.10",
@@ -145,6 +146,7 @@
     "dotenv": "^16.0.3",
     "express": "^4.21.2",
     "get-port": "^7.1.0",
+    "ws": "^8.19.0",
     "zod": "^4.0.17"
   }
 }

apps/vscode-extension/src/extension.ts

@@ -2,9 +2,11 @@ import vscode from "vscode";
 
 import calculateTime from "@/utils/time/calculateTime";
 
+import { DashboardServer } from "./types-schemas";
+import { getLoginContext } from "./utils/auth/loginContext";
 import registerAuthUriHandler from "./utils/auth/registerAuthUriHandler";
 import initExtensionCommands from "./utils/commands/initExtensionCommands";
-import serveDashboard from "./utils/dashboard/serveDashboard";
+import serveDashboard from "./utils/dashboard/serve-dashboard/serveDashboard";
 import setEnvironmentContext from "./utils/env/setEnvironmentContext";
 import fetchInitialData from "./utils/fetchInitialData";
 import initializeFiles from "./utils/files/initializeFiles";
@@ -14,21 +16,24 @@ import addStatusBarItem from "./utils/status-bar/addStatusBarItem";
 import setStatusBarItem from "./utils/status-bar/setStatusBarItem";
 
 let extensionContext: vscode.ExtensionContext;
-let dashboardPort: number | undefined;
+let dashboardServer: DashboardServer | undefined;
 let statusBarItem: vscode.StatusBarItem;
 
 export async function activate(context: vscode.ExtensionContext) {
   extensionContext = context;
 
   setEnvironmentContext();
-  dashboardPort = await serveDashboard(context);
+  dashboardServer = await serveDashboard(context);
   registerAuthUriHandler();
 
   statusBarItem = addStatusBarItem();
 
   const { timeSpent, initialFilesData } = await fetchInitialData();
 
-  setStatusBarItem({ type: "time", timeSpentToday: timeSpent });
+  const isLoggedIn = getLoginContext();
+  if (isLoggedIn) {
+    setStatusBarItem({ type: "time", timeSpentToday: timeSpent });
+  }
 
   initializeFiles(initialFilesData);
 
@@ -58,13 +63,13 @@ export const getExtensionContext = () => {
   return extensionContext;
 };
 
-export const getDashboardPort = () => {
-  if (!dashboardPort) {
+export const getDashboardServer = () => {
+  if (!dashboardServer) {
     throw new Error(
-      "Failed to start the extension. Dashboard could not be served."
+      "Failed to start the extension. Dashboard could not be served.",
     );
   }
-  return dashboardPort;
+  return dashboardServer;
 };
 
 export const getStatusBarItem = () => {

apps/vscode-extension/src/types-schemas.ts

@@ -43,16 +43,23 @@ export const globalStateInitialDataSchema = z.object({
           languageSlug: z.string().min(1),
           projectName: z.string().min(1),
           fileName: z.string().min(1),
-        })
+        }),
       ),
 
       updatedAt: z.union([
         z.date(),
         z.iso.datetime().transform((str) => new Date(str)),
       ]),
-    })
+    }),
   ),
 });
 export type FileMap = Record<string, FileData>;
 export type GlobalStateData = z.infer<typeof globalStateInitialDataSchema>;
 export type FileDataSync = GlobalStateData["dailyData"][string]["dayFilesData"];
+
+export type DashboardServer = {
+  port: number;
+  navigate: (path: string) => void;
+  isWindowOpen: () => boolean;
+  close: () => void;
+};

apps/vscode-extension/src/utils/auth/getToken.ts

@@ -1,51 +1,30 @@
-import * as vscode from "vscode";
-
 import { getExtensionContext } from "@/extension";
 
-import setStatusBarAfterLogin from "../status-bar/setStatusBarAfterLogin";
-import setStatusBarItem from "../status-bar/setStatusBarItem";
-import login from "./login";
+import setLoginContextAndStatusBar from "../status-bar/setLoginContextAndStatusBar";
+import setLogoutContextAndStatusBar from "../status-bar/setLogoutContextAndStatusBar";
 import parseJwtPayload from "./parseJwtPayload";
-import setLoginContext from "./setLoginContext";
 
 const getToken = async () => {
   const context = getExtensionContext();
 
-  let token = await context.secrets.get("authToken");
+  const token = await context.secrets.get("authToken");
 
   const parsedPayload = parseJwtPayload(token);
 
   if (!parsedPayload.success) {
-    await setLoginContext(false);
-    setStatusBarItem({ type: "auth" });
-
-    await login();
-    token = await context.secrets.get("authToken");
+    await setLogoutContextAndStatusBar();
     return token;
   }
 
   const { exp: expireDate } = parsedPayload.data;
 
   if (!token || expireDate * 1000 < Date.now()) {
-    await setLoginContext(false);
-    setStatusBarItem({ type: "auth" });
-
-    const selection = await vscode.window.showInformationMessage(
-      "You are logged out. Please login",
-      "Login"
-    );
-
-    if (selection !== "Login") {
-      return undefined;
-    }
-
-    await login();
-    token = await context.secrets.get("authToken");
+    await setLogoutContextAndStatusBar();
+    return token;
   }
 
-  await setLoginContext(true);
-  await setStatusBarAfterLogin();
-
+  await setLoginContextAndStatusBar();
   return token;
 };
+
 export default getToken;

apps/vscode-extension/src/utils/auth/login.ts

@@ -1,11 +1,11 @@
 import crypto from "crypto";
 import * as vscode from "vscode";
 
-import { getDashboardPort, getExtensionContext } from "@/extension";
+import { getDashboardServer, getExtensionContext } from "@/extension";
 
 const login = async () => {
   const context = getExtensionContext();
-  const dashboardPort = getDashboardPort();
+  const dashboardServer = getDashboardServer();
 
   try {
     let state = await context.secrets.get("authState");
@@ -19,29 +19,27 @@ const login = async () => {
 
     const callbackUri = await vscode.env.asExternalUri(
       vscode.Uri.parse(
-        `vscode://${publisher}.${extensionId}/auth-callback?state=${state}`
-      )
+        `vscode://${publisher}.${extensionId}/auth-callback?state=${state}`,
+      ),
     );
 
-    const dashboardLoginUrl = vscode.Uri.parse(
-      `http://localhost:${dashboardPort}/login?client=vscode&callback=${encodeURIComponent(callbackUri.toString())}`
-    );
+    const dashboardLoginPath = `/login?client=vscode&callback=${encodeURIComponent(callbackUri.toString())}`;
 
     const selection = await vscode.window.showInformationMessage(
       "Open the local dashboard to login",
-      "Open Dashboard"
+      "Open Dashboard",
     );
 
     if (!selection) {
       return;
     }
 
     if (selection === "Open Dashboard") {
-      vscode.env.openExternal(dashboardLoginUrl);
+      dashboardServer.navigate(dashboardLoginPath);
     }
   } catch (error) {
     vscode.window.showErrorMessage(
-      `An error occurred: ${error instanceof Error ? error.message : error}`
+      `An error occurred: ${error instanceof Error ? error.message : error}`,
     );
   }
 };

…ension/src/utils/auth/setLoginContext.ts …extension/src/utils/auth/loginContext.tsapps/vscode-extension/src/utils/auth/setLoginContext.ts renamed to apps/vscode-extension/src/utils/auth/loginContext.ts apps/vscode-extension/src/utils/auth/setLoginContext.ts renamed to apps/vscode-extension/src/utils/auth/loginContext.ts

@@ -1,11 +1,18 @@
 import vscode from "vscode";
 
+let isLoggedIn = false;
+
 const setLoginContext = async (state: boolean) => {
+  isLoggedIn = state;
   await vscode.commands.executeCommand(
     "setContext",
     "MoonCode.isLoggedIn",
     state,
   );
 };
 
-export default setLoginContext;
+const getLoginContext = () => {
+  return isLoggedIn;
+};
+
+export { getLoginContext, setLoginContext };