Bump to 0.3.0

Voteのサポート
like数の表示
2026-04-09 18:34:35 +09:00 · 2026-04-09 17:14:32 +09:00 · 2026-04-09 05:22:07 +09:00 · 2026-04-09 05:14:17 +09:00 · 2026-04-09 05:03:26 +09:00 · 2026-04-09 04:57:27 +09:00
13 changed files with 1260 additions and 147 deletions
@@ -1,7 +1,7 @@
 {
  "manifest_version": 3,
  "name": "YT Playlist Features",
-  "version": "0.2.0",
+  "version": "0.3.0",
  "description": "Extract and work with YouTube playlist data",
  "permissions": ["storage"],
  "background": {
@@ -1,7 +1,7 @@
 {
  "manifest_version": 3,
  "name": "YT Playlist Features",
-  "version": "0.2.0",
+  "version": "0.3.0",
  "description": "Extract and work with YouTube playlist data",
  "permissions": ["storage"],
  "background": {
@@ -1,12 +1,12 @@
 {
  "name": "yt-playlist-features",
-  "version": "0.1.1",
+  "version": "0.3.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "yt-playlist-features",
-      "version": "0.1.1",
+      "version": "0.3.0",
      "dependencies": {
        "webextension-polyfill": "^0.12.0"
      },
@@ -1,6 +1,6 @@
 {
  "name": "yt-playlist-features",
-  "version": "0.2.0",
+  "version": "0.3.0",
  "private": true,
  "type": "module",
  "scripts": {
@@ -67,6 +67,9 @@ async function fetchVideoDetails(
            : null,
          publishedAt: item.snippet?.publishedAt?.slice(0, 10) ?? null,
          category: CATEGORY_MAP[item.snippet?.categoryId] ?? null,
+          likeCount: item.statistics?.likeCount
+            ? parseInt(item.statistics.likeCount, 10)
+            : null,
        }));

        browser.tabs.sendMessage(tabId, {
@@ -180,6 +180,9 @@ function parseVideo(renderer: any): PlaylistVideo | null {
    category: null,
    addedBy: null,
    voteCount: null,
+    likeCount: null,
+    setVideoId: null,
+    voteStatus: null,
  };
 }

@@ -3,7 +3,7 @@ import { onPlaylistPageReady, getPlaylistId } from "./navigation";
 import { parseInitialData, buildPlaylistData } from "./extractor";
 import type { PlaylistVideo } from "../types/playlist";
 import type { Message } from "../shared/messages";
-import { mountTable, appendToTable, setTableComplete, updateTableDetails } from "./ui/lifecycle";
+import { mountTable, appendToTable, setTableComplete, updateTableDetails, updateVoteStatuses } from "./ui/lifecycle";

 const LOG = "[yt-playlist-features]";

@@ -37,6 +37,9 @@ function mapRawVideo(v: any): PlaylistVideo {
    category: v.category ?? null,
    addedBy: v.addedBy ?? null,
    voteCount: v.voteCount ?? null,
+    likeCount: v.likeCount ?? null,
+    setVideoId: v.setVideoId ?? null,
+    voteStatus: v.voteStatus ?? null,
  } satisfies PlaylistVideo;
 }

@@ -121,6 +124,7 @@ function handlePlaylistAppend(event: Event): void {
 document.addEventListener("__yt_playlist_ext_data", handlePlaylistData);
 document.addEventListener("__yt_playlist_ext_data", handlePlaylistAppend);

+
 // Listen for detail updates from background service worker
 browser.runtime.onMessage.addListener((message: unknown) => {
  const msg = message as Message;
@@ -6,6 +6,7 @@ type MessageKey =
  | "colViews"
  | "colPublished"
  | "colCategory"
+  | "colLikes"
  | "colAddedBy"
  | "colVotes"
  | "filterTitle"
@@ -17,7 +18,20 @@ type MessageKey =
  | "headerLoading"
  | "fetchViews"
  | "fetchViewsProgress"
-  | "fetchViewsDone";
+  | "fetchViewsDone"
+  | "colSettings"
+  | "colSettingsReset"
+  | "statsDuration"
+  | "statsChannels"
+  | "statsPlayable"
+  | "statsTotalViews"
+  | "statsDetail"
+  | "statsDetailChannelRank"
+  | "statsDetailAddedByRank"
+  | "statsDetailCategoryBreak"
+  | "statsDetailDurationAvg"
+  | "statsDetailDurationMedian"
+  | "statsDetailVideos";

 const messages: Record<string, Record<MessageKey, string>> = {
  ja: {
@@ -28,6 +42,7 @@ const messages: Record<string, Record<MessageKey, string>> = {
    colViews: "再生数",
    colPublished: "公開日",
    colCategory: "カテゴリ",
+    colLikes: "高評価",
    colAddedBy: "追加者",
    colVotes: "投票",
    filterTitle: "タイトル検索...",
@@ -37,9 +52,22 @@ const messages: Record<string, Record<MessageKey, string>> = {
    badgeLive: "ライブ",
    headerVideos: "本の動画",
    headerLoading: "読み込み中…",
-    fetchViews: "再生数を取得",
+    fetchViews: "全件詳細を取得",
    fetchViewsProgress: "取得中…",
    fetchViewsDone: "取得完了",
+    colSettings: "表示",
+    colSettingsReset: "リセット",
+    statsDuration: "合計時間",
+    statsChannels: "チャンネル",
+    statsPlayable: "再生可能",
+    statsTotalViews: "総再生数",
+    statsDetail: "詳細",
+    statsDetailChannelRank: "チャンネル別",
+    statsDetailAddedByRank: "追加者別",
+    statsDetailCategoryBreak: "カテゴリ別",
+    statsDetailDurationAvg: "平均再生時間",
+    statsDetailDurationMedian: "中央値",
+    statsDetailVideos: "本",
  },
  en: {
    colIndex: "#",
@@ -49,6 +77,7 @@ const messages: Record<string, Record<MessageKey, string>> = {
    colViews: "Views",
    colPublished: "Published",
    colCategory: "Category",
+    colLikes: "Likes",
    colAddedBy: "Added by",
    colVotes: "Votes",
    filterTitle: "Search title...",
@@ -58,9 +87,22 @@ const messages: Record<string, Record<MessageKey, string>> = {
    badgeLive: "LIVE",
    headerVideos: "videos",
    headerLoading: "loading…",
-    fetchViews: "Fetch views",
+    fetchViews: "Fetch all details",
    fetchViewsProgress: "Fetching…",
    fetchViewsDone: "Done",
+    colSettings: "View",
+    colSettingsReset: "Reset",
+    statsDuration: "Total",
+    statsChannels: "Channels",
+    statsPlayable: "Playable",
+    statsTotalViews: "Total views",
+    statsDetail: "Details",
+    statsDetailChannelRank: "By channel",
+    statsDetailAddedByRank: "By contributor",
+    statsDetailCategoryBreak: "By category",
+    statsDetailDurationAvg: "Avg. duration",
+    statsDetailDurationMedian: "Median",
+    statsDetailVideos: "videos",
  },
 };

@@ -1,7 +1,7 @@
 import type { PlaylistData, PlaylistVideo } from "../../types/playlist";
 import { injectStyles } from "./styles";
 import type { DetailUpdate } from "../../types/playlist";
-import { renderPlaylistTable, type PlaylistTableHandle } from "./table-renderer";
+import { renderPlaylistTable, loadColumnPrefs, type PlaylistTableHandle } from "./table-renderer";

 const CONTAINER_ID = "ytpf-playlist-table";

@@ -41,11 +41,12 @@ function insertAt(el: HTMLElement, anchor: { parent: Element; before: Element |

 let pendingObserver: MutationObserver | null = null;

-export function mountTable(data: PlaylistData): void {
+export async function mountTable(data: PlaylistData): Promise<void> {
  unmountTable();
  injectStyles();

-  currentHandle = renderPlaylistTable(data);
+  const prefs = await loadColumnPrefs();
+  currentHandle = renderPlaylistTable(data, prefs);
  const el = currentHandle.element;
  el.id = CONTAINER_ID;

@@ -79,6 +80,10 @@ export function updateTableDetails(updates: DetailUpdate[]): void {
  currentHandle?.updateDetails(updates);
 }

+export function updateVoteStatuses(statuses: { setVideoId: string; voteStatus: "up" | "down" | null }[]): void {
+  currentHandle?.updateVoteStatuses(statuses);
+}
+
 export function unmountTable(): void {
  if (pendingObserver) {
    pendingObserver.disconnect();
@@ -49,6 +49,208 @@ html[dark] .ytpf-toggle {
  transform: rotate(-90deg);
 }

+.ytpf-stats {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 16px;
+  flex-wrap: wrap;
+  border-bottom: 1px solid var(--yt-spec-10-percent-layer, rgba(0,0,0,0.06));
+}
+
+html[dark] .ytpf-stats {
+  border-bottom-color: rgba(255,255,255,0.06);
+}
+
+.ytpf-stats--hidden {
+  display: none;
+}
+
+.ytpf-stat {
+  font-size: 12px;
+  color: var(--yt-spec-text-secondary, #606060);
+  white-space: nowrap;
+}
+
+html[dark] .ytpf-stat {
+  color: #aaa;
+}
+
+.ytpf-stat-value {
+  font-family: "Roboto Mono", monospace;
+  color: var(--yt-spec-text-primary, #0f0f0f);
+}
+
+html[dark] .ytpf-stat-value {
+  color: #f1f1f1;
+}
+
+.ytpf-stats-detail-btn {
+  padding: 2px 8px;
+  border: 1px solid var(--yt-spec-10-percent-layer, rgba(0,0,0,0.2));
+  border-radius: 12px;
+  background: transparent;
+  color: var(--yt-spec-text-secondary, #606060);
+  font-size: 11px;
+  font-family: "Roboto", "Arial", sans-serif;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+html[dark] .ytpf-stats-detail-btn {
+  border-color: rgba(255,255,255,0.2);
+  color: #aaa;
+}
+
+.ytpf-stats-detail-btn:hover {
+  background: var(--yt-spec-badge-chip-background, #f2f2f2);
+}
+
+html[dark] .ytpf-stats-detail-btn:hover {
+  background: #3e3e3e;
+}
+
+.ytpf-stats-spacer {
+  flex: 1;
+}
+
+.ytpf-detail-popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.1);
+  border-radius: 12px;
+  padding: 20px 24px;
+  min-width: 360px;
+  max-width: 560px;
+  max-height: 70vh;
+  overflow-y: auto;
+  z-index: 3000;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
+  font-family: "Roboto", "Arial", sans-serif;
+  font-size: 13px;
+  color: var(--yt-spec-text-primary, #0f0f0f);
+}
+
+html[dark] .ytpf-detail-popup {
+  background: #212121;
+  border-color: rgba(255,255,255,0.1);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+  color: #f1f1f1;
+}
+
+.ytpf-detail-popup-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.4);
+  z-index: 2999;
+}
+
+.ytpf-detail-popup h3 {
+  font-size: 15px;
+  font-weight: 500;
+  margin: 0 0 16px;
+}
+
+.ytpf-detail-section {
+  margin-bottom: 16px;
+}
+
+.ytpf-detail-section:last-child {
+  margin-bottom: 0;
+}
+
+.ytpf-detail-section-title {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--yt-spec-text-secondary, #606060);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 6px;
+}
+
+html[dark] .ytpf-detail-section-title {
+  color: #aaa;
+}
+
+.ytpf-detail-bar-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 3px;
+  font-size: 12px;
+}
+
+.ytpf-detail-bar-label {
+  width: 140px;
+  flex-shrink: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ytpf-detail-bar-track {
+  flex: 1;
+  height: 14px;
+  background: var(--yt-spec-10-percent-layer, rgba(0,0,0,0.06));
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+html[dark] .ytpf-detail-bar-track {
+  background: rgba(255,255,255,0.08);
+}
+
+.ytpf-detail-bar-fill {
+  height: 100%;
+  border-radius: 3px;
+  background: var(--yt-spec-call-to-action, #065fd4);
+  opacity: 0.7;
+}
+
+html[dark] .ytpf-detail-bar-fill {
+  background: #3ea6ff;
+}
+
+.ytpf-detail-bar-count {
+  width: 48px;
+  flex-shrink: 0;
+  text-align: right;
+  font-family: "Roboto Mono", monospace;
+  font-size: 11px;
+  color: var(--yt-spec-text-secondary, #606060);
+}
+
+html[dark] .ytpf-detail-bar-count {
+  color: #aaa;
+}
+
+.ytpf-detail-kv {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  font-size: 12px;
+}
+
+.ytpf-detail-kv-item {
+  color: var(--yt-spec-text-secondary, #606060);
+}
+
+html[dark] .ytpf-detail-kv-item {
+  color: #aaa;
+}
+
+.ytpf-detail-kv-value {
+  font-family: "Roboto Mono", monospace;
+  color: var(--yt-spec-text-primary, #0f0f0f);
+}
+
+html[dark] .ytpf-detail-kv-value {
+  color: #f1f1f1;
+}
+
 .ytpf-filters {
  display: flex;
  align-items: flex-start;
@@ -242,6 +444,7 @@ html[dark] .ytpf-filter-count {
 }

 .ytpf-th {
+  position: relative;
  text-align: left;
  padding: 8px 12px;
  font-weight: 500;
@@ -310,8 +513,72 @@ html[dark] .ytpf-tr:hover {
 .ytpf-col-views { width: 120px; text-align: right; font-family: "Roboto Mono", monospace; }
 .ytpf-col-published { width: 110px; font-family: "Roboto Mono", monospace; }
 .ytpf-col-category { width: 120px; }
+.ytpf-col-likes { width: 90px; text-align: right; font-family: "Roboto Mono", monospace; }
 .ytpf-col-addedby { width: 140px; }
-.ytpf-col-votes { width: 60px; text-align: center; font-family: "Roboto Mono", monospace; }
+.ytpf-col-votes { width: 90px; text-align: center; font-family: "Roboto Mono", monospace; }
+
+.ytpf-vote {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.ytpf-vote-btn {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--yt-spec-text-secondary, #606060);
+  font-size: 10px;
+  line-height: 1;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+html[dark] .ytpf-vote-btn {
+  color: #aaa;
+}
+
+.ytpf-vote-btn:hover:not(:disabled) {
+  background: var(--yt-spec-badge-chip-background, #f2f2f2);
+  color: var(--yt-spec-text-primary, #0f0f0f);
+}
+
+html[dark] .ytpf-vote-btn:hover:not(:disabled) {
+  background: #3e3e3e;
+  color: #f1f1f1;
+}
+
+.ytpf-vote-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.ytpf-vote-count {
+  min-width: 16px;
+  text-align: center;
+  font-size: 12px;
+}
+
+.ytpf-vote-count--voted {
+  font-weight: 700;
+}
+
+.ytpf-vote-btn--active {
+  color: var(--yt-spec-call-to-action, #065fd4);
+}
+
+html[dark] .ytpf-vote-btn--active {
+  color: #3ea6ff;
+}
+
+.ytpf-vote-btn--dim {
+  opacity: 0.25;
+}

 .ytpf-fetch-views-btn {
  padding: 4px 12px;
@@ -342,6 +609,150 @@ html[dark] .ytpf-fetch-views-btn:hover:not(:disabled) {
  opacity: 0.6;
  cursor: default;
 }
+
+.ytpf-menu-anchor {
+  position: relative;
+}
+
+.ytpf-menu-btn {
+  padding: 4px 8px;
+  border: none;
+  background: transparent;
+  color: var(--yt-spec-text-secondary, #606060);
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  border-radius: 50%;
+}
+
+.ytpf-menu-btn:hover {
+  background: var(--yt-spec-badge-chip-background, #f2f2f2);
+}
+
+html[dark] .ytpf-menu-btn {
+  color: #aaa;
+}
+
+html[dark] .ytpf-menu-btn:hover {
+  background: #3e3e3e;
+}
+
+.ytpf-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.1);
+  border-radius: 8px;
+  padding: 4px 0;
+  min-width: 160px;
+  z-index: 2001;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+html[dark] .ytpf-menu {
+  background: #282828;
+  border-color: rgba(255,255,255,0.1);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+}
+
+.ytpf-menu-heading {
+  padding: 6px 12px 2px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--yt-spec-text-secondary, #606060);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+html[dark] .ytpf-menu-heading {
+  color: #aaa;
+}
+
+.ytpf-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 12px;
+  font-size: 13px;
+  color: var(--yt-spec-text-primary, #0f0f0f);
+  cursor: pointer;
+}
+
+html[dark] .ytpf-menu-item {
+  color: #f1f1f1;
+}
+
+.ytpf-menu-item:hover {
+  background: var(--yt-spec-badge-chip-background, #f2f2f2);
+}
+
+html[dark] .ytpf-menu-item:hover {
+  background: #3e3e3e;
+}
+
+.ytpf-menu-item input[type="checkbox"] {
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.ytpf-menu-sep {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--yt-spec-10-percent-layer, rgba(0,0,0,0.1));
+}
+
+html[dark] .ytpf-menu-sep {
+  background: rgba(255,255,255,0.1);
+}
+
+.ytpf-menu-action {
+  display: block;
+  width: 100%;
+  padding: 5px 12px;
+  border: none;
+  background: transparent;
+  color: var(--yt-spec-text-secondary, #606060);
+  font-size: 12px;
+  font-family: "Roboto", "Arial", sans-serif;
+  cursor: pointer;
+  text-align: left;
+}
+
+html[dark] .ytpf-menu-action {
+  color: #aaa;
+}
+
+.ytpf-menu-action:hover {
+  background: var(--yt-spec-badge-chip-background, #f2f2f2);
+}
+
+html[dark] .ytpf-menu-action:hover {
+  background: #3e3e3e;
+}
+
+.ytpf-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -2px;
+  width: 5px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 1;
+}
+
+.ytpf-resize-handle:hover,
+.ytpf-resize-handle--active {
+  background: var(--yt-spec-call-to-action, #065fd4);
+  opacity: 0.4;
+}
+
+html[dark] .ytpf-resize-handle:hover,
+html[dark] .ytpf-resize-handle--active {
+  background: #3ea6ff;
+  opacity: 0.4;
+}
 .ytpf-tr--unplayable {
  opacity: 0.45;
 }
@@ -3,31 +3,73 @@ import type { PlaylistData, PlaylistVideo, DetailUpdate } from "../../types/play
 import type { Message } from "../../shared/messages";
 import { t } from "./i18n";

-type SortKey = "index" | "title" | "channel" | "duration" | "views" | "published" | "category" | "addedBy" | "votes";
+type SortKey = "index" | "title" | "channel" | "duration" | "views" | "likes" | "published" | "category" | "addedBy" | "votes";
 type SortDir = "asc" | "desc";

 interface Column {
  label: string;
  cls: string;
  key: SortKey;
-  collab?: boolean; // only shown for collaborative playlists
-  detail?: boolean; // shown after detail fetch
+  collab?: boolean;
+  detail?: boolean;
+  defaultWidth: number; // default width in %
 }

 function getAllColumns(hasDetails: boolean): Column[] {
  return [
-    { label: t("colIndex"), cls: "ytpf-col-index", key: "index" },
-    { label: t("colTitle"), cls: "ytpf-col-title", key: "title" },
-    { label: t("colChannel"), cls: "ytpf-col-channel", key: "channel" },
-    { label: t("colDuration"), cls: "ytpf-col-duration", key: "duration" },
-    { label: t("colViews"), cls: "ytpf-col-views", key: "views" },
-    { label: t("colPublished"), cls: "ytpf-col-published", key: "published", detail: true },
-    { label: t("colCategory"), cls: "ytpf-col-category", key: "category", detail: true },
-    { label: t("colAddedBy"), cls: "ytpf-col-addedby", key: "addedBy", collab: true },
-    { label: t("colVotes"), cls: "ytpf-col-votes", key: "votes", collab: true },
+    { label: t("colIndex"), cls: "ytpf-col-index", key: "index", defaultWidth: 5 },
+    { label: t("colTitle"), cls: "ytpf-col-title", key: "title", defaultWidth: 40 },
+    { label: t("colChannel"), cls: "ytpf-col-channel", key: "channel", defaultWidth: 20 },
+    { label: t("colDuration"), cls: "ytpf-col-duration", key: "duration", defaultWidth: 8 },
+    { label: t("colViews"), cls: "ytpf-col-views", key: "views", defaultWidth: 12 },
+    { label: t("colLikes"), cls: "ytpf-col-likes", key: "likes", detail: true, defaultWidth: 9 },
+    { label: t("colPublished"), cls: "ytpf-col-published", key: "published", detail: true, defaultWidth: 10 },
+    { label: t("colCategory"), cls: "ytpf-col-category", key: "category", detail: true, defaultWidth: 10 },
+    { label: t("colAddedBy"), cls: "ytpf-col-addedby", key: "addedBy", collab: true, defaultWidth: 14 },
+    { label: t("colVotes"), cls: "ytpf-col-votes", key: "votes", collab: true, defaultWidth: 6 },
  ];
 }

+// --- Column preferences persistence ---
+
+interface ColumnPref {
+  visible: boolean;
+  width: number;
+}
+
+export type ColumnPrefs = Record<string, ColumnPref>;
+
+export async function loadColumnPrefs(): Promise<ColumnPrefs> {
+  const result = await browser.storage.local.get("ytpf-column-prefs");
+  return (result["ytpf-column-prefs"] as ColumnPrefs) ?? {};
+}
+
+async function saveColumnPrefs(prefs: ColumnPrefs): Promise<void> {
+  await browser.storage.local.set({ "ytpf-column-prefs": prefs });
+}
+
+function getColumnVisible(col: Column, prefs: ColumnPrefs): boolean {
+  return prefs[col.key]?.visible ?? true;
+}
+
+function getColumnWidth(col: Column, prefs: ColumnPrefs): number {
+  return prefs[col.key]?.width ?? col.defaultWidth;
+}
+
+function getVisibleColumns(available: Column[], prefs: ColumnPrefs): Column[] {
+  return available.filter((c) => getColumnVisible(c, prefs));
+}
+
+function applyColumnWidths(thElements: HTMLTableCellElement[], visibleColumns: Column[], prefs: ColumnPrefs): void {
+  const widths = visibleColumns.map((c) => getColumnWidth(c, prefs));
+  const total = widths.reduce((a, b) => a + b, 0);
+  for (let i = 0; i < thElements.length; i++) {
+    thElements[i].style.width = `${(widths[i] / total) * 100}%`;
+  }
+}
+
+// --- Tag input ---
+
 interface TagInput {
  container: HTMLElement;
  getTags(): string[];
@@ -231,6 +273,8 @@ function compareFn(key: SortKey, dir: SortDir) {
        return ((a.durationSeconds ?? -1) - (b.durationSeconds ?? -1)) * m;
      case "views":
        return (parseViewCount(a.viewCountText) - parseViewCount(b.viewCountText)) * m;
+      case "likes":
+        return ((a.likeCount ?? -1) - (b.likeCount ?? -1)) * m;
      case "published":
        return (a.publishedAt ?? "").localeCompare(b.publishedAt ?? "") * m;
      case "category":
@@ -243,92 +287,123 @@ function compareFn(key: SortKey, dir: SortDir) {
  };
 }

+type VoteHandler = (video: PlaylistVideo, action: "up" | "down") => void;
+
+function buildCell(
+  video: PlaylistVideo,
+  col: Column,
+  playlistId: string,
+  onVote?: VoteHandler,
+): HTMLTableCellElement {
+  const td = document.createElement("td");
+  td.className = `ytpf-td ${col.cls}`;
+
+  switch (col.key) {
+    case "index":
+      td.textContent = String(video.index + 1);
+      break;
+    case "title": {
+      const link = document.createElement("a");
+      link.className = "ytpf-link";
+      link.href = `/watch?v=${video.videoId}&list=${playlistId}`;
+      link.textContent = video.title;
+      link.title = video.title;
+      td.appendChild(link);
+      break;
+    }
+    case "channel":
+      if (video.channel.url) {
+        const link = document.createElement("a");
+        link.className = "ytpf-link";
+        link.href = video.channel.url;
+        link.textContent = video.channel.name;
+        td.appendChild(link);
+      } else {
+        td.textContent = video.channel.name;
+      }
+      break;
+    case "duration":
+      if (video.isLive) {
+        const badge = document.createElement("span");
+        badge.className = "ytpf-live";
+        badge.textContent = t("badgeLive");
+        td.appendChild(badge);
+      } else {
+        td.textContent = video.durationText ?? "--";
+      }
+      break;
+    case "views":
+      td.textContent = video.viewCountText ?? "--";
+      break;
+    case "likes":
+      td.textContent = video.likeCount != null ? video.likeCount.toLocaleString() : "--";
+      break;
+    case "published":
+      td.textContent = video.publishedAt ?? "--";
+      break;
+    case "category":
+      td.textContent = video.category ?? "--";
+      break;
+    case "addedBy":
+      td.textContent = video.addedBy ?? "--";
+      break;
+    case "votes":
+      if (video.setVideoId && onVote) {
+        const wrap = document.createElement("span");
+        wrap.className = "ytpf-vote";
+
+        const vs = video.voteStatus;
+
+        const upBtn = document.createElement("button");
+        upBtn.className = "ytpf-vote-btn";
+        if (vs === "up") upBtn.classList.add("ytpf-vote-btn--active");
+        else if (vs === "down") upBtn.classList.add("ytpf-vote-btn--dim");
+        upBtn.textContent = "\u25B2";
+        upBtn.title = "Vote up";
+        upBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          onVote(video, "up");
+        });
+
+        const countSpan = document.createElement("span");
+        countSpan.className = "ytpf-vote-count";
+        if (vs) countSpan.classList.add("ytpf-vote-count--voted");
+        countSpan.textContent = video.voteCount != null ? String(video.voteCount) : "0";
+
+        const downBtn = document.createElement("button");
+        downBtn.className = "ytpf-vote-btn";
+        if (vs === "down") downBtn.classList.add("ytpf-vote-btn--active");
+        else if (vs === "up") downBtn.classList.add("ytpf-vote-btn--dim");
+        downBtn.textContent = "\u25BC";
+        downBtn.title = "Vote down";
+        downBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          onVote(video, "down");
+        });
+
+        wrap.append(upBtn, countSpan, downBtn);
+        td.appendChild(wrap);
+      } else {
+        td.textContent = video.voteCount != null ? String(video.voteCount) : "--";
+      }
+      break;
+  }
+
+  return td;
+}
+
 function buildRow(
  video: PlaylistVideo,
  playlistId: string,
-  isCollab: boolean,
-  hasDetails: boolean,
+  visibleColumns: Column[],
+  onVote?: VoteHandler,
 ): HTMLTableRowElement {
  const tr = document.createElement("tr");
  tr.className = "ytpf-tr";
  if (!video.isPlayable) tr.classList.add("ytpf-tr--unplayable");

-  // Index
-  const tdIndex = document.createElement("td");
-  tdIndex.className = "ytpf-td ytpf-col-index";
-  tdIndex.textContent = String(video.index + 1);
-  tr.appendChild(tdIndex);
-
-  // Title
-  const tdTitle = document.createElement("td");
-  tdTitle.className = "ytpf-td ytpf-col-title";
-  const titleLink = document.createElement("a");
-  titleLink.className = "ytpf-link";
-  titleLink.href = `/watch?v=${video.videoId}&list=${playlistId}`;
-  titleLink.textContent = video.title;
-  titleLink.title = video.title;
-  tdTitle.appendChild(titleLink);
-  tr.appendChild(tdTitle);
-
-  // Channel
-  const tdChannel = document.createElement("td");
-  tdChannel.className = "ytpf-td ytpf-col-channel";
-  if (video.channel.url) {
-    const chLink = document.createElement("a");
-    chLink.className = "ytpf-link";
-    chLink.href = video.channel.url;
-    chLink.textContent = video.channel.name;
-    tdChannel.appendChild(chLink);
-  } else {
-    tdChannel.textContent = video.channel.name;
-  }
-  tr.appendChild(tdChannel);
-
-  // Duration
-  const tdDuration = document.createElement("td");
-  tdDuration.className = "ytpf-td ytpf-col-duration";
-  if (video.isLive) {
-    const badge = document.createElement("span");
-    badge.className = "ytpf-live";
-    badge.textContent = t("badgeLive");
-    tdDuration.appendChild(badge);
-  } else {
-    tdDuration.textContent = video.durationText ?? "--";
-  }
-  tr.appendChild(tdDuration);
-
-  // Views
-  const tdViews = document.createElement("td");
-  tdViews.className = "ytpf-td ytpf-col-views";
-  tdViews.textContent = video.viewCountText ?? "--";
-  tr.appendChild(tdViews);
-
-  if (hasDetails) {
-    // Published
-    const tdPublished = document.createElement("td");
-    tdPublished.className = "ytpf-td ytpf-col-published";
-    tdPublished.textContent = video.publishedAt ?? "--";
-    tr.appendChild(tdPublished);
-
-    // Category
-    const tdCategory = document.createElement("td");
-    tdCategory.className = "ytpf-td ytpf-col-category";
-    tdCategory.textContent = video.category ?? "--";
-    tr.appendChild(tdCategory);
-  }
-
-  if (isCollab) {
-    // Added by
-    const tdAddedBy = document.createElement("td");
-    tdAddedBy.className = "ytpf-td ytpf-col-addedby";
-    tdAddedBy.textContent = video.addedBy ?? "--";
-    tr.appendChild(tdAddedBy);
-
-    // Votes
-    const tdVotes = document.createElement("td");
-    tdVotes.className = "ytpf-td ytpf-col-votes";
-    tdVotes.textContent = video.voteCount != null ? String(video.voteCount) : "--";
-    tr.appendChild(tdVotes);
+  for (const col of visibleColumns) {
+    tr.appendChild(buildCell(video, col, playlistId, onVote));
  }

  return tr;
@@ -339,14 +414,17 @@ export interface PlaylistTableHandle {
  appendVideos(newVideos: PlaylistVideo[]): void;
  setComplete(extractedCount: number): void;
  updateDetails(updates: DetailUpdate[]): void;
+  updateVoteStatuses(statuses: { setVideoId: string; voteStatus: "up" | "down" | null }[]): void;
 }

-export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
+export function renderPlaylistTable(data: PlaylistData, columnPrefs: ColumnPrefs): PlaylistTableHandle {
  const isCollab = data.videos.some(
    (v) => v.addedBy != null || v.voteCount != null,
  );
  let hasDetails = data.videos.some((v) => v.publishedAt != null || v.category != null);
-  let columns = getAllColumns(hasDetails).filter((c) => (!c.collab || isCollab) && (!c.detail || hasDetails));
+
+  let availableColumns = getAllColumns(hasDetails).filter((c) => (!c.collab || isCollab) && (!c.detail || hasDetails));
+  let visibleColumns = getVisibleColumns(availableColumns, columnPrefs);

  const wrapper = document.createElement("div");
  wrapper.className = "ytpf-wrapper";
@@ -367,16 +445,303 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
  }
  updateHeader();

-  const metaSpan = document.createElement("span");
-  metaSpan.className = "ytpf-header-meta";
-  if (data.metadata.totalDurationText) {
-    metaSpan.textContent = data.metadata.totalDurationText;
-  }
-
  const toggle = document.createElement("span");
  toggle.className = "ytpf-toggle";
  toggle.textContent = "\u25BC";

+  // ⋮ kebab menu
+  const menuAnchor = document.createElement("div");
+  menuAnchor.className = "ytpf-menu-anchor";
+
+  const menuBtn = document.createElement("button");
+  menuBtn.className = "ytpf-menu-btn";
+  menuBtn.textContent = "\u22EE"; // ⋮
+  menuAnchor.appendChild(menuBtn);
+
+  let menuPanel: HTMLElement | null = null;
+
+  function buildMenu(): HTMLElement {
+    const panel = document.createElement("div");
+    panel.className = "ytpf-menu";
+
+    const heading = document.createElement("div");
+    heading.className = "ytpf-menu-heading";
+    heading.textContent = t("colSettings");
+    panel.appendChild(heading);
+
+    for (const col of availableColumns) {
+      const item = document.createElement("label");
+      item.className = "ytpf-menu-item";
+
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      checkbox.checked = getColumnVisible(col, columnPrefs);
+
+      const span = document.createElement("span");
+      span.textContent = col.label;
+
+      checkbox.addEventListener("change", () => {
+        if (!columnPrefs[col.key]) columnPrefs[col.key] = { visible: true, width: col.defaultWidth };
+        columnPrefs[col.key].visible = checkbox.checked;
+        onColumnsChanged();
+      });
+
+      item.append(checkbox, span);
+      panel.appendChild(item);
+    }
+
+    // Separator + reset
+    const sep = document.createElement("div");
+    sep.className = "ytpf-menu-sep";
+    panel.appendChild(sep);
+
+    const resetBtn = document.createElement("button");
+    resetBtn.className = "ytpf-menu-action";
+    resetBtn.textContent = t("colSettingsReset");
+    resetBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      for (const key of Object.keys(columnPrefs)) delete columnPrefs[key];
+      onColumnsChanged();
+      // Sync checkboxes
+      panel.querySelectorAll<HTMLInputElement>('.ytpf-menu-item input[type="checkbox"]').forEach((cb) => {
+        cb.checked = true;
+      });
+    });
+    panel.appendChild(resetBtn);
+
+    return panel;
+  }
+
+  function closeMenu() {
+    if (menuPanel) {
+      menuPanel.remove();
+      menuPanel = null;
+    }
+  }
+
+  menuBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (menuPanel) {
+      closeMenu();
+    } else {
+      menuPanel = buildMenu();
+      menuAnchor.appendChild(menuPanel);
+    }
+  });
+
+  document.addEventListener("click", (e) => {
+    if (menuPanel && !menuAnchor.contains(e.target as Node)) {
+      closeMenu();
+    }
+  });
+
+  header.append(titleSpan, toggle);
+  wrapper.appendChild(header);
+
+  // Stats bar (between header and filters)
+  const statsBar = document.createElement("div");
+  statsBar.className = "ytpf-stats";
+
+  function makeStat(label: string, value: string): HTMLElement {
+    const span = document.createElement("span");
+    span.className = "ytpf-stat";
+    span.textContent = `${label}: `;
+    const val = document.createElement("span");
+    val.className = "ytpf-stat-value";
+    val.textContent = value;
+    span.appendChild(val);
+    return span;
+  }
+
+  function formatNumber(n: number): string {
+    return n.toLocaleString();
+  }
+
+  function formatDuration(totalSec: number): string {
+    const h = Math.floor(totalSec / 3600);
+    const m = Math.floor((totalSec % 3600) / 60);
+    const s = totalSec % 60;
+    if (h > 0) return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+    return `${m}:${String(s).padStart(2, "0")}`;
+  }
+
+  const statDuration = makeStat(t("statsDuration"), data.metadata.totalDurationText ?? "--");
+  const statChannels = makeStat(t("statsChannels"), "0");
+  const statPlayable = makeStat(t("statsPlayable"), "0");
+  const statTotalViews = makeStat(t("statsTotalViews"), "--");
+  statTotalViews.style.display = "none";
+
+  function updateStats() {
+    const channelSet = new Set(videos.map((v) => v.channel.name));
+    statChannels.querySelector(".ytpf-stat-value")!.textContent = String(channelSet.size);
+    const playable = videos.filter((v) => v.isPlayable).length;
+    statPlayable.querySelector(".ytpf-stat-value")!.textContent =
+      playable === videos.length ? String(playable) : `${playable}/${videos.length}`;
+    // Duration from individual videos (more accurate than metadata when appending)
+    const totalSec = videos.reduce((sum, v) => sum + (v.durationSeconds ?? 0), 0);
+    if (totalSec > 0) {
+      statDuration.querySelector(".ytpf-stat-value")!.textContent = formatDuration(totalSec);
+    }
+    // Total views (only when some videos have viewCountText)
+    const viewCounts = videos.map((v) => parseViewCount(v.viewCountText)).filter((n) => n >= 0);
+    if (viewCounts.length > 0) {
+      const total = viewCounts.reduce((a, b) => a + b, 0);
+      statTotalViews.querySelector(".ytpf-stat-value")!.textContent = formatNumber(total);
+      statTotalViews.style.display = "";
+    }
+  }
+
+  // Stats detail button + popup
+  const detailBtn = document.createElement("button");
+  detailBtn.className = "ytpf-stats-detail-btn";
+  detailBtn.textContent = t("statsDetail");
+
+  function countBy<T>(arr: T[], keyFn: (item: T) => string | null): [string, number][] {
+    const map = new Map<string, number>();
+    for (const item of arr) {
+      const key = keyFn(item);
+      if (key != null) map.set(key, (map.get(key) ?? 0) + 1);
+    }
+    return [...map.entries()].sort((a, b) => b[1] - a[1]);
+  }
+
+  function buildDetailPopup(): { backdrop: HTMLElement; popup: HTMLElement } {
+    const backdrop = document.createElement("div");
+    backdrop.className = "ytpf-detail-popup-backdrop";
+
+    const popup = document.createElement("div");
+    popup.className = "ytpf-detail-popup";
+
+    const title = document.createElement("h3");
+    title.textContent = `${data.metadata.title} — ${t("statsDetail")}`;
+    popup.appendChild(title);
+
+    // Duration stats
+    const durations = videos
+      .map((v) => v.durationSeconds)
+      .filter((d): d is number => d != null && d > 0)
+      .sort((a, b) => a - b);
+
+    if (durations.length > 0) {
+      const avg = Math.round(durations.reduce((a, b) => a + b, 0) / durations.length);
+      const median = durations[Math.floor(durations.length / 2)];
+
+      const section = document.createElement("div");
+      section.className = "ytpf-detail-section";
+      const kv = document.createElement("div");
+      kv.className = "ytpf-detail-kv";
+
+      function addKV(label: string, value: string) {
+        const item = document.createElement("span");
+        item.className = "ytpf-detail-kv-item";
+        item.textContent = `${label}: `;
+        const val = document.createElement("span");
+        val.className = "ytpf-detail-kv-value";
+        val.textContent = value;
+        item.appendChild(val);
+        kv.appendChild(item);
+      }
+
+      addKV(t("statsDetailDurationAvg"), formatDuration(avg));
+      addKV(t("statsDetailDurationMedian"), formatDuration(median));
+      section.appendChild(kv);
+      popup.appendChild(section);
+    }
+
+    // Channel ranking
+    const channelCounts = countBy(videos, (v) => v.channel.name);
+    if (channelCounts.length > 0) {
+      popup.appendChild(buildBarSection(
+        t("statsDetailChannelRank"),
+        channelCounts.slice(0, 20),
+        channelCounts[0][1],
+      ));
+    }
+
+    // Added-by ranking (collab)
+    if (isCollab) {
+      const addedByCounts = countBy(videos, (v) => v.addedBy);
+      if (addedByCounts.length > 0) {
+        popup.appendChild(buildBarSection(
+          t("statsDetailAddedByRank"),
+          addedByCounts,
+          addedByCounts[0][1],
+        ));
+      }
+    }
+
+    // Category breakdown (after detail fetch)
+    const categoryCounts = countBy(videos, (v) => v.category);
+    if (categoryCounts.length > 0) {
+      popup.appendChild(buildBarSection(
+        t("statsDetailCategoryBreak"),
+        categoryCounts,
+        categoryCounts[0][1],
+      ));
+    }
+
+    return { backdrop, popup };
+  }
+
+  function buildBarSection(title: string, entries: [string, number][], maxCount: number): HTMLElement {
+    const section = document.createElement("div");
+    section.className = "ytpf-detail-section";
+
+    const heading = document.createElement("div");
+    heading.className = "ytpf-detail-section-title";
+    heading.textContent = title;
+    section.appendChild(heading);
+
+    for (const [name, count] of entries) {
+      const row = document.createElement("div");
+      row.className = "ytpf-detail-bar-row";
+
+      const label = document.createElement("span");
+      label.className = "ytpf-detail-bar-label";
+      label.textContent = name;
+      label.title = name;
+
+      const track = document.createElement("div");
+      track.className = "ytpf-detail-bar-track";
+      const fill = document.createElement("div");
+      fill.className = "ytpf-detail-bar-fill";
+      fill.style.width = `${(count / maxCount) * 100}%`;
+      track.appendChild(fill);
+
+      const countSpan = document.createElement("span");
+      countSpan.className = "ytpf-detail-bar-count";
+      countSpan.textContent = String(count);
+
+      row.append(label, track, countSpan);
+      section.appendChild(row);
+    }
+
+    return section;
+  }
+
+  let detailPopupOpen = false;
+
+  detailBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (detailPopupOpen) return;
+    detailPopupOpen = true;
+
+    const { backdrop, popup } = buildDetailPopup();
+
+    function close() {
+      backdrop.remove();
+      popup.remove();
+      detailPopupOpen = false;
+    }
+
+    backdrop.addEventListener("click", close);
+    document.body.appendChild(backdrop);
+    document.body.appendChild(popup);
+  });
+
+  const statsSpacer = document.createElement("span");
+  statsSpacer.className = "ytpf-stats-spacer";
+
  // Fetch details button
  const fetchBtn = document.createElement("button");
  fetchBtn.className = "ytpf-fetch-views-btn";
@@ -396,8 +761,8 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
    } satisfies Message);
  });

-  header.append(titleSpan, metaSpan, fetchBtn, toggle);
-  wrapper.appendChild(header);
+  statsBar.append(statDuration, statChannels, statPlayable, statTotalViews, detailBtn, statsSpacer, fetchBtn);
+  wrapper.appendChild(statsBar);

  // Filter bar
  const filters = document.createElement("div");
@@ -410,12 +775,10 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
  titleInput.placeholder = t("filterTitle");
  filters.appendChild(titleInput);

-  // Channel tag input
  const channelNames = [...new Set(data.videos.map((v) => v.channel.name))].sort();
  const channelTagInput = createTagInput(t("filterChannel"), channelNames, () => applyFilters());
  filters.appendChild(channelTagInput.container);

-  // Category tag input (shown after detail fetch)
  let categoryTagInput: TagInput | null = null;
  const categoryFilterContainer = document.createElement("div");
  categoryFilterContainer.style.display = "none";
@@ -432,7 +795,6 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
    categoryFilterContainer.style.display = "";
  }

-  // Added-by tag input (collab only)
  let addedByTagInput: TagInput | null = null;
  if (isCollab) {
    const addedByNames = [...new Set(
@@ -446,6 +808,8 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
  filterCount.className = "ytpf-filter-count";
  filters.appendChild(filterCount);

+  filters.appendChild(menuAnchor);
+
  wrapper.appendChild(filters);

  // Body (table container)
@@ -455,19 +819,80 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
  const table = document.createElement("table");
  table.className = "ytpf-table";

+  // Sort state (declared early for buildThead → updateSortIndicators)
+  let sortKey: SortKey | null = null;
+  let sortDir: SortDir = "asc";
+
  // Thead
  const thead = document.createElement("thead");
  const headRow = document.createElement("tr");
-  const thElements: HTMLTableCellElement[] = [];
+  let thElements: HTMLTableCellElement[] = [];

-  for (const col of columns) {
-    const th = document.createElement("th");
-    th.className = `ytpf-th ytpf-th--sortable ${col.cls}`;
-    th.dataset.sortKey = col.key;
-    th.textContent = col.label;
-    thElements.push(th);
-    headRow.appendChild(th);
+  function attachResizeHandles() {
+    for (let i = 0; i < thElements.length - 1; i++) {
+      const handle = document.createElement("div");
+      handle.className = "ytpf-resize-handle";
+      thElements[i].appendChild(handle);
+
+      const idx = i;
+      handle.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handle.classList.add("ytpf-resize-handle--active");
+
+        const startX = e.clientX;
+        const tableWidth = table.getBoundingClientRect().width;
+        const startLeftPx = thElements[idx].getBoundingClientRect().width;
+        const startRightPx = thElements[idx + 1].getBoundingClientRect().width;
+        const minPx = 30;
+
+        function onMouseMove(ev: MouseEvent) {
+          const delta = ev.clientX - startX;
+          const newLeftPx = Math.max(minPx, startLeftPx + delta);
+          const newRightPx = Math.max(minPx, startRightPx - delta);
+          thElements[idx].style.width = `${(newLeftPx / tableWidth) * 100}%`;
+          thElements[idx + 1].style.width = `${(newRightPx / tableWidth) * 100}%`;
+        }
+
+        function onMouseUp() {
+          handle.classList.remove("ytpf-resize-handle--active");
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+
+          // Persist all visible column widths
+          const tw = table.getBoundingClientRect().width;
+          for (let j = 0; j < visibleColumns.length; j++) {
+            const col = visibleColumns[j];
+            const pct = (thElements[j].getBoundingClientRect().width / tw) * 100;
+            if (!columnPrefs[col.key]) columnPrefs[col.key] = { visible: true, width: col.defaultWidth };
+            columnPrefs[col.key].width = Math.round(pct * 10) / 10;
+          }
+          saveColumnPrefs(columnPrefs);
+        }
+
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+      });
+    }
  }
+
+  function buildThead() {
+    headRow.textContent = "";
+    thElements = [];
+    for (const col of visibleColumns) {
+      const th = document.createElement("th");
+      th.className = `ytpf-th ytpf-th--sortable ${col.cls}`;
+      th.dataset.sortKey = col.key;
+      th.textContent = col.label;
+      thElements.push(th);
+      headRow.appendChild(th);
+    }
+    applyColumnWidths(thElements, visibleColumns, columnPrefs);
+    attachResizeHandles();
+    updateSortIndicators();
+  }
+
+  buildThead();
  thead.appendChild(headRow);
  table.appendChild(thead);

@@ -491,11 +916,81 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
    });
  }

+  // Vote handler for collaborative playlists
+  const pendingVotes = new Map<string, { prevCount: number; prevStatus: "up" | "down" | null }>();
+
+  const voteHandler: VoteHandler | undefined = isCollab
+    ? (video, action) => {
+        if (!video.setVideoId || pendingVotes.has(video.setVideoId)) return;
+
+        // Save previous state for revert
+        const prevCount = video.voteCount ?? 0;
+        const prevStatus = video.voteStatus;
+        pendingVotes.set(video.setVideoId, { prevCount, prevStatus });
+
+        // Optimistic update
+        if (action === "up") {
+          if (video.voteStatus === "up") {
+            video.voteCount = prevCount - 1;
+            video.voteStatus = null;
+          } else {
+            video.voteCount = prevCount + 1;
+            video.voteStatus = "up";
+          }
+        } else {
+          if (video.voteStatus === "down") {
+            video.voteCount = prevCount + 1;
+            video.voteStatus = null;
+          } else {
+            video.voteCount = prevCount - 1;
+            video.voteStatus = "down";
+          }
+        }
+        renderRows();
+
+        // Dispatch to page script
+        document.dispatchEvent(
+          new CustomEvent("__yt_playlist_ext_vote", {
+            detail: JSON.stringify({
+              setVideoId: video.setVideoId,
+              action,
+            }),
+          }),
+        );
+      }
+    : undefined;
+
+  // Listen for vote results from page script
+  if (isCollab) {
+    document.addEventListener("__yt_playlist_ext_vote_result", ((e: Event) => {
+      const { setVideoId, success, newVoteStatus } = JSON.parse((e as CustomEvent).detail);
+      const prev = pendingVotes.get(setVideoId);
+      pendingVotes.delete(setVideoId);
+
+      if (!success && prev) {
+        // Revert optimistic update
+        const video = videos.find((v) => v.setVideoId === setVideoId);
+        if (video) {
+          video.voteCount = prev.prevCount;
+          video.voteStatus = prev.prevStatus;
+          renderRows();
+        }
+      } else if (success) {
+        // Confirm new status
+        const video = videos.find((v) => v.setVideoId === setVideoId);
+        if (video) {
+          video.voteStatus = (newVoteStatus as "up" | "down" | null) ?? null;
+          renderRows();
+        }
+      }
+    }) as EventListener);
+  }
+
  function renderRows() {
    const filtered = getFilteredVideos();
    tbody.textContent = "";
    for (const video of filtered) {
-      tbody.appendChild(buildRow(video, playlistId, isCollab, hasDetails));
+      tbody.appendChild(buildRow(video, playlistId, visibleColumns, voteHandler));
    }
    filterCount.textContent = filtered.length < videos.length
      ? `${filtered.length} / ${videos.length}`
@@ -509,10 +1004,7 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
  titleInput.addEventListener("input", applyFilters);

  renderRows();
-
-  // Sort state
-  let sortKey: SortKey | null = null;
-  let sortDir: SortDir = "asc";
+  updateStats();

  function updateSortIndicators() {
    for (const th of thElements) {
@@ -544,6 +1036,14 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
    renderRows();
  });

+  // Column visibility/width change handler
+  function onColumnsChanged() {
+    visibleColumns = getVisibleColumns(availableColumns, columnPrefs);
+    buildThead();
+    renderRows();
+    saveColumnPrefs(columnPrefs);
+  }
+
  table.appendChild(tbody);
  body.appendChild(table);
  wrapper.appendChild(body);
@@ -551,6 +1051,7 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
  // Toggle collapse
  header.addEventListener("click", () => {
    body.classList.toggle("ytpf-body--hidden");
+    statsBar.classList.toggle("ytpf-stats--hidden");
    filters.classList.toggle("ytpf-filters--hidden");
    toggle.classList.toggle("ytpf-toggle--collapsed");
  });
@@ -559,7 +1060,6 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
    videos.push(...newVideos);
    extractedCount += newVideos.length;

-    // Update filter candidates
    channelTagInput.addCandidates(newVideos.map((v) => v.channel.name));
    if (addedByTagInput) {
      addedByTagInput.addCandidates(
@@ -567,12 +1067,12 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
      );
    }

-    // Re-sort if a sort is active
    if (sortKey) {
      videos.sort(compareFn(sortKey, sortDir));
    }
    renderRows();
    updateHeader();
+    updateStats();
  }

  function setComplete(count: number) {
@@ -592,6 +1092,7 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
        v.viewCountText = u.viewCountText ?? v.viewCountText;
        v.publishedAt = u.publishedAt;
        v.category = u.category;
+        v.likeCount = u.likeCount ?? v.likeCount;
      }
    }

@@ -600,25 +1101,19 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
      detailsTotal = videos.filter((v) => v.isPlayable).length;
    }

-    // Add detail columns on first update if not present
    if (!hasDetails) {
      hasDetails = true;
-      columns = getAllColumns(true).filter((c) => (!c.collab || isCollab) && (!c.detail || hasDetails));
-      // Rebuild thead
-      headRow.textContent = "";
-      thElements.length = 0;
-      for (const col of columns) {
-        const th = document.createElement("th");
-        th.className = `ytpf-th ytpf-th--sortable ${col.cls}`;
-        th.dataset.sortKey = col.key;
-        th.textContent = col.label;
-        thElements.push(th);
-        headRow.appendChild(th);
+      availableColumns = getAllColumns(true).filter((c) => (!c.collab || isCollab) && (!c.detail || hasDetails));
+      visibleColumns = getVisibleColumns(availableColumns, columnPrefs);
+      buildThead();
+      // Rebuild menu if open
+      if (menuPanel) {
+        closeMenu();
+        menuPanel = buildMenu();
+        menuAnchor.appendChild(menuPanel);
      }
-      updateSortIndicators();
    }

-    // Update category filter
    ensureCategoryFilter();
    if (categoryTagInput) {
      categoryTagInput.addCandidates(
@@ -626,7 +1121,6 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
      );
    }

-    // Update progress
    if (detailsReceived < detailsTotal) {
      fetchBtn.textContent = `${t("fetchViewsProgress")} ${detailsReceived}/${detailsTotal}`;
    } else {
@@ -638,7 +1132,21 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
      videos.sort(compareFn(sortKey, sortDir));
    }
    renderRows();
+    updateStats();
  }

-  return { element: wrapper, appendVideos, setComplete, updateDetails };
+  function updateVoteStatuses(statuses: { setVideoId: string; voteStatus: "up" | "down" | null }[]) {
+    const map = new Map(statuses.map((s) => [s.setVideoId, s.voteStatus]));
+    let changed = false;
+    for (const v of videos) {
+      const status = map.get(v.setVideoId ?? "");
+      if (status !== undefined && v.voteStatus !== status) {
+        v.voteStatus = status;
+        changed = true;
+      }
+    }
+    if (changed) renderRows();
+  }
+
+  return { element: wrapper, appendVideos, setComplete, updateDetails, updateVoteStatuses };
 }
@@ -20,6 +20,54 @@
  let collabCache: Map<string, string> = new Map();
  let collabCachePlaylistId: string | null = null;

+  // Cache vote feedback tokens per setVideoId
+  interface VoteFeedback {
+    upToken: string | null;
+    upToggledToken: string | null;
+    downToken: string | null;
+    downToggledToken: string | null;
+    isUpToggled: boolean;
+    isDownToggled: boolean;
+  }
+  const voteFeedbackCache = new Map<string, VoteFeedback>();
+
+  function extractTokenFromButtonVM(model: any): string | null {
+    return model?.buttonViewModel?.onTap?.innertubeCommand
+      ?.feedbackEndpoint?.feedbackToken ?? null;
+  }
+
+  /** Extract vote feedback tokens from playlistVideoRenderer.engagementBar */
+  function extractVoteInfo(renderer: any): "up" | "down" | null {
+    const setVideoId = renderer.setVideoId;
+    if (!setVideoId) return null;
+
+    const actions = renderer.engagementBar?.engagementBarViewModel?.actions;
+    if (!actions) return null;
+
+    for (const action of actions) {
+      const voting = action.votingViewModel;
+      if (!voting) continue;
+
+      const up = voting.upvoteButton?.toggleButtonViewModel;
+      const down = voting.downvoteButton?.toggleButtonViewModel;
+
+      const info: VoteFeedback = {
+        upToken: extractTokenFromButtonVM(up?.defaultButtonViewModel),
+        upToggledToken: extractTokenFromButtonVM(up?.toggledButtonViewModel),
+        downToken: extractTokenFromButtonVM(down?.defaultButtonViewModel),
+        downToggledToken: extractTokenFromButtonVM(down?.toggledButtonViewModel),
+        isUpToggled: !!up?.isToggled,
+        isDownToggled: !!down?.isToggled,
+      };
+
+      if (info.upToken || info.downToken) {
+        voteFeedbackCache.set(setVideoId, info);
+        return info.isUpToggled ? "up" : info.isDownToggled ? "down" : null;
+      }
+    }
+    return null;
+  }
+
  function runExtraction() {
    if (!isPlaylistUrl()) return;
    const url = window.location.href;
@@ -128,6 +176,7 @@
    function mapRenderers(renderers: any[], startIndex: number) {
      return renderers.map((d, i) => {
        const { viewCountText } = parseVideoInfo(d.videoInfo);
+        const voteStatus = extractVoteInfo(d);
        return {
          videoId: d.videoId,
          title: textOf(d.title),
@@ -143,6 +192,8 @@
          category: null as string | null,
          voteCount: typeof d.voteCount === "number" ? d.voteCount : null,
          addedBy: resolveAddedBy(d, avatarToName),
+          setVideoId: d.setVideoId ?? null,
+          voteStatus,
        };
      });
    }
@@ -219,6 +270,7 @@
        break;
      }
    }
+
  }

  // --- helpers ---
@@ -528,4 +580,82 @@
      }),
    );
  }
+
+  // Vote handler: content script dispatches this event to vote on collaborative playlist videos
+  document.addEventListener("__yt_playlist_ext_vote", async (event: Event) => {
+    const { setVideoId, action } = JSON.parse(
+      (event as CustomEvent).detail,
+    );
+    const { cfg, baseContext } = getConfig();
+    const authHeaders = buildAuthHeaders(cfg, baseContext);
+
+    const cached = voteFeedbackCache.get(setVideoId);
+    if (!cached) {
+      console.warn(LOG, `No vote feedback tokens for ${setVideoId}`);
+      sendVoteResult(setVideoId, false, null);
+      return;
+    }
+
+    // Pick the correct feedbackToken based on action and current toggle state
+    let feedbackToken: string | null = null;
+    if (action === "up") {
+      feedbackToken = cached.isUpToggled ? cached.upToggledToken : cached.upToken;
+    } else {
+      feedbackToken = cached.isDownToggled ? cached.downToggledToken : cached.downToken;
+    }
+
+    if (!feedbackToken) {
+      console.warn(LOG, `No feedback token for ${action} on ${setVideoId}`);
+      sendVoteResult(setVideoId, false, null);
+      return;
+    }
+
+    try {
+      const res = await fetch(
+        "https://www.youtube.com/youtubei/v1/feedback?prettyPrint=false",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...authHeaders,
+          },
+          credentials: "same-origin",
+          body: JSON.stringify({
+            context: baseContext,
+            feedbackTokens: [feedbackToken],
+            isFeedbackTokenUnencrypted: false,
+          }),
+        },
+      );
+
+      const data = await res.json();
+      const success = res.ok && Array.isArray(data?.feedbackResponses);
+
+      if (success) {
+        // Update cached toggle state
+        if (action === "up") {
+          cached.isUpToggled = !cached.isUpToggled;
+          if (cached.isUpToggled) cached.isDownToggled = false;
+        } else {
+          cached.isDownToggled = !cached.isDownToggled;
+          if (cached.isDownToggled) cached.isUpToggled = false;
+        }
+      }
+
+      const newStatus = cached.isUpToggled ? "up" : cached.isDownToggled ? "down" : null;
+      console.log(LOG, `Vote ${action} on ${setVideoId}: ${success ? "OK" : "FAILED"} → ${newStatus}`);
+      sendVoteResult(setVideoId, success, newStatus);
+    } catch (e) {
+      console.error(LOG, "Vote failed:", e);
+      sendVoteResult(setVideoId, false, null);
+    }
+  });
+
+  function sendVoteResult(setVideoId: string, success: boolean, newVoteStatus: string | null) {
+    document.dispatchEvent(
+      new CustomEvent("__yt_playlist_ext_vote_result", {
+        detail: JSON.stringify({ setVideoId, success, newVoteStatus }),
+      }),
+    );
+  }
 })();
@@ -31,6 +31,12 @@ export interface PlaylistVideo {
  addedBy: string | null;
  /** Vote count / approvals (collaborative playlists only) */
  voteCount: number | null;
+  /** Playlist-specific video ID for operations (vote, reorder, etc.) */
+  setVideoId: string | null;
+  /** Current user's vote status on collaborative playlists */
+  voteStatus: "up" | "down" | null;
+  /** Like count from Data API */
+  likeCount: number | null;
 }

 export interface PlaylistMetadata {
@@ -55,6 +61,7 @@ export interface DetailUpdate {
  viewCountText: string | null;
  publishedAt: string | null;
  category: string | null;
+  likeCount: number | null;
 }

 export interface PlaylistData {
Author	SHA1	Message	Date
Hare	0c5dd2e375	Bump to 0.3.0	2026-04-09 18:34:35 +09:00
Hare	3635b58fed	Voteのサポート	2026-04-09 17:14:32 +09:00
Hare	980bc54f33	like数の表示	2026-04-09 05:22:07 +09:00
Hare	80d14f7a9d	詳細統計ポップアップの追加	2026-04-09 05:14:17 +09:00
Hare	87f5cbc75c	統計の追加	2026-04-09 05:03:26 +09:00
Hare	4c19c6491c	カラムの可視制御と幅調整	2026-04-09 04:57:27 +09:00