update notifications + styles

public/notifications.xml

@@ -8,11 +8,30 @@
     <lastBuildDate>Mon, 28 Jul 2025 21:53:00 GMT</lastBuildDate>
     <atom:link href="https://pstream.mov/notifications.xml" rel="self" type="application/rss+xml" />
 
+    <item>
+      <guid>notification-032</guid>
+      <title>Bug fixes and source updates!</title>
+      <description>
+- Fixed speed boost not working on mobile! You should now be able to hold the screen to 2x the video!
+
+I also briefly broke the site for a few minutes, sorry about that!
+
+Source updates:
+- Added Flicky (thanks lew!)
+- Fixed VidSrcCx
+- Disabled SpeedStrm
+
+If you are interested in adding a new source to P-Stream, I recently created a new guide for it! Check the link below.</description>
+<link>https://providers.pstream.mov/in-depth/development</link>
+      <pubDate>Tue, 05 Aug 2025 10:55:00 MST</pubDate>
+      <category>bugfix</category>
+    </item>
+
+
     <item>
       <guid>notification-30</guid>
       <title>Digital Privacy Survey</title>
-      <description>
+      <description>I am conducting a survey to understand how people use privacy features in their daily lives and how it affects them mentally.
-      I am conducting a survey to understand how people use privacy features in their daily lives and how it affects them mentally.
 
 If you have a few minutes, please take the survey linked below!
       </description>

src/components/overlays/notificationsModal/components/DetailView.tsx

@@ -2,6 +2,7 @@ import { Icon, Icons } from "@/components/Icon";
 import { Link } from "@/pages/migration/utils";
 
 import { DetailViewProps } from "../types";
+import { formatNotificationDescription } from "../utils";
 
 export function DetailView({
   selectedNotification,
@@ -91,18 +92,9 @@ export function DetailView({
             className="text-type-secondary leading-relaxed"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
-              __html: selectedNotification.description
+              __html: formatNotificationDescription(
-                .replace(/\n\n/g, "</p><p>")
+                selectedNotification.description,
-                .replace(/\n- /g, "</p><p>• ")
+              ),
-                .replace(/\n\*\*([^*]+)\*\*/g, "</p><h4>$1</h4><p>")
-                .replace(/^/, "<p>")
-                .replace(/$/, "</p>")
-                .replace(/<p><\/p>/g, "")
-                .replace(
-                  /<p>• /g,
-                  '<p class="flex items-start gap-2"><span class="text-type-link mt-1">•</span><span>',
-                )
-                .replace(/<\/p>/g, "</span></p>"),
             }}
           />
         </div>

src/components/overlays/notificationsModal/components/ListView.tsx

@@ -1,6 +1,7 @@
 import { Icon, Icons } from "@/components/Icon";
 
 import { ListViewProps } from "../types";
+import { formatNotificationDescription } from "../utils";
 
 export function ListView({
   notifications,
@@ -185,22 +186,9 @@ export function ListView({
                         // eslint-disable-next-line react/no-danger
                         dangerouslySetInnerHTML={{
                           __html:
-                            notification.description
+                            formatNotificationDescription(
-                              .replace(/\n\n/g, "</p><p>")
+                              notification.description,
-                              .replace(/\n- /g, "</p><p>• ")
+                            ).substring(0, 150) +
-                              .replace(
-                                /\n\*\*([^*]+)\*\*/g,
-                                "</p><h4>$1</h4><p>",
-                              )
-                              .replace(/^/, "<p>")
-                              .replace(/$/, "</p>")
-                              .replace(/<p><\/p>/g, "")
-                              .replace(
-                                /<p>• /g,
-                                '<p class="flex items-start gap-2"><span class="text-type-link mt-1">•</span><span>',
-                              )
-                              .replace(/<\/p>/g, "</span></p>")
-                              .substring(0, 150) +
                             (notification.description.length > 150
                               ? "..."
                               : ""),

src/components/overlays/notificationsModal/utils/index.ts

@@ -136,3 +136,32 @@ export const getCategoryLabel = (category: string) => {
       return category;
   }
 };
+export function formatNotificationDescription(description: string): string {
+  return (
+    description
+      // First, normalize multiple consecutive line breaks to single line breaks
+      .replace(/\n{3,}/g, "\n\n")
+      // Handle bullet points before paragraph breaks
+      .replace(/\n- /g, "</p><p>• ")
+      // Handle bold text (headers)
+      .replace(/\n\*\*([^*]+)\*\*/g, "</p><h4>$1</h4><p>")
+      // Handle paragraph breaks (double line breaks)
+      .replace(/\n\n/g, "</p><br /><p>")
+      // Handle single line breaks within paragraphs
+      .replace(/\n/g, "<br />")
+      // Wrap in paragraph tags
+      .replace(/^/, "<p>")
+      .replace(/$/, "</p>")
+      // Remove empty paragraphs
+      .replace(/<p><\/p>/g, "")
+      // Clean up consecutive paragraph tags
+      .replace(/<\/p><p><\/p>/g, "</p>")
+      .replace(/<p><\/p><p>/g, "<p>")
+      // Style bullet points
+      .replace(
+        /<p>• /g,
+        '<p class="flex items-start gap-2"><span class="text-type-link mt-1">•</span><span>',
+      )
+      .replace(/<\/p>/g, "</span></p>")
+  );
+}