統計の追加

src/content/ui/i18n.ts

@@ -17,7 +17,13 @@ type MessageKey =
   | "headerLoading"
   | "fetchViews"
   | "fetchViewsProgress"
-  | "fetchViewsDone";
+  | "fetchViewsDone"
+  | "colSettings"
+  | "colSettingsReset"
+  | "statsDuration"
+  | "statsChannels"
+  | "statsPlayable"
+  | "statsTotalViews";
 
 const messages: Record<string, Record<MessageKey, string>> = {
   ja: {
@@ -40,6 +46,12 @@ const messages: Record<string, Record<MessageKey, string>> = {
     fetchViews: "再生数を取得",
     fetchViewsProgress: "取得中…",
     fetchViewsDone: "取得完了",
+    colSettings: "表示",
+    colSettingsReset: "リセット",
+    statsDuration: "合計時間",
+    statsChannels: "チャンネル",
+    statsPlayable: "再生可能",
+    statsTotalViews: "総再生数",
   },
   en: {
     colIndex: "#",
@@ -61,6 +73,12 @@ const messages: Record<string, Record<MessageKey, string>> = {
     fetchViews: "Fetch views",
     fetchViewsProgress: "Fetching…",
     fetchViewsDone: "Done",
+    colSettings: "View",
+    colSettingsReset: "Reset",
+    statsDuration: "Total",
+    statsChannels: "Channels",
+    statsPlayable: "Playable",
+    statsTotalViews: "Total views",
   },
 };
 

src/content/ui/lifecycle.ts

@@ -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;
 

src/content/ui/styles.ts

@@ -49,6 +49,46 @@ 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-spacer {
+  flex: 1;
+}
+
 .ytpf-filters {
   display: flex;
   align-items: flex-start;
@@ -242,6 +282,7 @@ html[dark] .ytpf-filter-count {
 }
 
 .ytpf-th {
+  position: relative;
   text-align: left;
   padding: 8px 12px;
   font-weight: 500;
@@ -342,6 +383,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;
 }

src/content/ui/table-renderer.ts

@@ -10,24 +10,65 @@ 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("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[];
@@ -243,92 +284,75 @@ function compareFn(key: SortKey, dir: SortDir) {
   };
 }
 
+function buildCell(video: PlaylistVideo, col: Column, playlistId: string): 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 "published":
+      td.textContent = video.publishedAt ?? "--";
+      break;
+    case "category":
+      td.textContent = video.category ?? "--";
+      break;
+    case "addedBy":
+      td.textContent = video.addedBy ?? "--";
+      break;
+    case "votes":
+      td.textContent = video.voteCount != null ? String(video.voteCount) : "--";
+      break;
+  }
+
+  return td;
+}
+
 function buildRow(
   video: PlaylistVideo,
   playlistId: string,
-  isCollab: boolean,
-  hasDetails: boolean,
+  visibleColumns: Column[],
 ): 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));
   }
 
   return tr;
@@ -341,12 +365,14 @@ export interface PlaylistTableHandle {
   updateDetails(updates: DetailUpdate[]): 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 +393,155 @@ 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 = "";
+    }
+  }
+
+  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 +561,8 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
     } satisfies Message);
   });
 
-  header.append(titleSpan, metaSpan, fetchBtn, toggle);
-  wrapper.appendChild(header);
+  statsBar.append(statDuration, statChannels, statPlayable, statTotalViews, statsSpacer, fetchBtn);
+  wrapper.appendChild(statsBar);
 
   // Filter bar
   const filters = document.createElement("div");
@@ -410,12 +575,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 +595,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 +608,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 +619,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);
 
@@ -495,7 +720,7 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
     const filtered = getFilteredVideos();
     tbody.textContent = "";
     for (const video of filtered) {
-      tbody.appendChild(buildRow(video, playlistId, isCollab, hasDetails));
+      tbody.appendChild(buildRow(video, playlistId, visibleColumns));
     }
     filterCount.textContent = filtered.length < videos.length
       ? `${filtered.length} / ${videos.length}`
@@ -509,10 +734,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 +766,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 +781,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 +790,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 +797,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) {
@@ -600,25 +830,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 +850,6 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
       );
     }
 
-    // Update progress
     if (detailsReceived < detailsTotal) {
       fetchBtn.textContent = `${t("fetchViewsProgress")} ${detailsReceived}/${detailsTotal}`;
     } else {
@@ -638,6 +861,7 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
       videos.sort(compareFn(sortKey, sortDir));
     }
     renderRows();
+    updateStats();
   }
 
   return { element: wrapper, appendVideos, setComplete, updateDetails };