feat!: rewrite

eslint.config.js

@@ -40,13 +40,6 @@ export default [
                     varsIgnorePattern: '^_',
                 },
             ],
-            '@typescript-eslint/explicit-function-return-type': [
-                'error',
-                {
-                    allowExpressions: true,
-                    allowTypedFunctionExpressions: true,
-                },
-            ],
             '@typescript-eslint/explicit-module-boundary-types': 'error',
             '@typescript-eslint/no-empty-interface': 'error',
             '@typescript-eslint/no-explicit-any': 'error',
@@ -134,7 +127,16 @@ export default [
     //   },
     // Files to ignore
     {
-        ignores: ['dist/**', 'build/**', '.output/**', 'coverage/**', 'node_modules/**', '*.config.js', '*.config.ts'],
+        ignores: [
+            'dist/**',
+            'build/**',
+            '.output/**',
+            'coverage/**',
+            'node_modules/**',
+            '*.config.js',
+            '*.config.ts',
+            '.wxt/**',
+        ],
     },
     // Prettier configuration (must be last)
     prettier,

package.json

@@ -2,9 +2,7 @@
     "name": "ut-lectures-plus",
     "description": "This plugin adds a transcript box (with search) to all LectureOnline and TowerLA lectures from UT Austin! Studying has never been easier.",
     "private": true,
-    "version": "5.0.0",
-    "homepage": "https://github.com/Longhorn-Developers/UT-Lectures-Plus",
-    "license": "MIT",
+    "version": "6.0.0",
     "type": "module",
     "scripts": {
         "dev": "wxt",
@@ -21,23 +19,25 @@
         "format:fix": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\""
     },
     "dependencies": {
-        "solid-js": "^1.9.3"
+        "@corvu/dialog": "^0.2.4",
+        "@corvu/popover": "^0.2.0",
+        "@tailwindcss/vite": "^4.1.3",
+        "@typescript-eslint/eslint-plugin": "^8.31.0",
+        "eslint": "^9.25.1",
+        "eslint-config-prettier": "^10.1.2",
+        "eslint-plugin-jsdoc": "^50.6.10",
+        "eslint-plugin-solid": "^0.14.5",
+        "lucide-solid": "^0.487.0",
+        "prettier-plugin-tailwindcss": "^0.6.11",
+        "remark-breaks": "^4.0.0",
+        "solid-js": "^1.9.5",
+        "solid-markdown": "^2.0.14",
+        "tailwindcss": "^4.1.3"
     },
     "devDependencies": {
-        "@eslint/js": "^9.16.0",
-        "@types/chrome": "^0.0.280",
-        "@typescript-eslint/eslint-plugin": "^8.17.0",
-        "@typescript-eslint/parser": "^8.17.0",
-        "@wxt-dev/module-solid": "^1.1.2",
-        "eslint": "^9.16.0",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-jsdoc": "^50.6.0",
-        "eslint-plugin-solid": "^0.14.4",
-        "globals": "^15.13.0",
-        "prettier": "3.4.1",
-        "typescript": "^5.7.2",
-        "typescript-eslint": "^8.17.0",
-        "wxt": "^0.19.13"
+        "@wxt-dev/module-solid": "^1.1.3",
+        "typescript": "^5.8.3",
+        "wxt": "^0.20.0"
     },
     "trustedDependencies": [
         "spawn-sync"

src/assets/tailwind.css

@@ -0,0 +1,142 @@
+@import "tailwindcss";
+
+@theme {
+  --color-ut-burntorange: #bf5700;
+  --color-ut-black: #333f48;
+  --color-theme-black: #1a2024;
+
+  --ease-in-out-expo: cubic-bezier(0.46, 0, 0.21, 1);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+
+  --animate-scale-in: scale-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  --animate-scale-out: scale-out 250ms cubic-bezier(0.5, 0, 0.75, 0) forwards;
+
+  --animate-slide-in: slide-in 500ms var(--ease-in-out-expo) forwards;
+  --animate-slide-out: slide-out 500ms var(--ease-out-expo) forwards;
+  --animate-expand: expand 300ms var(--ease-in-out-expo) forwards;
+  --animate-collapse: collapse 300ms var(--ease-out-expo) forwards;
+
+  --animate-in: enter 150ms ease;
+  --animate-out: exit 150ms ease;
+
+  @keyframes scale-in {
+    0% {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+    60% {
+      opacity: 1;
+      transform: scale(1.05);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes scale-out {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+  }
+
+  @keyframes slide-in {
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-out {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes expand {
+    0% {
+      width: 80px;
+      opacity: 0.7;
+    }
+    100% {
+      width: 100%;
+      opacity: 1;
+    }
+  }
+
+  @keyframes collapse {
+    0% {
+      width: 100%;
+    }
+    100% {
+      width: 24.5px;
+    }
+  }
+
+  @keyframes enter {
+    from {
+      opacity: var(--tw-enter-opacity, 1);
+      transform: translate3d(
+          var(--tw-enter-translate-x, 0),
+          var(--tw-enter-translate-y, 0),
+          0
+        )
+        scale3d(
+          var(--tw-enter-scale, 1),
+          var(--tw-enter-scale, 1),
+          var(--tw-enter-scale, 1)
+        );
+    }
+  }
+
+  @keyframes exit {
+    to {
+      opacity: var(--tw-exit-opacity, 1);
+      transform: translate3d(
+          var(--tw-exit-translate-x, 0),
+          var(--tw-exit-translate-y, 0),
+          0
+        )
+        scale3d(
+          var(--tw-exit-scale, 1),
+          var(--tw-exit-scale, 1),
+          var(--tw-exit-scale, 1)
+        );
+    }
+  }
+}
+
+@utility fade-in-* {
+  --tw-enter-opacity: --value(percentage, ratio);
+}
+@utility fade-out-* {
+  --tw-exit-opacity: --value(percentage, ratio);
+}
+
+@utility zoom-in-* {
+  --tw-enter-scale: --value(percentage, ratio);
+}
+@utility zoom-out-* {
+  --tw-exit-scale: --value(percentage, ratio);
+}
+
+@utility slide-in-from-top-* {
+  --tw-enter-translate-y: calc(--value(percentage) * -1);
+  --tw-enter-translate-y: calc(--value(ratio) * -100%);
+  --tw-enter-translate-y: calc(--value(integer) * var(--spacing) * -1);
+}
+
+@utility slide-out-to-top-* {
+  --tw-exit-translate-y: calc(--value(percentage) * -1);
+  --tw-exit-translate-y: calc(--value(ratio) * -100%);
+  --tw-exit-translate-y: calc(--value(integer) * var(--spacing) * -1);
+}

src/components/content/Button.tsx

@@ -0,0 +1,69 @@
+import { createSignal, JSX } from 'solid-js';
+import type { LucideIcon } from 'lucide-solid';
+
+interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+    label?: string;
+    icon: LucideIcon;
+    active: boolean;
+}
+
+/**
+ * Button component
+ *
+ * @param props - The button properties
+ * @param props.label - The label for the button
+ * @param props.icon - The icon component for the button
+ * @param props.active - Whether the button is active
+ *
+ * @returns The button component
+ */
+const Button = (props: ButtonProps): JSX.Element => {
+    const [isHovered, setIsHovered] = createSignal(false);
+
+    // Consider a button to be in expanded state when either hovered or active
+    const isExpanded = () => isHovered() || props.active;
+
+    return (
+        <button
+            title={props.title || props.label}
+            onClick={e => {
+                if (typeof props.onClick === 'function') {
+                    props.onClick(e);
+                }
+            }}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+            class={`flex h-7 items-center rounded bg-slate-100 px-1.5 py-1 transition-colors duration-400 hover:cursor-pointer hover:bg-slate-200 ${props.classList}`}
+            classList={{
+                'bg-ut-burntorange hover:bg-ut-burntorange/90': props.active,
+                'bg-slate-100': !props.label,
+            }}
+            {...props}
+        >
+            <props.icon
+                class='text-theme-black size-4 stroke-2 transition-all duration-400 ease-in-out'
+                classList={{
+                    'text-white': props.active,
+                }}
+            />
+            {props.label && (
+                <span
+                    class='w-fit overflow-hidden text-xs font-medium whitespace-nowrap text-slate-800 transition-all duration-400 ease-in-out'
+                    classList={{
+                        'opacity-0': !isExpanded(),
+                        'max-w-0': !isExpanded(),
+                        'pl-0': !isExpanded(),
+                        'opacity-100': isExpanded(),
+                        'max-w-[100px]': isExpanded(),
+                        'pl-1': isExpanded(),
+                        'text-white': props.active,
+                    }}
+                >
+                    {props.label}
+                </span>
+            )}
+        </button>
+    );
+};
+
+export default Button;