Update Ask Bar Styling, New Tab Fade, New Placeholder Text#27
Update Ask Bar Styling, New Tab Fade, New Placeholder Text#27elliothco wants to merge 3 commits intosolbrowse:mainfrom
Conversation
WalkthroughThis update primarily standardizes code style and formatting across several files, including consistent use of double quotes, improved indentation, and clearer multiline formatting. The only semantic changes are in the CSS: Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NewTabPage
participant InputArea
participant Stylesheet
User->>NewTabPage: Loads new tab page
NewTabPage->>Stylesheet: Applies .sol-ask-gradient-bg to input container
NewTabPage->>InputArea: Renders input area
InputArea-->>User: Displays input with placeholder
Possibly related PRs
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/components/shared/InputArea.tsxOops! Something went wrong! :( ESLint: 9.30.0 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by src/pages/askbar/AskBar.tsxOops! Something went wrong! :( ESLint: 9.30.0 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by src/pages/newtab/NewTabPage.tsxOops! Something went wrong! :( ESLint: 9.30.0 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
src/pages/askbar/AskBar.tsx (1)
78-83: Remove thesetPageUrlcall after deleting the unused state.- (message) => { - setCurrentTabId(message.tabId); - setPageUrl(message.url); - }, + (message) => { + setCurrentTabId(message.tabId); + },
🧹 Nitpick comments (4)
src/assets/styles/chat.css (1)
672-674: Consider moving the padding from markup into the new helper class.
sol-ask-gradient-bgis always used together with extra top-padding (pt-12). Co-locating that padding inside the class keeps styling concerns in CSS and avoids duplicated utility classes in JSX.-.sol-ask-gradient-bg { - background: linear-gradient(to top, #f7f8fa 76%, transparent 100%); -} +.sol-ask-gradient-bg { + background: linear-gradient(to top, #f7f8fa 76%, transparent 100%); + padding-top: 3rem; /* tailwind pt-12 */ +}Then drop the explicit
pt-12from the calling components.src/components/shared/InputArea.tsx (1)
64-73: MissingdropdownRefin effect dependency may cause stale layout.
useEffectmutatesdropdownRef.current.stylebutdropdownRefis not listed in the dependency array.
If this ref changes (e.g. component remount), the effect won’t run and the dropdown could be misplaced.- }, [showDropdown, filteredTabs.length]); + }, [showDropdown, filteredTabs.length, dropdownRef]);src/pages/newtab/NewTabPage.tsx (2)
70-74: Prefer a utility class instead of inlinebackgroundColor.Tailwind already ships
bg-white; using it keeps the JSX uncluttered and allows future theming to toggle classes instead of inline styles.- style={{ - backgroundColor: "white", - }} + className="bg-white"
152-153: Double top-padding inflates the sticky bar.
p-6appliespt-6; addingpt-12on the same element results in 18 px of top padding.
Unless the extra 12 px is intentional, it’s cleaner to rely solely on the helper class (see CSS comment) or change to:-<div className="sticky bottom-0 left-0 right-0 p-6 sol-ask-gradient-bg pt-12"> +<div className="sticky bottom-0 left-0 right-0 px-6 pb-6 sol-ask-gradient-bg">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (4)
src/assets/styles/chat.css(1 hunks)src/components/shared/InputArea.tsx(9 hunks)src/pages/askbar/AskBar.tsx(12 hunks)src/pages/newtab/NewTabPage.tsx(7 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/pages/askbar/AskBar.tsx (2)
src/scripts/content/PortManager.ts (1)
portManager(55-55)src/types/messaging.ts (2)
IframeCurrentTabResponseMsg(115-120)IframeGetCurrentTabMsg(111-113)
| /* Fade mask for subtle chat fade effect */ | ||
| .sol-fade-mask { | ||
| max-height: 400px; | ||
| overflow-y: auto; | ||
| mask-image: linear-gradient( | ||
| to bottom, | ||
| transparent 2%, | ||
| black 5%, | ||
| black 95%, | ||
| transparent 98% | ||
| ); | ||
| mask-repeat: no-repeat; | ||
| mask-mode: alpha; | ||
| overflow-y: auto; | ||
| mask-image: linear-gradient( | ||
| to bottom, | ||
| transparent 2%, | ||
| black 5%, | ||
| black 94%, | ||
| transparent 100% | ||
| ); | ||
| mask-repeat: no-repeat; | ||
| mask-mode: alpha; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add WebKit prefix to guarantee mask support in Safari / iOS.
mask-image is not (yet) supported by Safari without the -webkit- prefix. On WebKit browsers the fade will silently fail, so the conversation text will scroll hard-cut underneath the input bar.
Add the prefixed declaration right next to the standard one.
mask-image: linear-gradient(
to bottom,
transparent 2%,
black 5%,
black 94%,
transparent 100%
);
+ -webkit-mask-image: linear-gradient(
+ to bottom,
+ transparent 2%,
+ black 5%,
+ black 94%,
+ transparent 100%
+ );📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /* Fade mask for subtle chat fade effect */ | |
| .sol-fade-mask { | |
| max-height: 400px; | |
| overflow-y: auto; | |
| mask-image: linear-gradient( | |
| to bottom, | |
| transparent 2%, | |
| black 5%, | |
| black 95%, | |
| transparent 98% | |
| ); | |
| mask-repeat: no-repeat; | |
| mask-mode: alpha; | |
| overflow-y: auto; | |
| mask-image: linear-gradient( | |
| to bottom, | |
| transparent 2%, | |
| black 5%, | |
| black 94%, | |
| transparent 100% | |
| ); | |
| mask-repeat: no-repeat; | |
| mask-mode: alpha; | |
| } | |
| /* Fade mask for subtle chat fade effect */ | |
| .sol-fade-mask { | |
| overflow-y: auto; | |
| mask-image: linear-gradient( | |
| to bottom, | |
| transparent 2%, | |
| black 5%, | |
| black 94%, | |
| transparent 100% | |
| ); | |
| -webkit-mask-image: linear-gradient( | |
| to bottom, | |
| transparent 2%, | |
| black 5%, | |
| black 94%, | |
| transparent 100% | |
| ); | |
| mask-repeat: no-repeat; | |
| mask-mode: alpha; | |
| } |
🤖 Prompt for AI Agents
In src/assets/styles/chat.css around lines 658 to 670, the CSS uses mask-image
without the -webkit- prefix, causing the fade effect to fail on Safari/iOS. Add
the -webkit-mask-image property with the same linear-gradient value immediately
after the mask-image declaration to ensure compatibility with WebKit browsers.
| const [hasAutoAddedCurrentTab, setHasAutoAddedCurrentTab] = useState(false); | ||
| const [currentTabId, setCurrentTabId] = useState<number | null>(null); | ||
| const [pageUrl, setPageUrl] = useState<string>(''); | ||
| const [position, setPosition] = useState<string>('top-right'); | ||
| const [pageUrl, setPageUrl] = useState<string>(""); | ||
| const [position, setPosition] = useState<string>("top-right"); | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
pageUrl state is never read – remove dead code.
pageUrl is set but never consumed anywhere in the component, which will trip no-unused-vars / @typescript-eslint/no-unused-vars and needlessly re-renders on every tab-change.
-const [pageUrl, setPageUrl] = useState<string>("");…and drop every setPageUrl(...) call below.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/pages/askbar/AskBar.tsx around lines 24 to 28, the pageUrl state variable
is declared and set but never used anywhere in the component, causing
unnecessary re-renders and lint errors. Remove the declaration of pageUrl and
its setter useState<string>(""), and also remove all calls to setPageUrl(...)
throughout the component to eliminate this dead code.
|
I removed the updated placeholder text, as it seems there is adjustments to the placeholder text currently being made |
2 participants
I made some small visual tweaks to improve the UI and fix a few glitches.
Updated Askbar Styling
New Tab Page Chat Fading
Add in a visually similar fade to the new tab chat. This also fixes the visual issue of text scrolling underneath the question box
Updated Placeholder TextUpdated Sol's placeholder text to better reflect the multiple ways to access Sol. It felt awkward for the new tab page, with no pages yet attached, to say "Ask a question about this page"Small note: I noticed that due to my editor's auto formatting, a lot of formatting on the first commit was mistakenly /unnecessarily changed in the files I edited. Coderabbit, if you want to simplify this PR into what actually changed and remove the unnecessary file syntax changes, please go ahead.
Summary by CodeRabbit