CapSoftware · neo773 · Mar 12, 2025 · Mar 15, 2025 · Mar 15, 2025 · Apr 7, 2025
diff --git a/.gitignore b/.gitignore
@@ -29,7 +29,6 @@ target
 *.sln
 *.sw?
 .turbo
-pnpm-lock.yaml
 .zed
 .output
 .vinxi

diff --git a/apps/loom-importer-extension/.gitignore b/apps/loom-importer-extension/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/apps/loom-importer-extension/README.md b/apps/loom-importer-extension/README.md
@@ -0,0 +1,19 @@
+## Cap Loom Importer
+
+This is a Chrome extension that allows you to import your Loom videos into Cap.
+
+## Structure
+
+```
+├── src
+│   ├── background.ts # Background script for handling auth
+│   ├── content_scripts
+│   │   └── main.tsx # Import UI injected on Loom's website
+│   ├── popup
+│       └── popup.tsx # Popup for the extension (shown when the extension is clicked)
+└── vite.config.ts
+```
+
+## Development
+
+Go to chrome://extensions/ and click "Load unpacked" and select the `dist` folder.
diff --git a/apps/loom-importer-extension/index.html b/apps/loom-importer-extension/index.html
@@ -0,0 +1,14 @@
+<!-- Do not move this file's location, it must be in the root of the project -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cap Loom Importer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/content_scripts/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/loom-importer-extension/package.json b/apps/loom-importer-extension/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@cap/loom-importer-extension",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "dotenv -e ../../.env -- vite",
+    "build": "dotenv -e ../../.env -- tsc && vite build",
+    "watch": "dotenv -e ../../.env -- vite build --watch",
+    "type-check": "tsc --noEmit",
+    "dev:extension": "echo '⚡ Building in watch mode. Load the extension from the dist folder in Chrome extensions page (chrome://extensions/)' && pnpm watch",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@cap/ui": "workspace:^",
+    "@cap/ui-solid": "workspace:^",
+    "js-confetti": "^0.12.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-frame-component": "^5.2.1",
+    "vite-tsconfig-paths": "^3.3.17",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@types/chrome": "^0.0.176",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^1.0.7",
+    "hot-reload-extension-vite": "^1.0.13",
+    "tailwindcss": "^3.4.16",
+    "typescript": "^4.4.4",
+    "vite": "^2.7.2"
+  }
+}
diff --git a/apps/loom-importer-extension/popup.html b/apps/loom-importer-extension/popup.html
@@ -0,0 +1,12 @@
+<!-- Do not move this file's location, it must be in the root of the project -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Cap Loom Importer Popup</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/popup/popup.tsx"></script>
+  </body>
+</html>
diff --git a/apps/loom-importer-extension/postcss.config.cjs b/apps/loom-importer-extension/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/loom-importer-extension/public/assets/images/icons/icon128.png b/apps/loom-importer-extension/public/assets/images/icons/icon128.png
diff --git a/apps/loom-importer-extension/public/assets/images/icons/icon16.png b/apps/loom-importer-extension/public/assets/images/icons/icon16.png
diff --git a/apps/loom-importer-extension/public/assets/images/icons/icon32.png b/apps/loom-importer-extension/public/assets/images/icons/icon32.png
diff --git a/apps/loom-importer-extension/public/assets/images/icons/icon48.png b/apps/loom-importer-extension/public/assets/images/icons/icon48.png
diff --git a/apps/loom-importer-extension/public/assets/js/initializeUI.js b/apps/loom-importer-extension/public/assets/js/initializeUI.js
@@ -0,0 +1,8 @@
+(async () => {
+  const app = document.createElement("div");
+  app.id = "root";
+  document.body.append(app);
+
+  const src = chrome?.runtime?.getURL("/react/main.js");
+  await import(src);
+})();
diff --git a/apps/loom-importer-extension/public/manifest.json b/apps/loom-importer-extension/public/manifest.json
@@ -0,0 +1,45 @@
+{
+  "manifest_version": 3,
+  "name": "Cap Loom Importer",
+  "description": "Import your Loom data to Cap",
+  "version": "1.0.0",
+  "icons": {
+    "16": "assets/images/icons/icon16.png",
+    "48": "assets/images/icons/icon48.png",
+    "128": "assets/images/icons/icon128.png"
+  },
+  "content_scripts": [
+    {
+      "matches": ["https://www.loom.com/*"],
+      "js": ["/assets/js/initializeUI.js"],
+      "run_at": "document_end",
+      "all_frames": true
+    }
+  ],
+  "background": {
+    "service_worker": "react/background.js",
+    "type": "module"
+  },
+  "action": {
+    "default_popup": "popup.html"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "/react/main.js",
+        "/react/vendor.js",
+        "/react/main.css",
+        "/react/jsx-runtime.js",
+        "/react/client.js",
+        "/react/urls.js"
+      ],
+      "matches": ["https://www.loom.com/*"]
+    }
+  ],
+  "permissions": ["cookies", "storage", "tabs", "scripting"],
+  "host_permissions": [
+    "https://cap.so/*",
+    "http://localhost:3000/*",
+    "https://www.loom.com/*"
+  ]
+}
diff --git a/apps/loom-importer-extension/src/api/cap.ts b/apps/loom-importer-extension/src/api/cap.ts
@@ -0,0 +1,130 @@
+import { LoomExportData } from "../types/loom";
+import { getApiBaseUrl } from "../utils/urls";
+
+interface ApiResponse<T> {
+  data: T;
+  error?: string;
+}
+
+interface UserResponse {
+  user: User;
+  expires: string;
+}
+interface User {
+  name: string;
+  email: string;
+  image: string;
+  id: string;
+}
+
+interface LoomImportResponse {
+  success: boolean;
+  message: string;
+}
+
+interface Workspace {
+  id: string;
+  name: string;
+  ownerId: string;
+  metadata: null;
+  allowedEmailDomain: null;
+  customDomain: null;
+  domainVerified: null;
+  createdAt: string;
+  updatedAt: string;
+  workosOrganizationId: null;
+  workosConnectionId: null;
+}
+
+interface WorkspaceResponse {
+  workspaces: Workspace[];
+}
+
+export class CapApi {
+  private baseUrl = getApiBaseUrl();
+  private headers: HeadersInit = {
+    accept: "*/*",
+    "content-type": "application/json",
+  };
+
+  private async getAuthToken(): Promise<string | null> {
+    return new Promise((resolve) => {
+      chrome.runtime.sendMessage({ action: "getAuthStatus" }, (response) => {
+        resolve(response?.token || null);
+      });
+    });
+  }
+
+  private async getHeaders(): Promise<HeadersInit> {
+    const token = await this.getAuthToken();
+    return {
+      ...this.headers,
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+    };
+  }
+
+  private async request<T>(
+    endpoint: string,
+    options: RequestInit = {}
+  ): Promise<ApiResponse<T>> {
+    try {
+      const headers = await this.getHeaders();
+      const response = await fetch(`${this.baseUrl}${endpoint}`, {
+        ...options,
+        headers: {
+          ...headers,
+          ...options.headers,
+        },
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || "API request failed");
+      }
+
+      return { data: data as T };
+    } catch (error) {
+      return {
+        data: {} as T,
+        error:
+          error instanceof Error ? error.message : "Unknown error occurred",
+      };
+    }
+  }
+
+  public async getUser(): Promise<UserResponse> {
+    const response = await this.request<UserResponse>("/auth/session");
+    return response.data;
+  }
+
+  /**
+   * Sends imported Loom data to Cap.so
+   * @param loomData The exported Loom data to import into Cap.so
+   * @returns Response with import status
+   */
+  public async sendLoomData(
+    loomData: LoomExportData
+  ): Promise<LoomImportResponse> {
+    const response = await this.request<LoomImportResponse>("/import/loom", {
+      method: "POST",
+      body: JSON.stringify(loomData),
+    });
+
+    if (response.error) {
+      return {
+        success: false,
+        message: response.error,
+      };
+    }
+
+    return response.data;
+  }
+
+  public async getWorkspaceDetails(): Promise<WorkspaceResponse> {
+    const response = await this.request<WorkspaceResponse>(
+      "/settings/workspace/details"
+    );
+    return response.data;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,7 +29,6 @@ target @@
     *.sln
     *.sw?
     .turbo
-    pnpm-lock.yaml
     .zed
     .output
     .vinxi
@@ Expand Down @@