feat: add chat width setting option for thread

[urmauur]

Describe Your Changes

explanation of the changes:

1. TopPanel/index.tsx:

   • The setSelectedSetting function's argument was changed from 'Appearance' to 'Preferences'.

2. Setting.atom.ts:

   • Added a new export for CHAT_WIDTH.
   • Defined a new atom chatWidthAtom with a default value of 'full'.

3. Images:

   • Two new images were added: compact-width.png and full-width.png.

4. Appearance/index.tsx:

   • Imported the newly created chatWidthAtom.
   • Added chatWidthOption containing options for chat width.
   • Modified the JSX to include a new section allowing users to choose between "Full Width" and "Compact Width" for the chat, reflecting the changes visually with radio buttons tied to the chatWidthAtom.

5. SettingDetail/index.tsx:

   • Modified a switch case from 'Appearance' to 'Preferences'.

6. Settings/index.tsx:

   • Changed 'Appearance' to 'Preferences' in the SettingScreenList.

7. TextMessage/index.tsx:

   • Imported chatWidthAtom and used its value to conditionally apply styles. The max-w-[700px] class is applied if chatWidth is 'compact'.

Overall, these changes introduce a new preference for setting the chat width, adjust visual components to support this preference, and rename aspects of the settings from "Appearance" to "Preferences".

In the future, we need to update the design. The basic design rules are as follows:

• For thumbnails, avoid using text that is too small to read easily. - Better show layout block
• For selection options, there is no need to display a radio button. Instead, it is better to make the thumbnail itself selectable as an option.

Detailed Explanation:

1. Text on Thumbnails:

• Thumbnails often serve as a visual cue or a preview, so their primary purpose should be clarity and quick recognition.
• Small text on thumbnails can cause usability issues, especially on smaller screens or when users quickly scan the interface. Instead, rely on larger, legible typography or avoid text entirely, using visuals or icons for better comprehension.

2. selection without Radio Buttons:

• Traditional radio buttons can clutter the interface and may not be visually engaging.
• By making the entire thumbnail interactive (clickable or tappable), you create a cleaner, more modern user experience. This approach reduces unnecessary UI elements and leverages intuitive interactions, as users naturally associate thumbnails with actions or choices.

Good example thumbnail selection

cc @dan-homebrew @imtuyethan

Fixes Issues

• Closes feat: Add Chat Width settings option for Threads #3509
• Closes #

Self Checklist

• Added relevant comments, esp in complex areas
• Updated docs (for bug fixes / features)
• Created issues for follow-up changes or refactoring needed

[github-actions]

Barecheck - Code coverage report

Total: 69.27%

Your code coverage diff: 0.00% ▴

Uncovered files and lines

File	Lines
web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx	31-36, 38, 40, 44, 46, 50