refactor: solidify the FE codebase and improve UI consistency (#45)

* chore: add storybook

* chore: unify FE codeabse

* chore: update eslint rules

* chore: harmonize the use of "subtle" color

* chore: remove an extra sidebar rail

* refactor: make panel items more consistent

* chore: cleanups after merging new code from base

* refactor: refine composables

* fix: add lost import

* chore: make icon style consistent

* fix: don't show empty "supported" methods

* refactor: solidify select items

package.json

@@ -17,13 +17,20 @@
         "test:watch": "npm run test -- --watch",
         "test:snapshot": "npm run test:run --reporter=verbose --update",
         "test:e2e": "npx playwright test -c ./tests/E2E/playwright.config.ts",
-        "test:e2e:ui": "npm run test:e2e -- --ui"
+        "test:e2e:ui": "npm run test:e2e -- --ui",
+        "storybook": "storybook dev -p 6006",
+        "storybook:build": "storybook build"
     },
     "devDependencies": {
         "@playwright/test": "^1.56.1",
         "@rushstack/eslint-patch": "^1.8.0",
+        "@storybook/addon-a11y": "^8.6.14",
+        "@storybook/addon-essentials": "^8.6.14",
+        "@storybook/addon-interactions": "^8.6.14",
+        "@storybook/vue3-vite": "^8.6.14",
         "@tailwindcss/postcss": "^4.0.6",
         "@tailwindcss/vite": "^4.1.13",
+        "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.8.0",
         "@testing-library/user-event": "^14.6.1",
         "@testing-library/vue": "^8.1.0",
@@ -53,6 +60,7 @@
         "prettier-plugin-organize-imports": "^4.0.0",
         "prettier-plugin-tailwindcss": "^0.6.11",
         "radix-vue": "^1.9.14",
+        "storybook": "^8.6.14",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.13",
         "tailwindcss-animate": "^1.0.7",