🚀 implement batch search feature

[kawamataryo]

implement batch search feature.

ref #28

https://github.com/kawamataryo/sky-follower-bridge/assets/11070996/51a529bc-84b4-4fef-b2aa-150b13caa090

Summary by CodeRabbit

• New Features

  • Introduced Storybook configurations for React-Vite projects and various new components.
  • Added a React component for detecting and interacting with Bluesky users on web pages.
  • Implemented a service worker client to search and interact with users on web pages.
  • Added new components for displaying alerts, modals, user cards, and fallback avatars.
  • Provided Storybook stories for visual testing and documentation of new components.
  • Updated styling approach to fully integrate Tailwind CSS.

• Enhancements

  • Improved user experience with skeleton loading states for user cards.
  • Enhanced user profile interaction with follow, unfollow, block, and unblock features.
  • Streamlined user retrieval process with custom hooks and search functions.
  • Extended utility functions to include a wait function.

• Refactor

  • Transitioned from custom CSS to Tailwind CSS for content styling.
  • Refactored popup.tsx to use the useCallback hook for better performance.

• Documentation

  • Updated VS Code settings to specify a default formatter.

• Style

  • Removed dark mode class configuration and updated daisyUI themes in Tailwind CSS.

• Chores

  • Added new constants for query parameters and action modes.

[coderabbitai[bot]]

[!WARNING]

Rate Limit Exceeded

@kawamataryo has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 15 minutes and 1 seconds before requesting another review.

How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the `@coderabbitai review` command as a PR comment. Alternatively, push new commits to this PR. We recommend that you space out your commits to avoid hitting the rate limit.

How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our [FAQ](https://coderabbit.ai/docs/faq) for further information.

Commits

Files that changed from the base of the PR and between e7852bcc9accd5afcdd2e29dab4d723db9ba31f5 and e728bfd3216677065c37d1b4c24f80af261c2c5f.

Walkthrough

The update integrates Storybook for a React-Vite project, enhances UI with new components, and adopts Tailwind CSS for styling. It also refines user interactions in a Chrome extension, improving the handling of Bluesky user data with new functionality for user actions and visual feedback.

Changes

File Pattern	Change Summary
.storybook/main.ts, .storybook/preview.ts	Configured Storybook for a React-Vite project, specifying stories, and introducing functionality for the Storybook preview.
.vscode/settings.json, tailwind.config.js	Added default formatter setting in VS Code and updated Tailwind CSS configuration.
src/contents/App.tsx, src/contents/content.ts	Introduced a React component for detecting and interacting with Bluesky users, and added functionality for interacting with a service worker to search and interact with users on specific web pages.
src/lib/...ServiceWorkerClient.ts, src/lib/hooks/useRetrieveBskyUsers.ts, src/lib/searchBskyUsers.ts	Improved functionality for interacting with Bluesky users, added a custom hook for retrieving and managing Bsky users, and introduced functions for searching and retrieving Bsky user profiles.
src/lib/components/..., src/lib/components/Icons/...	Introduced new UI components like AlertError, AlertSuccess, MatchTypeFilter, Modal, UserCard, and various SVG icons. Added Storybook stories for these components.
src/lib/constants.ts, src/lib/utils.ts	Updated constants for query parameters, action modes, and match type labels and colors. Added a utility function for waiting.
src/popup.tsx	Refactored functionality in popup.tsx, including the use of useCallback and adjustments in UI logic.
src/style.content.css, src/style.content.legacy.css	Transitioned from custom CSS to Tailwind CSS directives, and added styles for legacy content.

🐇✨ In the burrow of the code, a change does bloom, New tales to tell in the Storybook room. Tailwind breezes, UIs delight, A rabbit's work by moon's soft light. 🌙📚

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

---

Tips

### Chat There are 3 ways to chat with CodeRabbit: - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit-tests for this file.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit tests for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository from git and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit tests.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - The JSON schema for the configuration file is available [here](https://coderabbit.ai/integrations/coderabbit-overrides.v2.json). - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json` ### CodeRabbit Discord Community Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback.