From cbedaf627c45e6a2e0e44c12581fdad06a2e6de0 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Sun, 1 Feb 2026 14:22:01 +0000 Subject: [PATCH] feat: update message keys for settings and overview sections; remove unused permissions and skills from settings --- .claude/settings.local.json | 62 +---- claude.md | 212 ++++++++++++++++++ .../Elements/MainModal/constants/tabConfig.js | 2 +- src/features/misc/sections/Overview.jsx | 2 +- src/features/misc/views/Settings.jsx | 2 +- 5 files changed, 216 insertions(+), 64 deletions(-) create mode 100644 claude.md diff --git a/.claude/settings.local.json b/.claude/settings.local.json index a1dd11b9..91bfed69 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -1,65 +1,5 @@ { "permissions": { "allow": ["Bash(node scripts/updatetranslations.cjs:*)"] - }, - "skills": [ - "React development with hooks and functional components", - "Browser extension development (Chrome, Firefox, Safari)", - "i18n/internationalization with multiple locales", - "SCSS/CSS styling and responsive design", - "Vite build tooling and configuration", - "IndexedDB and localStorage for data persistence", - "Web APIs (Weather, Geolocation, etc.)", - "Bun package manager and tooling", - "Git workflow (dev → beta → main branches)", - "Web manifest v3 for browser extensions", - "ESLint and code formatting standards", - "Commitlint with conventional commits" - ], - "rules": [ - { - "title": "Translation Files", - "description": "en_GB.json is the base translation file. Any other translation file should be updated by editing en_GB.json first, then running `bun run translations` to ensure formatting remains consistent across all locales." - }, - { - "title": "Branch Strategy", - "description": "Use the three-branch workflow: dev (active development) → beta (release candidates) → main (production/stable). All PRs should target the dev branch." - }, - { - "title": "Commit Messages", - "description": "Follow conventional commits format. Use commitlint standards (feat:, fix:, chore:, docs:, etc.) for all commit messages." - }, - { - "title": "Code Style", - "description": "Run `bun run lint:fix` and `bun run pretty` before committing. Follow the ESLint configuration in eslint.config.js." - }, - { - "title": "Build Targets", - "description": "The project builds for multiple browsers (Chrome, Firefox, Safari). Test changes across all targets when modifying core functionality or manifests." - }, - { - "title": "Package Manager", - "description": "Always use Bun (not npm or yarn) for dependency management and running scripts. The project requires Bun >= 1.3.0." - }, - { - "title": "File Organization", - "description": "Components go in src/components/, features in src/features/, utilities in src/utils/. Keep the existing folder structure consistent." - }, - { - "title": "State Management", - "description": "Use localStorage via useLocalStorageState hook for persistent settings. Use React Context for shared state (see src/contexts/)." - }, - { - "title": "Styling", - "description": "SCSS files are organized in src/scss/. Use the existing variables (_variables.scss) and mixins (_mixins.scss) for consistency." - }, - { - "title": "Development Server", - "description": "Use `bun run dev` for local development with hot reload. Use `bun run dev:host` to make it accessible on the network for testing on other devices." - }, - { - "title": "Commenting", - "description": "Do not add comments to the codebase. Keep the code clean and self-explanatory." - } - ] + } } diff --git a/claude.md b/claude.md new file mode 100644 index 00000000..dfe79834 --- /dev/null +++ b/claude.md @@ -0,0 +1,212 @@ +# Mue Development Guide + +Mue is a fast, open-source new tab page browser extension for Chrome, Firefox, and Safari. + +## Tech Stack + +### Core Technologies +- **React 19** - Modern hooks and functional components only +- **Vite 7** - Build tool with SWC for fast compilation +- **Bun** - Package manager and JavaScript runtime (>= 1.3.0) +- **SCSS** - Styling with modern compiler API +- **Browser Extension (Manifest V3)** - Multi-browser support (Chrome, Firefox, Safari) + +### Key Libraries +- **@dnd-kit** - Drag and drop functionality for widgets +- **@eartharoid/i18n** - Internationalization with multiple locales +- **@sentry/react** - Error tracking and monitoring +- **react-modal** - Accessible modal dialogs +- **react-toastify** - Toast notifications +- **IndexedDB & localStorage** - Client-side data persistence +- **Vite path aliases** - Imports use `@/`, `components/`, `hooks/`, `utils/`, etc. + +### Development Tools +- **ESLint** - JavaScript/JSX linting with React plugin +- **Stylelint** - SCSS/CSS linting +- **Prettier** - Code formatting +- **Commitlint** - Conventional commit enforcement +- **Husky** - Git hooks for pre-commit checks + +## Project Structure + +``` +src/ +├── components/ # Reusable UI components +├── features/ # Feature-specific components (quote, greeting, weather, etc.) +├── contexts/ # React Context providers for shared state +├── hooks/ # Custom React hooks +├── utils/ # Utility functions and helpers +├── lib/ # Third-party library wrappers +├── i18n/ # Internationalization and locale files +├── scss/ # Global styles, variables, and mixins +├── config/ # Configuration files +└── assets/ # Static assets (icons, images) +``` + +## Development Rules + +### 1. Translation Files +**en_GB.json is the base translation file.** + +When updating translations: +1. Edit `src/i18n/locales/en_GB.json` first +2. Run `bun run translations` to sync changes to all locales +3. This ensures formatting remains consistent across all language files + +Available translation scripts: +- `bun run translations` - Sync all locale files with en_GB +- `bun run translations:percentages` - Update completion percentages +- `bun run translations:unused` - Find unused translation keys + +### 2. Branch Strategy +Use the **three-branch workflow**: +- `dev` - Active development (target for all PRs) +- `beta` - Release candidates for testing +- `main` - Production/stable releases + +**Always create PRs targeting the `dev` branch.** + +### 3. Commit Messages +Follow **conventional commits** format: +- `feat:` - New features +- `fix:` - Bug fixes +- `chore:` - Maintenance tasks +- `docs:` - Documentation changes +- `refactor:` - Code refactoring +- `test:` - Test-related changes +- `style:` - Code style changes (formatting, etc.) + +Commitlint will enforce this in pre-commit hooks. + +### 4. Code Style & Quality + +**Before committing:** +```bash +bun run lint:fix # Auto-fix ESLint and Stylelint issues +bun run pretty # Format code with Prettier +``` + +**Linting rules:** +- Follow ESLint configuration in `eslint.config.js` +- SCSS follows Stylelint standard SCSS rules +- Husky pre-commit hooks will block commits with linting errors + +### 5. Commenting +**Do not add comments to the codebase.** Keep code clean and self-explanatory. Use descriptive variable/function names instead of comments. + +### 6. Package Manager +**Always use Bun** (not npm or yarn): +```bash +bun install # Install dependencies +bun run dev # Start dev server +bun run build # Production build +``` + +### 7. Build Targets +The project builds for **multiple browsers**: +- Chrome/Edge (Chromium) +- Firefox +- Safari (via Xcode) + +**Test changes across all targets** when modifying: +- Core functionality +- Manifest files (`manifest/chrome.json`, `manifest/firefox.json`) +- Browser-specific APIs + +Build outputs: +- `dist/` - Vite bundled output +- `build/chrome/` - Chrome extension +- `build/firefox/` - Firefox extension +- `safari/Mue Extension/Resources/` - Safari extension + +### 8. State Management +- **Persistent settings** - Use `localStorage` via custom hooks +- **Shared state** - Use React Context (see `src/contexts/`) +- **Component state** - Use `useState`, `useReducer` for local state +- **Custom hooks** - Create hooks for reusable stateful logic + +### 9. Styling Conventions +SCSS files are organized in `src/scss/`: +- `_variables.scss` - Color palette, breakpoints, sizes +- `_mixins.scss` - Reusable style mixins +- Component styles - Co-located in feature/component folders + +**Use existing variables and mixins** for consistency. + +### 10. Development Server +```bash +bun run dev # Local development with HMR at localhost +bun run dev:host # Expose on network for testing on other devices +``` + +Hot Module Replacement (HMR) is enabled for fast development. + +### 11. Path Aliases +Use configured path aliases instead of relative imports: +```javascript +// Good +import Button from 'components/Button'; +import { useLocalStorageState } from 'hooks/useLocalStorageState'; +import { getWeather } from 'utils/api'; + +// Avoid +import Button from '../../../components/Button'; +``` + +Available aliases: `@/`, `components/`, `contexts/`, `hooks/`, `assets/`, `config/`, `features/`, `lib/`, `scss/`, `translations/`, `utils/` + +### 12. Error Handling +- Sentry is integrated for error tracking +- Use `ErrorBoundary` component for React error boundaries +- Handle async errors gracefully with try/catch +- Show user-friendly error messages via `react-toastify` + +### 13. Browser Extension Best Practices +- Use Manifest V3 APIs (not deprecated V2 APIs) +- Test extension loading/unloading +- Handle permissions properly +- Use `background.js` for background tasks +- Store data in `localStorage` or `IndexedDB`, not sync storage +- Ensure cross-browser compatibility (check MDN for API support) + +### 14. Internationalization (i18n) +- Use `@eartharoid/i18n` for translations +- Access translations via the i18n context +- Add new keys to `en_GB.json` first +- Test with multiple locales to ensure proper rendering +- Support RTL languages where applicable + +### 15. Performance +- Lazy load components where appropriate +- Optimize images (use modern formats like WebP) +- Minimize bundle size (check Vite build output) +- Use `useMemo` and `useCallback` judiciously (only when needed) +- Profile performance with React DevTools + +## Common Tasks + +### Adding a New Feature +1. Create feature folder in `src/features/` +2. Add components, hooks, and styles +3. Update translations in `en_GB.json` +4. Run `bun run translations` to sync locales +5. Add tests if applicable +6. Run `bun run lint:fix` and `bun run pretty` +7. Commit with conventional commit message +8. Create PR targeting `dev` branch + +### Debugging +- Use React DevTools for component inspection +- Check browser console for errors +- Use Sentry for production error tracking +- Test in all supported browsers + +### Testing on Browsers +1. Run `bun run build` +2. Load unpacked extension from `build/chrome/` or `build/firefox/` +3. For Safari, open Xcode project and build from there + +## Resources +- Repository: https://github.com/mue/mue +- Homepage: https://muetab.com +- Bug Reports: https://github.com/mue/mue/issues diff --git a/src/components/Elements/MainModal/constants/tabConfig.js b/src/components/Elements/MainModal/constants/tabConfig.js index 0a96f247..cdf6ff91 100644 --- a/src/components/Elements/MainModal/constants/tabConfig.js +++ b/src/components/Elements/MainModal/constants/tabConfig.js @@ -65,7 +65,7 @@ export const ICON_COMPONENTS = { // Message keys for icon mapping export const MESSAGE_KEYS = { - OVERVIEW: 'modals.main.marketplace.product.overview', + OVERVIEW: 'modals.main.settings.sections.order.title', SETTINGS: 'modals.main.navbar.settings', LIBRARY: 'modals.main.navbar.library', DISCOVER: 'modals.main.navbar.discover', diff --git a/src/features/misc/sections/Overview.jsx b/src/features/misc/sections/Overview.jsx index 623e7591..9fe15278 100644 --- a/src/features/misc/sections/Overview.jsx +++ b/src/features/misc/sections/Overview.jsx @@ -154,7 +154,7 @@ const Overview = () => { return ( <> - {variables.getMessage('modals.main.marketplace.product.overview')} + {variables.getMessage('modals.main.settings.sections.order.title')}
diff --git a/src/features/misc/views/Settings.jsx b/src/features/misc/views/Settings.jsx index 210f4e19..94270c23 100644 --- a/src/features/misc/views/Settings.jsx +++ b/src/features/misc/views/Settings.jsx @@ -24,7 +24,7 @@ import { } from '../sections'; const sections = [ - { label: 'modals.main.marketplace.product.overview', name: 'order', component: Overview }, + { label: 'modals.main.settings.sections.order.title', name: 'order', component: Overview }, { label: 'modals.main.settings.sections.appearance.navbar.title', name: 'navbar',