feat: окно инструкций, свёрнутая история и обновление спонсоров

Инструкции вынесены в отдельное окно Electron; токены игроков не пропадают при смене сцены; предпросмотр и плейлисты адаптированы; история свёрнута по умолчанию.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/renderer/shared/playlists/PlaylistsPanel.module.css

@@ -10,6 +10,7 @@
 .sidebar,
 .main {
   min-height: 0;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -74,6 +75,8 @@
   color: var(--text);
   text-align: left;
   cursor: pointer;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .playlistRow:hover,
@@ -103,10 +106,10 @@
 
 .playlistName,
 .trackTitle,
-.playlistNameReadonly,
 .trackTitleReadonly {
-  flex: 1;
+  flex: 1 1 0;
   min-width: 0;
+  width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -114,6 +117,7 @@
 }
 
 .trackTitle {
+  display: block;
   background: transparent;
   border: 0;
   color: inherit;
@@ -122,18 +126,24 @@
   padding: 0;
 }
 
-.playlistNameReadonly {
-  font-weight: 700;
-  font-size: var(--text-md, 1rem);
+.trackTitleReadonly {
+  display: block;
+  color: inherit;
 }
 
-.trackTitleReadonly {
-  color: inherit;
+.playlistNameReadonly {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 700;
+  font-size: var(--text-md, 1rem);
 }
 
 .playlistCount {
   font-size: var(--text-xs);
   color: var(--text2);
+  flex-shrink: 0;
 }
 
 .mainHeader {
@@ -153,6 +163,7 @@
   color: var(--text2);
   cursor: pointer;
   padding: 0 4px;
+  flex-shrink: 0;
 }
 
 .empty {

app/renderer/shared/playlists/PlaylistsPanel.tsx

@@ -309,7 +309,7 @@ export function PlaylistsPanel({
                 }
                 onClick={() => setSelectedId(pl.id)}
               >
-                <span className={styles.playlistName}>{pl.name || labels.untitled}</span>
+                <span className={styles.playlistName} title={pl.name || labels.untitled}>{pl.name || labels.untitled}</span>
                 {playerUi[pl.id]?.playing ? <span className={styles.playlistPlayingMark}>▶</span> : null}
                 <span className={styles.playlistCount}>{pl.tracks.length}</span>
               </button>
@@ -337,7 +337,9 @@ export function PlaylistsPanel({
           <>
             <div className={styles.mainHeader}>
               {readOnly ? (
-                <div className={styles.playlistNameReadonly}>{selected.name || labels.untitled}</div>
+                <div className={styles.playlistNameReadonly} title={selected.name || labels.untitled}>
+                  {selected.name || labels.untitled}
+                </div>
               ) : (
                 <Input value={editingName} onChange={setEditingName} onBlur={() => void saveRename()} />
               )}
@@ -436,7 +438,9 @@ export function PlaylistsPanel({
                         ▶
                       </button>
                       {readOnly ? (
-                        <span className={styles.trackTitleReadonly}>{title}</span>
+                        <span className={styles.trackTitleReadonly} title={title}>
+                          {title}
+                        </span>
                       ) : editingAudioId === tr.audioId ? (
                         <Input
                           value={editingAudioTitle}
@@ -453,11 +457,11 @@ export function PlaylistsPanel({
                         <button
                           type="button"
                           className={styles.trackTitle}
+                          title={title}
                           onClick={() => {
                             setEditingAudioId(tr.audioId);
                             setEditingAudioTitle(title);
                           }}
-                          title={labels.renameAudio}
                         >
                           {title}
                         </button>