update css

assuming this works, I want to move reader badge css to its own css file as well

/* Reader Badge */

.reader-badge {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 0.875rem;

    color: var(--color-text-muted);

    background-color: var(--color-bg-alt);

    padding: 0.25rem 0.5rem;

    border-radius: var(--radius);

    border: 1px solid var(--color-border);

}

.reader-dot {

    color: var(--color-success);

    font-size: 1.2em;

    line-height: 0.5;

    animation: pulse 2s infinite;

}

@Keyframes pulse {

    0% { opacity: 1; }

    50% { opacity: 0.4; }

    100% { opacity: 1; }

}

@using MyBlog.Core.Interfaces

@Inject IReaderTrackingService TrackingService

@implements IDisposable

@if (_count > 0)

{

    <span class="reader-badge" title="Live reader count">

        <span class="reader-dot">●</span>

        @_count people reading

    </span>

}

@code {

    [Parameter]

    public string Slug { get; set; } = "";

    private int _count;

    protected override void OnInitialized()

    {

        if (string.IsNullOrEmpty(Slug)) return;

        // Join the group and get initial count

        TrackingService.JoinPost(Slug);

        _count = TrackingService.GetReaderCount(Slug);

        // Listen for updates

        TrackingService.OnCountChanged += HandleCountChanged;

    }

    private void HandleCountChanged(string slug, int count)

    {

        if (slug == Slug)

        {

            _count = count;

            InvokeAsync(StateHasChanged);

        }

    }

    public void Dispose()

    {

        if (!string.IsNullOrEmpty(Slug))

        {

            TrackingService.LeavePost(Slug);

            TrackingService.OnCountChanged -= HandleCountChanged;

        }

    }

}

This is a perfect candidate for CSS isolation because of that `@keyframes` animation. By moving it to a scoped file, the `pulse` animation name won't conflict with any other animations you might add later in the project.

Follow these steps to migrate the code:

### 1. Create the Scoped CSS File

Create a new file named **`ReaderBadge.razor.css`** in the same folder as your component and paste the styles there:

```css
/* ReaderBadge.razor.css */

.reader-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    background-color: var(--color-bg-alt);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

.reader-dot {
    color: var(--color-success);
    font-size: 1.2em;
    line-height: 0.5;
    animation: pulse 2s infinite;
}

/* Scoped keyframes: Blazor will rename 'pulse' to something unique
   to prevent collisions with other components */
@Keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

```

### 2. Verify the Component File

Your **`ReaderBadge.razor`** file should now be strictly HTML and C# logic. Ensure it looks like this:

```razor
@using MyBlog.Core.Interfaces
@Inject IReaderTrackingService TrackingService
@implements IDisposable

@if (_count > 0)
{
    <span class="reader-badge" title="Live reader count">
        <span class="reader-dot">●</span>
        @_count people reading
    </span>
}

@code {
    [Parameter] public string Slug { get; set; } = "";
    private int _count;

    protected override void OnInitialized()
    {
        if (string.IsNullOrEmpty(Slug)) return;
        TrackingService.JoinPost(Slug);
        _count = TrackingService.GetReaderCount(Slug);
        TrackingService.OnCountChanged += HandleCountChanged;
    }

    private void HandleCountChanged(string slug, int count)
    {
        if (slug == Slug)
        {
            _count = count;
            InvokeAsync(StateHasChanged);
        }
    }

    public void Dispose()
    {
        if (!string.IsNullOrEmpty(Slug))
        {
            TrackingService.LeavePost(Slug);
            TrackingService.OnCountChanged -= HandleCountChanged;
        }
    }
}

```

---

### Important Note on Animations

When you use `@keyframes` inside an isolated CSS file, Blazor's compiler is smart enough to rename the animation. For example, it might change `pulse` to `pulse-b-123456` in both the `@keyframes` definition and the `animation:` property. This is why isolation is so powerful—you don't have to worry about accidentally "breaking" an animation in a different component with the same name.

### Clean Up `site.css`

Don't forget to delete the `/* Reader Badge */` block from your `site.css`. Keeping the global CSS file as thin as possible makes it much easier to maintain as your project grows.

**One quick check:** Are you using this badge inside your `PostDetail.razor` page? If so, you'll just call it like `<ReaderBadge Slug="@currentSlug" />`. Would you like me to help you set up the parent component to pass that Slug correctly?

Author: 9034725985

src/MyBlog.Web/Components/Shared/ReaderBadge.razor.css

@@ -0,0 +1,25 @@
+/* Reader Badge */
+.reader-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--color-text-muted);
+    background-color: var(--color-bg-alt);
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--radius);
+    border: 1px solid var(--color-border);
+}
+
+.reader-dot {
+    color: var(--color-success);
+    font-size: 1.2em;
+    line-height: 0.5;
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.4; }
+    100% { opacity: 1; }
+}

src/MyBlog.Web/wwwroot/css/site.css

@@ -542,29 +542,3 @@ a:hover {
 .share-btn.success {
     color: var(--color-success);
 }
-
-/* Reader Badge */
-.reader-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.875rem;
-    color: var(--color-text-muted);
-    background-color: var(--color-bg-alt);
-    padding: 0.25rem 0.5rem;
-    border-radius: var(--radius);
-    border: 1px solid var(--color-border);
-}
-
-.reader-dot {
-    color: var(--color-success);
-    font-size: 1.2em;
-    line-height: 0.5;
-    animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-    0% { opacity: 1; }
-    50% { opacity: 0.4; }
-    100% { opacity: 1; }
-}