Refactored the player button component, updated the button display logic, and deleted the unused style files

structure.md

@@ -1,38 +1,38 @@
-Here's a brief summary of each of these files and directories:
+Here's a brief summary of each of these files and directories:<br/>
+<br/>
+📂 {rootDir}/<br/>
+   📁 .output/<br/>
+   📁 .wxt/<br/>
+   📁 assets/<br/>
+   📁 components/<br/>
+   📁 composables/<br/>
+   📁 entrypoints/<br/>
+   📁 hooks/<br/>
+   📁 modules/<br/>
+   📁 public/<br/>
+   📁 utils/<br/>
+   📄 .env<br/>
+   📄 .env.publish<br/>
+   📄 app.config.ts<br/>
+   📄 package.json<br/>
+   📄 tsconfig.json<br/>
+   📄 web-ext.config.ts<br/>
+   📄 wxt.config.ts<br/>
 
-📂 {rootDir}/
-   📁 .output/
-   📁 .wxt/
-   📁 assets/
-   📁 components/
-   📁 composables/
-   📁 entrypoints/
-   📁 hooks/
-   📁 modules/
-   📁 public/
-   📁 utils/
-   📄 .env
-   📄 .env.publish
-   📄 app.config.ts
-   📄 package.json
-   📄 tsconfig.json
-   📄 web-ext.config.ts
-   📄 wxt.config.ts
-
-.output/: All build artifacts will go here
-.wxt/: Generated by WXT, it contains TS config
-assets/: Contains all CSS, images, and other assets that should be processed by WXT
-components/: Auto-imported by default, contains UI components
-composables/: Auto-imported by default, contains source code for your project's composable functions for Vue
-entrypoints/: Contains all the entrypoints that get bundled into your extension
-hooks/: Auto-imported by default, contains source code for your project's hooks for React and Solid
-modules/: Contains local WXT Modules for your project
-public/: Contains any files you want to copy into the output folder as-is, without being processed by WXT
-utils/: Auto-imported by default, contains generic utilities used throughout your project
-.env: Contains Environment Variables
-.env.publish: Contains Environment Variables for publishing
-app.config.ts: Contains Runtime Config
-package.json: The standard file used by your package manager
-tsconfig.json: Config telling TypeScript how to behave
-web-ext.config.ts: Configure Browser Startup
-wxt.config.ts: The main config file for WXT projects
+.output/: All build artifacts will go here<br/>
+.wxt/: Generated by WXT, it contains TS config<br/>
+assets/: Contains all CSS, images, and other assets that should be processed by WXT<br/>
+components/: Auto-imported by default, contains UI components<br/>
+composables/: Auto-imported by default, contains source code for your project's composable functions for Vue<br/>
+entrypoints/: Contains all the entrypoints that get bundled into your extension<br/>
+hooks/: Auto-imported by default, contains source code for your project's hooks for React and Solid<br/>
+modules/: Contains local WXT Modules for your project<br/>
+public/: Contains any files you want to copy into the output folder as-is, without being processed by WXT<br/>
+utils/: Auto-imported by default, contains generic utilities used throughout your project<br/>
+.env: Contains Environment Variables<br/>
+.env.publish: Contains Environment Variables for publishing<br/>
+app.config.ts: Contains Runtime Config<br/>
+package.json: The standard file used by your package manager<br/>
+tsconfig.json: Config telling TypeScript how to behave<br/>
+web-ext.config.ts: Configure Browser Startup<br/>
+wxt.config.ts: The main config file for WXT projects<br/>