refactor: rename app and small fixes to appease linter

jmininger · jmininger · commit 021e97560021 · 2024-09-14T21:31:12.000-04:00
diff --git a/README.md b/README.md
@@ -1,8 +1,45 @@
-# React + Vite
+# Tab Control
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Purpose
 
-Currently, two official plugins are available:
+**Tab Control** is a Chrome/Brave extension designed to help users efficiently manage their browser windows and tabs. It allows you to view all open windows, see the active tab in each window, and merge multiple windows into a single window seamlessly. This extension is particularly useful for users who handle numerous tabs across different windows and seek a streamlined way to organize their browsing sessions.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Building and Publishing
+
+### Building the Extension
+
+1. **Install Dependencies**
+
+   Install the necessary packages using npm:
+
+   ```bash
+   npm install
+   ```
+
+2. **Build the Project**
+
+   Use Vite to build the project for production:
+
+   ```bash
+   npm run build
+   ```
+
+   This will generate the production-ready files in the `dist` directory.
+
+### Loading the Extension into Chrome/Brave
+
+1. **Open the Extensions Page**
+
+   Navigate to the extensions page in Chrome or Brave by entering `chrome://extensions/` in the address bar.
+
+2. **Enable Developer Mode**
+
+   Toggle the **Developer mode** switch located at the top right corner of the page.
+
+3. **Load Unpacked Extension**
+
+   Click on the **Load unpacked** button and select the `dist` folder from your project directory.
+
+4. **Verify the Extension**
+
+   The **Chrome Tab Manager** extension should now appear in your list of installed extensions. Click on its icon to ensure it's functioning as expected.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>Chrome Tab Manager</title>
+    <title>Tab Control</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "chrome-tab-manager",
+  "name": "tab-control",
   "private": true,
   "version": "0.0.0",
   "type": "module",
diff --git a/src/TabItem.jsx b/src/TabItem.jsx
@@ -1,5 +1,6 @@
+import PropTypes from 'prop-types';
+
 // TabItem.jsx
-import React from 'react';
 
 function TabItem({ tab }) {
   return (
@@ -18,5 +19,11 @@ function TabItem({ tab }) {
   );
 }
 
-export default TabItem;
+TabItem.propTypes = {
+  tab: PropTypes.shape({
+    favIconUrl: PropTypes.string,
+    title: PropTypes.string.isRequired,
+  }).isRequired,
+};
 
+export default TabItem;
diff --git a/src/WindowItem.jsx b/src/WindowItem.jsx
@@ -1,14 +1,13 @@
 // WindowItem.jsx
-import React, { useState, useRef, useEffect } from 'react'; // {{ edit: Import useRef and useEffect }}
-import PropTypes from 'prop-types'; // {{ edit: Import PropTypes for props validation }}
+import { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import TabItem from './TabItem';
 
 function WindowItem({ window, isSelected, onSelect }) {
   const [dropdownOpen, setDropdownOpen] = useState(false);
-  const dropdownRef = useRef(null); // {{ edit: Create ref for dropdown }}
+  const dropdownRef = useRef(null);
   const activeTab = window.tabs.find(tab => tab.active);
 
-  // {{ edit: Handle click outside to close dropdown }}
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -29,10 +28,10 @@ function WindowItem({ window, isSelected, onSelect }) {
 
   return (
     <div
-      className={`window-item ${isSelected ? 'selected' : ''}`} // {{ edit: Add 'selected' class based on isSelected prop }}
+      className={`window-item ${isSelected ? 'selected' : ''}`}
       onClick={() => onSelect(window.id.toString())}
     >
-      <span className="window-label">{activeTab.title}</span> 
+      <span className="window-label">{activeTab.title}</span>
       {activeTab && (
         <div className="active-tab" onClick={(e) => e.stopPropagation()} ref={dropdownRef}>
           <TabItem tab={activeTab} />
@@ -41,7 +40,7 @@ function WindowItem({ window, isSelected, onSelect }) {
           </button>
           {dropdownOpen && (
             <ul className="tab-dropdown">
-              {window.tabs.map(tab => ( // {{ edit: Include all tabs in dropdown }}
+              {window.tabs.map(tab => (
                 <TabItem key={tab.id} tab={tab} />
               ))}
             </ul>
@@ -52,7 +51,7 @@ function WindowItem({ window, isSelected, onSelect }) {
   );
 }
 
-WindowItem.propTypes = { // {{ edit: Define prop types for WindowItem }}
+WindowItem.propTypes = {
   window: PropTypes.shape({
     id: PropTypes.number.isRequired,
     tabs: PropTypes.arrayOf(PropTypes.object).isRequired,
diff --git a/src/utils.js b/src/utils.js
@@ -1,6 +1,8 @@
 // utils.js
 // Utility functions to wrap Chrome API callbacks in Promises
 
+/* global chrome */
+
 export function getAllWindows(getInfo) {
   return new Promise((resolve) => {
     chrome.windows.getAll(getInfo, (windows) => {

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "name": "chrome-tab-manager",`
	`2`	`+ "name": "tab-control",`
`3`	`3`	`"private": true,`
`4`	`4`	`"version": "0.0.0",`
`5`	`5`	`"type": "module",`