feat: add pinning functionality for streamers in a channel section

[maksPodstawski]

Description

Briefly explain what this PR does. Is it a bug fix, new feature, or a refactor?

Testing

Select all the environments you tested this PR with:

Twitch

• BetterTTV (BTTV)
• FrankerFaceZ (FFZ)
• 7TV
• Native Twitch

Kick

• 7TV
• Nipahtv (NTV)
• Native Kick

Please describe how you tested this change in the selected environments.

Related Issues

If this PR addresses an issue, link it here (e.g., Closes #123).

✨

Description by Callstackai

This PR adds pinning functionality for streamers in a channel section, allowing users to pin their favorite streamers for easier access.

Diagrams of code changes

sequenceDiagram
    participant User
    participant ChannelSection
    participant PinStreamerModule
    participant Settings
    
    User->>ChannelSection: Views channel
    ChannelSection->>Settings: Get pinnedStreamers setting
    Settings-->>ChannelSection: Returns pinned streamers list
    
    User->>ChannelSection: Clicks pin button
    ChannelSection->>PinStreamerModule: togglePinnedStreamer(channelId)
    PinStreamerModule->>Settings: Update pinnedStreamers setting
    PinStreamerModule->>PinStreamerModule: Emit pinnedStreamersUpdated event
    
    Note over ChannelSection,PinStreamerModule: Both modules listen for pinnedStreamersUpdated
    
    PinStreamerModule-->>ChannelSection: Update pin state
    PinStreamerModule->>PinStreamerModule: Refresh pins in DOM
    ChannelSection-->>User: Update UI with new pin state

Loading

Files Changed

File	Summary
src/platforms/twitch/modules/channel-section/channel-section.module.tsx	Added functionality to manage pinned streamers, including event handling and state management.
src/platforms/twitch/modules/pin-streamer/pin-streamer.module.tsx	Implemented pinning logic and UI updates for streamers, including synchronization with the state.
src/shared/components/channel-section/channel-section.component.tsx	Updated the channel section component to include pinning UI elements.
src/shared/utils/common.utils.ts	Removed unused imports.
src/types/platforms/twitch/twitch.events.types.ts	Added new event type for pinned streamers updates.

[callstackai]

Key Issues

The assignment of this.channelId in both updateNames() and run() could cause a race condition due to the asynchronous nature of updateNames(). The condition on line 79 fails to check if isPinned.value exists, risking a runtime error if isPinned is undefined.

[callstackai]

🐛 Possible Bug
The this.channelId is assigned twice - once in updateNames() and again in the run() method. Since updateNames() is now async, this could lead to a race condition where the channel ID gets overwritten with a different value before the pin toggle handler executes.

Suggested change

	this.channelId = await this.getChannelId();
	const channelId = await this.getChannelId();
	this.channelId = channelId;

[callstackai]

🐛 Possible Bug
The condition if (!channelId || !isPinned) return; on line 79 only checks if isPinned is falsy, but doesn't verify if isPinned.value exists before using it on line 80. This could lead to a runtime error if isPinned is a signal object but its value is undefined.

Suggested change

	if (!channelId || !isPinned) return;
	isPinned.value = await this.togglePinnedStreamer(channelId);
	if (!channelId || !isPinned || isPinned.value === undefined) return;
	isPinned.value = await this.togglePinnedStreamer(channelId);