fix multiple ui and content issues by mostafaNazari702 · Pull Request #377 · ReVanced/revanced-website

mostafaNazari702 · 2026-03-26T16:27:47Z

No description provided.

@html

…update deps fix(announcements): fix hydration mismatch and FOUC on card content The ReVanced API returns announcement content as rich HTML, including malformed tags, embedded <style> blocks, and unquoted attributes. Using {@html} during SSR caused the browser to restructure the DOM to correct these issues, producing a tree that no longer matched Svelte's expected hydration structure, resulting in: DOMException: Node.appendChild: Cannot add children to a Text In AnnouncementCard, replace {@html} with a plain-text derived value that strips HTML tags. This renders correctly on the server, eliminating both the hydration mismatch and the flash of empty content that appeared when the client-only renderHtml action was used as an interim fix. In Content (the detail view), replace {@html} with a use:renderHtml action that sets innerHTML client-side after hydration, safely rendering full rich HTML without a hydration conflict. The flash is acceptable here since this is a client-navigated detail panel, not SSR-critical. Additional changes in this commit: - fix(tooltip): rewrite ToolTip component using position:fixed and JS-driven positioning so tooltips on archived announcement cards are never clipped by overflow:hidden containers or viewport edges. Add max-width, multi-line wrapping, and centered text for readability. - fix(announcements): separate tag filters for active and archived sections. Active tags use URL-synced state; archived tags use independent local state. Clicking a tag in one section no longer affects the other. - fix(announcements): tags belonging only to archived announcements now appear exclusively inside the archive section (visible when expanded). Shared tags appear in both sections. - fix(announcements): strip <style> and <script> blocks (including their inner text) from HTML content before tag-stripping, so CSS rules no longer leak into card preview text. - fix(announcements): remove justify-content:space-between from card layout to eliminate the empty gap between timestamp and content. Tags are pinned to the card bottom via margin-top:auto instead. - fix(api): make 'status' field optional in AboutSchema and About type so upstream API responses (which omit it) no longer cause Zod validation failures on every page load. - fix(api/server): correct endpoint typo 'announcement/latest' to 'announcements/latest'. - fix(layout): access created_at via item.announcement.created_at instead of item.created_at in the layout banner filter. - fix(announcements): always send tags array in announcement update payload so clearing all tags is persisted correctly. - chore(deps): update project dependencies

oSumAtrIX · 2026-03-26T19:26:13Z

src/lib/components/atoms/ToolTip.svelte

-		transform: translateX(-50%);
-		margin-bottom: 8px;
-		padding: 0.75rem 1rem;
+		/* Fixed escapes overflow:hidden on any ancestor (e.g. archive collapse container)


I dont think this comment is supposed to be here

I was certain that i needed to explain the big changes in the file and the removal of many css properties but will be removed.

oSumAtrIX · 2026-03-26T19:26:32Z

src/lib/components/organisms/AnnouncementCard.svelte

 		announcement.archived_at ? relativeTime(announcement.archived_at) : ''
 	);
+
+	let textContent = $derived(


Whats this for

so the card only shows the actual readable text instead of hidden website formatting/code from the announcement card in the announcements page.

Before i fixed it, it was like this on the card:
li { font-size: initial; font-weight: inherit; } pre { overflow: auto; padding: 1rem; border-radius: 0.25rem; background: var(--surface-four); }

Ushie

Forgot to submit my reviews, gg

Ushie · 2026-03-26T19:39:41Z

src/lib/components/atoms/ToolTip.svelte

Use a package like SVooltip, a custom ToolTip implementation is not necessary

SVooltip do not support interactive tooltips (hovering into the tooltip to click links/buttons inside it). From their own docs it says: "Including support for hovering the tooltip and clicking buttons inside and all that jazz. This will give you a tooltip. That's it."

We use interactive mode in TeamMemberCard to show a GPG key ID as a clickable link inside the tooltip. SVooltip cannot handle this, if my knowledge is at its peak. It also doesn't support svelte snippets for structured tooltip comtent.

The custom component is around 90 lines of logic + CSS, uses position: fixed´ to escape ancestor overflow:hidden` (which was the original bug), and integrates with the project's CSS variables. It's small and purpose-built for exactly our requirements.

You dont need the GPG Key ID to be a clickable link, the icon itself should be clickable, as it was pre-rewrite

but it doesnt hurt to have the id to be clickabe too

With this much code and pretty much no real usecase I'd rather use Svooltip

You dont need the GPG Key ID to be a clickable link, the icon itself should be clickable, as it was pre-rewrite

TeamMemberCard.svelte has zero changes in this PR. the interactive tooltip with the clickable GPG key link existed before this PR in the rewrite, identically. This PR only changed the ToolTip's positioning from position: absolute to position: fixed + JS to fix tooltips being clipped by overflow:hidden on the archive collapse container.

With this much code and pretty much no real usecase I'd rather use Svooltip

The code increase in this PR is the JS positioning logic (80 lines~) that fixes tooltips being clipped inside the archive collapse container (overflow:hidden). The old position: absolute approach couldn't escape ancestor clipping, that was the bug.

Adopting SVooltip is a separate discussion from this bugfix PR. It would require removing the interactive tooltip that was designed in the rewrite, refactoring 3 cosumer components, and adding a new dependency. Happy to discuss that as a separate issue if (OsumAtrix/$) wants to evaluate it, but bunndling it into this bugfix would expand the scope significantlly.

It's fine I will do it myself later

It's fine I will do it myself later

You can do that but i, from my experience, can assure you that you will get a ton of bugs. The code will also become significantly more to fix each bug individually. I do however wish you best of luck!

Ushie · 2026-03-26T19:41:41Z

src/lib/components/organisms/AnnouncementCard.svelte

+	let textContent = $derived(
+		announcement.content
+			? announcement.content
+					.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
+					.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
+					.replace(/<[^>]*>/g, ' ')
+					.replace(/\s+/g, ' ')
+					.trim()
+			: ''
+	);


What issue does this solve? Styling was intended for the preview, the CSS should be adjusted for it not to be as jarring

oSumAtrIX reviewed Mar 26, 2026

View reviewed changes

oSumAtrIX requested a review from madkarmaa March 26, 2026 19:26

Ushie reviewed Mar 26, 2026

View reviewed changes

Uh oh!

Conversation

mostafaNazari702 commented Mar 26, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Ushie left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Ushie Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Ushie Mar 26, 2026 •

edited

Loading