refactor: improve button styling and container structure

- Update container to use Coursera's classes and attributes
- Refine button styling with correct padding and rounded corners
- Remove unnecessary tab wrapper classes
- Adjust transition timing to match Coursera's design

src/content/components/CopyTranscriptButton.tsx

@@ -1,26 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { getTranscript } from '../utils/transcript';
 
 export const CopyTranscriptButton: React.FC = () => {
   const [status, setStatus] = useState<
     'idle' | 'copying' | 'success' | 'error'
   >('idle');
-  const [isLecturePage, setIsLecturePage] = useState(false);
-
-  useEffect(() => {
-    const checkIfLecturePage = () => {
-      const url = window.location.href;
-      const learnMatch = url.match(/\/learn\/.*?\/lecture\//);
-      setIsLecturePage(!!learnMatch);
-    };
-
-    checkIfLecturePage();
-  }, []);
-
-  // Don't render the button if we're not on a lecture page
-  if (!isLecturePage) {
-    return null;
-  }
 
   const handleCopy = async () => {
     try {
@@ -34,46 +18,39 @@ export const CopyTranscriptButton: React.FC = () => {
       await navigator.clipboard.writeText(transcript);
       setStatus('success');
 
-      // Reset status after 2 seconds
       setTimeout(() => {
         setStatus('idle');
       }, 2000);
     } catch (error) {
       console.error('Failed to copy transcript:', error);
       setStatus('error');
 
-      // Reset status after 2 seconds
       setTimeout(() => {
         setStatus('idle');
       }, 2000);
     }
   };
 
-  const getButtonText = () => {
-    switch (status) {
-      case 'copying':
-        return 'Copying...';
-      case 'success':
-        return 'Copied ✅';
-      case 'error':
-        return 'Failed to copy';
-      default:
-        return 'Copy Transcript';
-    }
-  };
-
   return (
     <button
       id="coursera-copilot-button"
-      className={`rounded-md inline-flex items-center justify-center min-h-[48px] min-w-[44px] w-fit font-[var(--cds-font-weight-600)] text-sm px-2 py-3 mb-1 mr-6 transition-colors duration-200 ease-in-out outline-none focus:outline-none
-      ${status === 'idle' ? 'bg-transparent text-[var(--cds-color-neutral-primary)] hover:text-[var(--cds-color-interactive-primary-hover)] hover:bg-[var(--cds-color-interactive-background-primary-hover-weak)]' : ''}
+      className={`cds-105 cds-188 cds-190 min-h-[48px] min-w-[44px] max-w-none overflow-visible text-left align-self-end px-2 py-3 mb-1 mr-6 opacity-100 font-[var(--cds-font-weight-600)] tracking-[var(--cds-letter-spacing-100)] whitespace-normal outline-none focus:outline-none focus:ring-0 transition-colors duration-200 ease-out rounded-md
+      ${status === 'idle' ? 'bg-transparent hover:text-[var(--cds-color-interactive-primary-hover)] hover:bg-[var(--cds-color-interactive-background-primary-hover-weak)]' : ''}
       ${status === 'copying' ? 'bg-transparent text-[var(--cds-color-neutral-disabled)] cursor-not-allowed' : ''}
       ${status === 'success' ? 'bg-transparent text-[var(--cds-color-feedback-success)]' : ''}
       ${status === 'error' ? 'bg-transparent text-[var(--cds-color-feedback-error)]' : ''}`}
       onClick={handleCopy}
       disabled={status === 'copying'}
+      tabIndex={-1}
+      type="button"
+      aria-label="Copy transcript"
     >
-      {getButtonText()}
+      <span>
+        {status === 'idle' && 'Copy transcript'}
+        {status === 'copying' && 'Copying...'}
+        {status === 'success' && 'Copied to clipboard ✅ '}
+        {status === 'error' && 'Failed to copy'}
+      </span>
     </button>
   );
 };

src/content/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { CopyTranscriptButton } from './components/CopyTranscriptButton';
 import { findElement } from './utils/domUtils';
+import { shouldInitialize } from './utils/urlUtils';
 import './styles.css';
 
 const TABLIST_SELECTORS = [
@@ -41,6 +42,14 @@ const App = () => {
 const init = async () => {
   console.log('[Coursera Copilot] Initializing extension...');
 
+  // Skip initialization for unsupported pages
+  if (!shouldInitialize(window.location.href)) {
+    console.log(
+      '[Coursera Copilot] Skipping initialization for unsupported page'
+    );
+    return;
+  }
+
   // Check if button already exists
   const existingButton = document.getElementById('coursera-copilot-button');
   if (existingButton) {
@@ -55,9 +64,11 @@ const init = async () => {
   if (tablist) {
     console.log('[Coursera Copilot] Found tablist, injecting button...');
 
-    // Create a container but keep it minimal
     const container = document.createElement('div');
-    container.className = 'inline-block'; // Keep it inline with other elements
+    // Add Coursera's classes and make it behave like their tab items
+    container.className = 'contents cds-button-container css-zgpty rounded-md';
+    container.setAttribute('role', 'tab');
+    container.setAttribute('id', 'transcript-copy-button-container');
     tablist.appendChild(container);
 
     const root = createRoot(container);

src/content/utils/urlUtils.ts

@@ -0,0 +1,7 @@
+export const isLecturePage = (url: string): boolean => {
+  return url.includes('/learn/') && url.includes('/lecture/');
+};
+
+export const shouldInitialize = (url: string): boolean => {
+  return isLecturePage(url);
+};