Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

๐Ÿ’„ style: fix PluginStore layout #2590

Merged
merged 7 commits into from
May 27, 2024
Merged

Conversation

sxjeru
Copy link
Contributor

@sxjeru sxjeru commented May 21, 2024

๐Ÿ’ป ๅ˜ๆ›ด็ฑปๅž‹ | Change Type

  • โœจ feat
  • ๐Ÿ› fix
  • โ™ป๏ธ refactor
  • ๐Ÿ’„ style
  • ๐Ÿ”จ chore
  • โšก๏ธ perf
  • ๐Ÿ“ docs

๐Ÿ”€ ๅ˜ๆ›ด่ฏดๆ˜Ž | Description of Change

close #2511

๐Ÿ“ ่กฅๅ……ไฟกๆฏ | Additional Information

Summary by CodeRabbit

  • New Features
    • Improved the layout of the PluginStore component by dynamically adjusting the spacing based on mobile status.

Copy link

vercel bot commented May 21, 2024

@sxjeru is attempting to deploy a commit to the LobeHub Team on Vercel.

A member of the Team first needs to authorize it.

@lobehubbot
Copy link
Member

๐Ÿ‘ @sxjeru

Thank you for raising your pull request and contributing to our Community
Please make sure you have followed our contributing guidelines. We will review it as soon as possible.
If you encounter any problems, please feel free to connect with us.
้žๅธธๆ„Ÿ่ฐขๆ‚จๆๅ‡บๆ‹‰ๅ–่ฏทๆฑ‚ๅนถไธบๆˆ‘ไปฌ็š„็คพๅŒบๅšๅ‡บ่ดก็Œฎ๏ผŒ่ฏท็กฎไฟๆ‚จๅทฒ็ป้ตๅพชไบ†ๆˆ‘ไปฌ็š„่ดก็ŒฎๆŒ‡ๅ—๏ผŒๆˆ‘ไปฌไผšๅฐฝๅฟซๅฎกๆŸฅๅฎƒใ€‚
ๅฆ‚ๆžœๆ‚จ้‡ๅˆฐไปปไฝ•้—ฎ้ข˜๏ผŒ่ฏท้šๆ—ถไธŽๆˆ‘ไปฌ่”็ณปใ€‚

Copy link

codecov bot commented May 21, 2024

Codecov Report

All modified and coverable lines are covered by tests โœ…

Project coverage is 93.72%. Comparing base (db8f2c6) to head (8c77e9f).
Report is 3 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2590      +/-   ##
==========================================
- Coverage   93.73%   93.72%   -0.02%     
==========================================
  Files         352      353       +1     
  Lines       20407    20403       -4     
  Branches     2430     2426       -4     
==========================================
- Hits        19128    19122       -6     
- Misses       1279     1281       +2     

โ˜” View full report in Codecov by Sentry.
๐Ÿ“ข Have feedback on the report? Share it here.

<Flexbox gap={mobile ? 8 : 16} width={'100%'}>
<Flexbox
gap={gap}
style={{maxHeight: mobile ? `calc(75vh - 56px - 13px - ${gap}px)` : `calc(75vh - 56px - ${gap}px)`}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

่ฟ™ไธช่ฎก็ฎ—้€ป่พ‘ๆ˜ฏๅ•ฅ๏ผŸๆ„Ÿ่ง‰ๆœ‰็‚นๅคๆ‚ไบ†๏ผŸ

Copy link
Contributor Author

@sxjeru sxjeru May 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

75vh - 56px ๆ˜ฏ็ˆถๅ…ƒ็ด ๅฐบๅฏธ๏ผŒๅŽ้ข็š„ๆ˜ฏๅŒ็ซฏ้€‚้…ๅ‡บๆฅ็š„ๅฐบๅฏธ๏ผŒไฟๆŒๆœ€ๅŽไธ€้กนๅˆฐๅบ•่พน็š„่ท็ฆปๅ’Œ็ฌฌไธ€้กนๅˆฐ้กถ่พน็š„ gap ไธ€่‡ดใ€‚

็ˆถๅ…ƒ็ด ๏ผŒgap๏ผˆๆ—ถ้—ดไป“ไฟƒ๏ผŒๆˆชๅ›พ็š„็‰ˆๆœฌๆฒกๆœ‰ๅบ”็”จๆœฌprไฟฎๆ”น๏ผ‰

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ๅฏๅšไธบๅ…œๅบ•ๆ–นๆกˆ๏ผŒๆƒณๆƒณ็œ‹ๆœ‰ๆฒกๆœ‰ๆ›ดๅŠ ไผ˜้›…็š„่งฃๆณ•๏ผŸ 56px - 13px - gap ่ฟ™็ง่ฎก็ฎ—ไผš้žๅธธ่„†ๅผฑ๏ผŒๆœชๆฅไธ‡ไธ€ๆ”นไบ†้กถ้ƒจ็š„ๅธƒๅฑ€๏ผŒ่ฟ™ไธชๆ–นๆกˆๅฐฑๅคฑๆ•ˆไบ†ใ€‚

Copy link
Contributor Author

@sxjeru sxjeru May 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ๆ”นๅŠจไบ†ไธ€ไธ‹๏ผŒๅฅ—็”จcss็ปงๆ‰ฟๅฑžๆ€งใ€‚ๅ”ฏไธ€ไธๅŒๆ˜ฏ็งปๅŠจ็ซฏ็š„ๅบ•้ƒจpaddingๆ˜ฏ16px๏ผŒ่€Œๅˆ—่กจ้กถ้ƒจgapๆ˜ฏ8pxใ€‚
่ฟ™ๆ˜ฏๅธƒๅฑ€ๅˆๅง‹ๅ€ผ๏ผŒ้žๆœฌprๅฏผ่‡ด๏ผŒๅฆ‚ๆžœ็œ‹็€ๅ่ฐƒ๏ผŒๅฐฑไธ้œ€ๅ†ๆ”นไบ†ใ€‚image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ๅฅฝ็š„๏ผŒๆˆ‘็œ‹ไธ‹

Copy link

coderabbitai bot commented May 26, 2024

Walkthrough

The recent update introduces a dynamic adjustment for the gap variable within the PluginStore component, enhancing the layout of the Flexbox component based on whether the user is on a mobile device or not. This change aims to improve the display and usability of the plugin store, particularly addressing layout issues on different screen sizes.

Changes

File Change Summary
src/features/PluginStore/index.tsx Introduced a dynamic gap variable to adjust the layout based on mobile status.

Assessment against linked issues

Objective (Issue #) Addressed Explanation
Fix layout issue in Plugin Store page on different screens (#2511) โœ…

In fields of code where bugs do roam,
A rabbit hops to make it home.
With gaps that shift from eight to sixteen,
The Plugin Store now looks pristine.
No more rows that hide away,
On every screen, itโ€™s here to stay.
๐Ÿ‡โœจ

Tip

New Features and Improvements

Review Settings

Introduced new personality profiles for code reviews. Users can now select between "Chill" and "Assertive" review tones to tailor feedback styles according to their preferences. The "Assertive" profile posts more comments and nitpicks the code more aggressively, while the "Chill" profile is more relaxed and posts fewer comments.

AST-based Instructions

CodeRabbit offers customizing reviews based on the Abstract Syntax Tree (AST) pattern matching. Read more about AST-based instructions in the documentation.

Community-driven AST-based Rules

We are kicking off a community-driven initiative to create and share AST-based rules. Users can now contribute their AST-based rules to detect security vulnerabilities, code smells, and anti-patterns. Please see the ast-grep-essentials repository for more information.

New Static Analysis Tools

We are continually expanding our support for static analysis tools. We have added support for biome, hadolint, and ast-grep. Update the settings in your .coderabbit.yaml file or head over to the settings page to enable or disable the tools you want to use.

Tone Settings

Users can now customize CodeRabbit to review code in the style of their favorite characters or personalities. Here are some of our favorite examples:

  • Mr. T: "You must talk like Mr. T in all your code reviews. I pity the fool who doesn't!"
  • Pirate: "Arr, matey! Ye must talk like a pirate in all yer code reviews. Yarrr!"
  • Snarky: "You must be snarky in all your code reviews. Snark, snark, snark!"

Revamped Settings Page

We have redesigned the settings page for a more intuitive layout, enabling users to find and adjust settings quickly. This change was long overdue; it not only improves the user experience but also allows our development team to add more settings in the future with ease. Going forward, the changes to .coderabbit.yaml will be reflected in the settings page, and vice versa.

Miscellaneous

  • Turn off free summarization: You can switch off free summarization of PRs opened by users not on a paid plan using the enable_free_tier setting.
  • Knowledge-base scope: You can now set the scope of the knowledge base to either the repository (local) or the organization (global) level using the knowledge_base setting. In addition, you can specify Jira project keys and Linear team keys to limit the knowledge base scope for those integrations.
  • High-level summary placement: You can now customize the location of the high-level summary in the PR description using the high_level_summary_placeholder setting (default @coderabbitai summary).
  • Revamped request changes workflow: You can now configure CodeRabbit to auto-approve or request changes on PRs based on the review feedback using the request_changes_workflow setting.

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
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 <commit_id>.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • 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 testing code 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 and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @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 an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to full the review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @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.
  • Please see the configuration documentation for more information.
  • 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/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

vercel bot commented May 26, 2024

The latest updates on your projects. Learn more about Vercel for Git โ†—๏ธŽ

Name Status Preview Comments Updated (UTC)
lobe-chat-community โœ… Ready (Inspect) Visit Preview ๐Ÿ’ฌ Add feedback May 27, 2024 2:07am

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Outside diff range and nitpick comments (2)
src/features/PluginStore/index.tsx (2)

22-22: Ensure the gap variable is well-documented to clarify its purpose.

Consider adding a comment above the gap declaration to explain its role in adjusting layout based on the device type. This will enhance code readability and maintainability.


Line range hint 47-47: Replace any with a more specific type to enhance type safety.

Using any can lead to potential bugs and maintenance issues. Consider specifying a more precise type for the value v in the onChange handler.

- useToolStore.setState({ listType: v as any });
+ useToolStore.setState({ listType: v as ListType }); // Assuming ListType is the correct type
Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between d1cdaa0 and 56ffd34.
Files selected for processing (1)
  • src/features/PluginStore/index.tsx (2 hunks)
Additional Context Used
Biome (1)
src/features/PluginStore/index.tsx (1)

47-47: Unexpected any. Specify a different type.

Additional comments not posted (1)
src/features/PluginStore/index.tsx (1)

36-43: Responsive design implementation using gap looks good.

The use of the gap variable to adjust the Flexbox properties based on the device type is correctly implemented. This should help in addressing the layout issue described in the linked issue.

@arvinxx
Copy link
Contributor

arvinxx commented May 26, 2024

image

่ฟ™ไธชpadding ไธ้œ€่ฆๆœ‰

@arvinxx
Copy link
Contributor

arvinxx commented May 26, 2024

image

็งปๅŠจ็ซฏไธŠ็š„้—ฎ้ข˜ไผผไนŽๅนถๆฒกๆœ‰่งฃๅ†ณ๏ผŸ

@sxjeru
Copy link
Contributor Author

sxjeru commented May 27, 2024

padding ๅทฒๅˆ ใ€‚

ๅฆ‚ๆžœๆ˜ฏpcๆŽงๅˆถๅฐๅˆ‡ๅˆฐ็งปๅŠจ็ซฏ๏ผŒ้œ€่ฆๅˆทๆ–ฐไธ€ไธ‹ใ€‚่ฟ™่พนๆ‹ฟๆ‰‹ๆœบๆต‹่ฏ•ๆ˜ฏๆญฃๅธธ็š„ใ€‚

@lobehubbot
Copy link
Member

Bot detected the issue body's language is not English, translate it automatically. ๐Ÿ‘ฏ๐Ÿ‘ญ๐Ÿป๐Ÿง‘โ€๐Ÿคโ€๐Ÿง‘๐Ÿ‘ซ๐Ÿง‘๐Ÿฟโ€๐Ÿคโ€๐Ÿง‘๐Ÿป๐Ÿ‘ฉ๐Ÿพโ€๐Ÿคโ€๐Ÿ‘จ๐Ÿฟ๐Ÿ‘ฌ๐Ÿฟ


padding has been deleted.

If the PC console is switched to the mobile terminal, it needs to be refreshed. It is normal to test with a mobile phone here.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Outside diff range and nitpick comments (1)
src/features/PluginStore/index.tsx (1)

Line range hint 42-42: Specify a more appropriate type instead of any.

Using any can lead to potential type safety issues. It would be beneficial to specify a more appropriate type for the v variable in the onChange handler of the Segmented component to enhance type safety and maintainability.

- onChange={(v) => {
-   useToolStore.setState({ listType: v as any });
- }}
+ onChange={(v: string) => { // Assuming `listType` is of type string
+   useToolStore.setState({ listType: v });
+ }}
Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 56ffd34 and 8c77e9f.
Files selected for processing (1)
  • src/features/PluginStore/index.tsx (2 hunks)
Additional Context Used
Biome (1)
src/features/PluginStore/index.tsx (1)

42-42: Unexpected any. Specify a different type.

Additional comments not posted (1)
src/features/PluginStore/index.tsx (1)

34-38: Adjust the gap and maxHeight based on the mobile status to improve layout responsiveness.

This change dynamically adjusts the gap between elements and the maximum height of the container, which should help in addressing the layout issue described in the linked issue. Ensure that these values have been tested across different screen sizes to confirm the layout behaves as expected.

@arvinxx arvinxx merged commit e1ae39b into lobehub:main May 27, 2024
5 of 6 checks passed
@lobehubbot
Copy link
Member

โค๏ธ Great PR @sxjeru โค๏ธ

The growth of project is inseparable from user feedback and contribution, thanks for your contribution! If you are interesting with the lobehub developer community, please join our discord and then dm @arvinxx or @canisminor1990. They will invite you to our private developer channel. We are talking about the lobe-chat development or sharing ai newsletter around the world.
้กน็›ฎ็š„ๆˆ้•ฟ็ฆปไธๅผ€็”จๆˆทๅ้ฆˆๅ’Œ่ดก็Œฎ๏ผŒๆ„Ÿ่ฐขๆ‚จ็š„่ดก็Œฎ! ๅฆ‚ๆžœๆ‚จๅฏน LobeHub ๅผ€ๅ‘่€…็คพๅŒบๆ„Ÿๅ…ด่ถฃ๏ผŒ่ฏทๅŠ ๅ…ฅๆˆ‘ไปฌ็š„ discord๏ผŒ็„ถๅŽ็งไฟก @arvinxx ๆˆ– @canisminor1990ใ€‚ไป–ไปฌไผš้‚€่ฏทๆ‚จๅŠ ๅ…ฅๆˆ‘ไปฌ็š„็งๅฏ†ๅผ€ๅ‘่€…้ข‘้“ใ€‚ๆˆ‘ไปฌๅฐ†ไผš่ฎจ่ฎบๅ…ณไบŽ Lobe Chat ็š„ๅผ€ๅ‘๏ผŒๅˆ†ไบซๅ’Œ่ฎจ่ฎบๅ…จ็ƒ่Œƒๅ›ดๅ†…็š„ AI ๆถˆๆฏใ€‚

github-actions bot pushed a commit that referenced this pull request May 27, 2024
### [Version&nbsp;0.161.23](v0.161.22...v0.161.23)
<sup>Released on **2024-05-27**</sup>

#### โ™ป Code Refactoring

- **misc**: Refactor `keyVaults` and rename `endpoint` to `baseURL`.

#### ๐Ÿ’„ Styles

- **misc**: Fix PluginStore layout.

<br/>

<details>
<summary><kbd>Improvements and Fixes</kbd></summary>

#### Code refactoring

* **misc**: Refactor `keyVaults` and rename `endpoint` to `baseURL`, closes [#2673](#2673) ([4049bc7](4049bc7))

#### Styles

* **misc**: Fix PluginStore layout, closes [#2590](#2590) [#2511](#2511) ([e1ae39b](e1ae39b))

</details>

<div align="right">

[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)

</div>
@lobehubbot
Copy link
Member

๐ŸŽ‰ This PR is included in version 0.161.23 ๐ŸŽ‰

The release is available on:

Your semantic-release bot ๐Ÿ“ฆ๐Ÿš€

github-actions bot pushed a commit to bentwnghk/lobe-chat that referenced this pull request May 27, 2024
### [Version&nbsp;1.41.12](v1.41.11...v1.41.12)
<sup>Released on **2024-05-27**</sup>

#### โ™ป Code Refactoring

- **misc**: Refactor `keyVaults` and rename `endpoint` to `baseURL`.

#### ๐Ÿ› Bug Fixes

- **misc**: Fix connection checker, fix the batch import error.

#### ๐Ÿ’„ Styles

- **misc**: Fix PluginStore layout.

<br/>

<details>
<summary><kbd>Improvements and Fixes</kbd></summary>

#### Code refactoring

* **misc**: Refactor `keyVaults` and rename `endpoint` to `baseURL`, closes [lobehub#2673](https://github.com/bentwnghk/lobe-chat/issues/2673) ([4049bc7](4049bc7))

#### What's fixed

* **misc**: Fix connection checker, closes [lobehub#2672](https://github.com/bentwnghk/lobe-chat/issues/2672) ([bef8926](bef8926))
* **misc**: Fix the batch import error, closes [lobehub#2671](https://github.com/bentwnghk/lobe-chat/issues/2671) ([db8f2c6](db8f2c6))

#### Styles

* **misc**: Fix PluginStore layout, closes [lobehub#2590](https://github.com/bentwnghk/lobe-chat/issues/2590) [lobehub#2511](https://github.com/bentwnghk/lobe-chat/issues/2511) ([e1ae39b](e1ae39b))

</details>

<div align="right">

[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)

</div>
@sxjeru sxjeru deleted the patch-2 branch May 27, 2024 03:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ๆ’ไปถๅ•†ๅบ—้กต้ขๅธƒๅฑ€[Bug]
3 participants