#9: update readme

CLAUDE.md

@@ -0,0 +1,135 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Common Development Commands
+
+```bash
+# Development
+npm run watch              # Watch mode for development
+npm run build              # Production build
+npm run build:pack         # Build and create dist.zip package
+npm run release            # Build and package for release
+
+# Testing and Quality
+npm test                   # Run Jest tests
+npm run lint               # Run ESLint
+npm run lint:fix           # Fix linting issues automatically
+npm run prettier           # Format code with Prettier
+
+# Utility
+npm run clean              # Clean dist directory
+npm run prepare            # Setup husky hooks
+
+# Chrome Extension Development
+# Load the 'dist' directory in Chrome's extension developer mode after building
+```
+
+## Project Architecture
+
+This is a Chrome extension (Manifest v3) that enhances GitHub and GitHub Enterprise UI with productivity features.
+
+### Core Structure
+
+- **Content Scripts**: Three separate content scripts inject functionality into different GitHub pages:
+  - `content_pr_page.tsx` - Individual PR pages
+  - `content_prs_page.tsx` - PRs listing page
+  - `content_compare_page.tsx` - Compare/diff pages
+
+- **Background Service Worker**: `background.ts` handles JIRA API requests due to CORS restrictions
+
+- **Extension Pages**:
+  - `popup.tsx` - Extension popup interface
+  - `options.tsx` - Options/settings page with tabbed interface
+
+### Key Components
+
+- **Settings Management**: Uses Chrome storage API with Yup schema validation (`src/services/getSettings.ts`)
+- **Multi-Instance Support**: Supports multiple GitHub instances (Enterprise + GitHub.com) via instance configuration
+- **Feature Toggles**: All features are individually toggleable via settings
+- **JIRA Integration**: Fetches issue data through background script to bypass CORS
+
+### Settings Architecture
+
+Settings are validated using Yup schemas and organized into:
+
+- **`instances[]`** - GitHub instance configurations
+  - `pat` - Personal Access Token (must start with `ghp_`, minimum 30 characters)
+  - `org` - GitHub organization name
+  - `repo` - Repository name
+  - `ghBaseUrl` - GitHub API base URL (defaults to `https://api.github.com`)
+  - `randomReviewers` - Comma-separated list of reviewer usernames
+
+- **`features{}`** - Boolean toggles for extension features:
+  - `baseBranchLabels` - Show base branch labels on PRs
+  - `changedFiles` - Display changed files count
+  - `totalLinesPrs` - Show total lines changed on PR list page
+  - `totalLinesPr` - Show total lines changed on individual PR page
+  - `reOrderPrs` - Reorder PRs by custom logic
+  - `addUpdateBranchButton` - Add update branch button
+  - `autoFilter` - Enable automatic PR filtering
+  - `prTitleFromJira` - Auto-populate PR title from JIRA ticket
+  - `descriptionTemplate` - Use custom PR description template
+  - `randomReviewer` - Enable random reviewer assignment
+
+- **`jira{}`** - JIRA integration settings (optional)
+  - `pat` - JIRA Personal Access Token (minimum 30 characters)
+  - `baseUrl` - JIRA instance base URL
+  - `issueKeyRegex` - Regex pattern for JIRA issue keys (e.g., "TEST-\\d+")
+
+- **`autoFilter`** - Custom PR filtering query string (optional)
+- **`descriptionTemplate`** - Custom PR description template text (optional)
+
+### Options Page Structure
+
+The Options page uses a tabbed interface with the following tabs:
+
+- **Feature Toggles** - Individual toggles for all extension features
+- **GH Instances** - GitHub instance configuration (PAT, org, repo, base URL)
+- **Jira** - JIRA integration settings
+- **Import/Export** - Settings backup and restore functionality
+
+Each tab is implemented as a separate component in `src/pages/Tabs/` with dedicated styling and logic.
+
+### Build System
+
+- **Webpack**: Multi-entry build with code splitting (vendor chunk for all except background)
+- **SASS Modules**: CSS modules with local scope and hash-based class names
+- **TypeScript**: Full TypeScript with strict validation
+- **Entry Points**: Separate bundles for popup, options, content scripts, and background
+
+### Chrome Extension Permissions
+
+- `storage` - Chrome storage for settings
+- `host_permissions: ["<all_urls>"]` - Access to all GitHub instances
+- Content scripts inject into `https://*/*` patterns
+
+### Development Workflow
+
+1. Run `npm run watch` for development
+2. Load `dist` directory in Chrome extension developer mode
+3. Changes auto-reload with webpack watch mode
+4. Use `npm run clean` to clear dist before production builds
+5. Run `npm test` to execute Jest unit tests
+6. Use `npm run lint:fix` to automatically fix linting issues
+7. Format code with `npm run prettier` before committing
+
+## Coding Guidelines
+
+- **Type Definitions**: Always use `type` instead of `interface`
+- **React Component Props**: Always name component props type as `Props` and never export it
+- **Exports**: Never use default exports - always use named exports
+- **Component Structure**: Follow existing component folder structure with index.ts barrel exports
+- **Type Safety**: Never use `any` type - use proper typing with `unknown` for uncertain types
+- **Type Casting**: When type casting is necessary, always include safety checks before casting
+
+## Important Implementation Notes
+
+- Settings validation uses Yup schemas with strict type checking
+- GitHub API integration uses Octokit with user-provided PATs
+- JIRA API calls must go through background script due to CORS
+- Features are conditionally loaded based on current page URL and user settings
+- CSS modules prevent style conflicts with GitHub's native styles
+- Pre-commit hooks with husky and lint-staged ensure code quality
+- All settings are persisted to Chrome's local storage API
+- The extension supports hot reloading during development via webpack watch mode

README.md

@@ -1,100 +1,176 @@
 # GitHub UI Booster
 
-## Setup
+A Chrome extension that enhances GitHub and GitHub Enterprise UI with powerful productivity features. Built with TypeScript, React, and Manifest v3.
 
-```sh
+## Features
+
+### Pull Request Management
+
+- **Base Branch Labels**: Show base branch information for each pull request
+- **Changed Files**: Display changed files count with search functionality
+- **Total Lines Counter**: Show total lines added and removed in pull requests
+- **Reorder Pull Requests**: Automatically organize PRs by base branch with visual hierarchy
+- **Update Branch Button**: Quick access to update PR branches when behind base branch
+- **Auto Filter**: Apply custom filters to pull requests list
+
+### JIRA Integration
+
+- **PR Title from JIRA**: Auto-populate PR titles from JIRA issue keys in branch names
+- **Description Template**: Use custom PR description templates with JIRA ticket placeholders
+- **Issue Information**: Display JIRA issue details directly on GitHub
+
+### Multi-Instance Support
+
+- **GitHub Enterprise**: Full support for GitHub Enterprise instances
+- **Multiple Instances**: Configure multiple GitHub instances simultaneously
+- **Personal Access Tokens**: Secure API access using your GitHub PATs
+
+### Settings & Sync
+
+- **Feature Toggles**: Individual control over all extension features
+- **User Profile Sync**: Option to sync settings across Chrome instances using `chrome.storage.sync`
+- **Import/Export**: Backup and restore extension settings
+
+## Development
+
+### Setup
+
+```bash
 npm install
 ```
 
-## Build
+### Build for Development
+
+```bash
+npm run watch
+```
+
+### Build for Production
 
-```sh
+```bash
 npm run build
 ```
 
-## Development
+### Load Extension in Chrome
 
-```sh
-npm run watch
+1. Navigate to `chrome://extensions/`
+2. Enable "Developer mode"
+3. Click "Load unpacked"
+4. Select the `dist` directory
+
+### Testing & Quality
+
+```bash
+npm test          # Run Jest tests
+npm run lint      # Run ESLint
+npm run lint:fix  # Fix linting issues
+npm run prettier  # Format code
 ```
 
-## Visual Studio Code
+## Architecture
 
-Run watch mode.
+This Chrome extension uses:
 
-type `Ctrl + Shift + B`
+- **Manifest v3** for modern Chrome extension standards
+- **TypeScript** for type safety and better development experience
+- **React** for UI components
+- **SASS Modules** for scoped styling
+- **Webpack** for bundling with code splitting
+- **Chrome Storage API** for settings persistence
 
-## Load extension to chrome
+### Project Structure
 
-Load `dist` directory
+```
+src/
+├── components/          # Reusable React components
+├── content/            # Content script functionality
+├── pages/              # Extension pages (popup, options)
+│   └── Tabs/          # Options page tabs
+├── services/          # Core services and utilities
+├── content_pr_page.tsx      # Individual PR page content script
+├── content_prs_page.tsx     # PRs listing page content script
+├── content_compare_page.tsx # Compare/diff page content script
+├── background.ts            # Service worker
+├── popup.tsx               # Extension popup
+└── options.tsx             # Options/settings page
+```
 
-## Links
+## Configuration
 
-[manivest v3](https://stackoverflow.com/questions/63308160/how-to-migrate-manifest-version-2-to-v3-for-chrome-extension)
+The extension requires configuration through the Options page:
 
-[browser actions Google Dev Portal](https://developer.chrome.com/blog/mv3-actions?hl=de)
+1. **GitHub Instances**: Add your GitHub instances with Personal Access Tokens
+2. **Feature Toggles**: Enable/disable individual features
+3. **JIRA Integration** (optional): Configure JIRA instance for enhanced functionality
 
-[storge-api](https://dev.to/ambujsahu81/where-to-store-data-in-chrome-extension--1be6)
+## Releasing
 
-[tutorial](https://meenumatharu.medium.com/building-a-google-chrome-extension-with-manifest-v3-a-basic-example-to-get-started-0e976938bc70)
+### Prepare Release
 
-[youtube tutorial](https://www.youtube.com/watch?v=tIJrby96Oog)
+1. Update version in `public/manifest.json`
+2. Run `npm run release` to build and create distribution package
+3. The release package will be created as `dist.zip`
 
-## Examples and Inspirations
+### Chrome Web Store
 
-<https://github.com/ambujsahu81/Website-Customizer-Plus>
+1. Login to [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/devconsole)
+2. Select the GitHub UI Booster extension
+3. Go to Build > Package
+4. Upload the new package
+5. Submit for review
 
-<https://github.com/gizumon/github-ui-extentions>
+### Update screenshot
 
-<https://github.com/aklinker1/github-better-line-counts>
+1. take screenshot and right-click > Open with > GIMP
+2. CMD+A, CMD+C
+3. CMD + N to create a new file
+4. dimensions: 1280x800
+5. SHIFT+B, choose black and colorize the layer in black
+6. CMD+V
+7. SHIFT+S for the Resize Tool
+8. CMD+two-fingers to zoom out
+9. resize the pasted image as needed
+10. SHIFT+CMD+E to export
 
-## Releasing
+## Contributing
 
-### Prepare extension
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes following the existing code style
+4. Run tests and linting
+5. Submit a pull request
 
-- update version in `manifest.json`
-- run `npm run release`
+### Chrome Web Store Description
 
-### Upload to Chrome Web Store
+**GitHub UI Booster - Supercharge Your GitHub Workflow!**
 
-- Login to [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/devconsole)
-- Click the GitHub UI Booster extension
-- Go to Build > Package
-- Click "Upload new package"
-- Drag and drop the zip file into the dialog
-- Click "Submit for review"
+Transform your GitHub and GitHub Enterprise experience with powerful productivity features designed for developers and teams.
 
-### Update screenshot
+**🚀 Key Features:**
+• **Smart PR Management** - Base branch labels, refined line counts, and hierarchical PR organization
+• **Enhanced File Navigation** - Instant access to changed files with integrated search across all PRs
+• **JIRA Integration** - Auto-populate PR titles and descriptions from JIRA tickets
+• **Multi-Instance Support** - Seamlessly work with GitHub.com and multiple Enterprise instances
+• **One-Click Actions** - Quick branch updates and custom PR filters
+• **Team Collaboration** - Random reviewer assignment and template-based descriptions
+
+**🔧 Enterprise Ready:**
+• Secure API access using your personal access tokens
+• Support for multiple GitHub Enterprise instances
+• All features individually toggleable
+• Settings sync across Chrome instances
+• Import/export configuration
+
+**✨ Perfect for teams using GitHub + JIRA who want to:**
+
+- Reduce PR review overhead
+- Standardize development workflows
+- Navigate large codebases efficiently
+- Maintain clear PR hierarchies
+- Automate repetitive tasks
+
+Built with TypeScript and React. Works with both GitHub.com and GitHub Enterprise.
+
+## License
 
-- take screenshot and right-click > Open with > GIMP
-- CMD+A, CMD+C
-- CMD + N to create a new file
-- dimensions: 1280x800
-- SHIFT+B, choose black and colorize the layer in black
-- CMD+V
-- SHIFT+S for the Resize Tool
-- CMD+two-fingers to zoom out
-- resize the pasted image as needed
-- SHIFT+CMD+E to export
-
-### Webstore-Description
-
-Boost productivity on GitHub and GitHub Enterprise with this powerful extension!
-
-Highlights:
-
-- works for GitHub and GitHub Enterprise
-- supports multiple GitHub instances
-- powered by the GitHub API, using your personal access token for secure and seamless access
-- shows the base branch for each pull request directly on the PRs page
-- refined line count, excluding non-impactful files (e.g., package-lock.json)
-- on-hover instant access to changed files and diffs from the PRs page
-- integrated search for changed files across all open PRs
-- shows merge conflicts on PRs page
-- custom pull request filter to replace GitHub’s default
-- integrated 'update branche' button in PRs page
-- nested display of dependent PRs on the PRs page, showing clear hierarchy
-- integrates with your Jira to display status, prio and assignee on the prs-page
-- all of the above features are toggleable individually
-- automatically inserts Jira-Link to issue based on your PR-template
-- automatically inserts Jira-Description from Jira-Issue
+This project is licensed under the MIT License.