Tidy Vue templates and linting config

CLAUDE.md → AGENTS.md

@@ -1,6 +1,6 @@
-# CLAUDE.md
+# AGENTS
 
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+This file consolidates guidance for AI agents working with this repository. Use the sections below for project information, agent-specific rules, and general guidelines to follow when making code changes.
 
 ## Project Overview
 
@@ -20,14 +20,51 @@ Beardify is a custom Spotify web client built with Vue 3 + TypeScript that enhan
 ```bash
 # Development
 npm run dev           # Start dev server (port 3000)
-npm run lint          # Run all linting (TypeScript + ESLint + Prettier + Stylelint)
+npm run lint          # Run all linting (TypeScript + ESLint + Stylelint)
 npm run fix           # Auto-fix all linting issues
 npm run build         # Build for production (includes linting)
 npm run preview       # Preview production build
 ```
 
 **Always run `npm run lint` before committing changes.**
 
+## General agent guidance
+
+These guidelines apply to all AI agents working on this repository:
+
+- Follow project conventions: Vue 3 Composition API, `<script setup>`, TypeScript strict mode, scoped styles, alphabetical import ordering, and Unix (LF) line endings.
+- Always run `npm run lint` and fix reported issues before committing.
+- Use the `instance()` helper from `src/api.ts` for all Spotify Web API calls (do not call `ky` directly).
+- Use `notification()` helper for user-facing messages and errors.
+- The `#Collection` naming convention is core business logic. Do not change Collection-related behavior without explicit approval from the maintainers.
+- Do not commit secrets, credentials, or environment variables into the repository.
+- Follow the commit message format in "Commit message formatting (Conventional Commits)" below.
+- Keep changes small and focused; prefer creating a pull request rather than pushing large, sweeping changes directly.
+- When unsure, open an issue or ask a maintainer for clarification.
+
+## Commit message formatting (Conventional Commits)
+
+We follow the Conventional Commits specification. Use the header format:
+`<type>(<scope>): <short summary>`
+
+Rules:
+- Types: `feat`, `fix`, `docs`, `style`, `refactor`, `perf`, `test`, `chore`, `build`, `ci`, `revert`
+- Scope: optional but recommended (e.g. `player`, `auth`, `playlist`, `collection`, `api`, `styles`)
+- Summary: imperative mood, concise (<=50 chars), no trailing period
+- Body (optional): explain the "what" and "why" (not "how"); wrap lines at ~72 chars; leave one blank line between header and body
+- Footer: reference issues (e.g. `Closes #123`) or breaking changes using `BREAKING CHANGE: description`
+
+Examples:
+- `feat(collection): add #Collection marker when creating playlists`
+- `fix(api): handle 429 rate limits on playback requests`
+- `docs: update README with dev commands`
+- `chore(deps): bump pinia to 2.0.0`
+
+Best practices:
+- Run `npm run lint` before committing
+- Prefer "Squash and merge" for pull requests to keep history clean; use the PR title (following the spec) as the commit message when squashing
+- When introducing breaking changes, add `BREAKING CHANGE: ...` in the footer and describe the impact
+
 ## Architecture
 
 ### Directory Structure
@@ -69,14 +106,17 @@ Uses CSS custom properties with consistent naming:
 - **Perfectionist plugin**: Alphabetical ordering for imports/exports
 - **Vue files**: Currently ignored for parsing (TypeScript handled separately)
 
-### Prettier Configuration
+### Formatting (ESLint stylistic rules)
+
+- **Enforced by**: ESLint (stylistic rules) — see `eslint.config.js`
+- **Print width**: 120 characters (`max-len`)
+- **Semicolons**: Required (`semi`)
+- **Arrow parens**: Always use parentheses (`arrow-parens`)
+- **End of line**: LF (Unix) (`linebreak-style`)
+- **HTML whitespace**: Ignored in Vue templates (template whitespace rules are deliberately permissive)
+- **Tab width**: 2 spaces (enforced via `indent`; JSON/YAML files maintain 2 spaces)
 
-- **Print width**: 120 characters
-- **Semicolons**: Required
-- **Arrow parens**: Always use parentheses
-- **End of line**: LF (Unix)
-- **HTML whitespace**: Ignore for Vue templates
-- **Tab width**: 2 spaces (JSON/YAML files)
+**Note**: Prettier has been removed from the project; formatting is now enforced via ESLint stylistic rules. Use `npm run fix` to auto-fix JS/TS/Vue and SCSS style issues.
 
 ### Stylelint Configuration
 
@@ -94,13 +134,6 @@ Uses CSS custom properties with consistent naming:
 - Token refresh every 30 minutes
 - Persistent session with localStorage
 
-### Player Features
-
-- Spotify Web Playback SDK integration
-- Active device polling every 5 minutes
-- Widevine DRM support detection for Brave browser
-- Premium-only features (Spotify API limitation)
-
 ### Collections System
 
 The core feature: playlists with "#Collection" in the name are treated as album collections, providing functionality not available in the official Spotify client.

eslint.config.js

@@ -1,8 +1,9 @@
 import eslint from "@eslint/js";
+import stylistic from "@stylistic/eslint-plugin";
 import tseslint from "@typescript-eslint/eslint-plugin";
 import tsParser from "@typescript-eslint/parser";
 import perfectionist from "eslint-plugin-perfectionist";
-import eslintPluginPrettier from "eslint-plugin-prettier";
+import pluginVue from "eslint-plugin-vue";
 import globals from "globals";
 
 export default [
@@ -12,6 +13,20 @@ export default [
   },
   // Configuration de base ESLint
   eslint.configs.recommended,
+  // Configuration recommandée pour Vue 3
+  ...pluginVue.configs["flat/recommended"],
+
+  // Configuration @stylistic (customize preset)
+  stylistic.configs.customize({
+    arrowParens: true,
+    braceStyle: "1tbs",
+    commaDangle: "always-multiline",
+    indent: 2,
+    jsx: false,
+    quoteProps: "as-needed",
+    quotes: "double",
+    semi: true,
+  }),
 
   // Configuration globale
   {
@@ -52,22 +67,54 @@ export default [
     },
   },
 
-  // Configuration pour les fichiers Vue - Ignorons les erreurs d'analyse pour l'instant
+  // Configuration pour les fichiers Vue (TypeScript)
   {
     files: ["**/*.vue"],
-    ignores: ["**/*.vue"],
+    languageOptions: {
+      parserOptions: {
+        ecmaVersion: "latest",
+        parser: tsParser,
+        sourceType: "module",
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tseslint,
+    },
     rules: {
-      // Désactiver temporairement l'analyse des fichiers Vue
+      "@typescript-eslint/no-unused-vars": "warn",
+      "vue/html-indent": "off",
+      "vue/html-self-closing": "off",
+      "vue/max-attributes-per-line": "off",
+      "vue/multi-word-component-names": "off",
+      "vue/singleline-html-element-content-newline": "off",
     },
   },
 
-  // Configurer Prettier
+  // Stylistic overrides (additional rules beyond the preset)
   {
-    plugins: {
-      prettier: eslintPluginPrettier,
-    },
     rules: {
-      "prettier/prettier": ["error", {}, { usePrettierrc: true }],
+      "@stylistic/indent-binary-ops": ["error", 2],
+      "@stylistic/linebreak-style": ["error", "unix"],
+      "@stylistic/max-len": [
+        "error",
+        {
+          code: 120,
+          ignoreStrings: true,
+          ignoreTemplateLiterals: true,
+          ignoreUrls: true,
+        },
+      ],
+      "@stylistic/no-multiple-empty-lines": ["error", { max: 1, maxBOF: 0, maxEOF: 0 }],
+      "@stylistic/object-curly-newline": ["error", { consistent: true }],
+      "@stylistic/operator-linebreak": ["error", "before"],
+      "@stylistic/space-before-function-paren": [
+        "error",
+        {
+          anonymous: "always",
+          asyncArrow: "always",
+          named: "never",
+        },
+      ],
     },
   },
 
@@ -84,8 +131,12 @@ export default [
   // Règles globales
   {
     rules: {
-      "linebreak-style": ["error", "unix"], // Force l'utilisation de LF (unix) au lieu de CRLF (windows)
-      "no-console": "warn",
+      "no-console": [
+        "warn",
+        {
+          allow: ["warn", "error"],
+        },
+      ],
       "no-debugger": "warn",
     },
   },