feat: enhance button component with icon-only variant and refactor class name composition

docs: add design document for List Focus Scope Abstraction & Master-Detail Migration

refactor: update package.json scripts to use pnpm for admin app

chore: remove turbo.json configuration and related dependencies from pnpm-lock.yaml
Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

.gitignore

@@ -11,4 +11,3 @@ stats.html
 
 /src/views/dev
 g.d.ts
-.turbo/

CLAUDE.md

@@ -4,11 +4,11 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-MX Admin is the dashboard for MX Space, a personal blog management system. The repo is a pnpm + turbo monorepo whose only active app is `apps/admin` — a React 19 SPA built with Base UI primitives, React Router (HashRouter), TanStack Query, Sonner, UnoCSS, and a Tailwind v4 layer. Despite the repo name `admin-vue3`, the Vue codebase has been retired; React is the sole runtime.
+MX Admin is the dashboard for MX Space, a personal blog management system. The repo is a pnpm workspace whose only active app is `apps/admin` — a React 19 SPA built with Base UI primitives, React Router (HashRouter), TanStack Query, Sonner, UnoCSS, and a Tailwind v4 layer. Despite the repo name `admin-vue3`, the Vue codebase has been retired; React is the sole runtime.
 
 ## Development Commands
 
-All scripts go through turbo at the repo root:
+Root scripts proxy to `apps/admin` via `pnpm -C apps/admin <task>`:
 
 ```bash
 pnpm install          # Install dependencies
@@ -106,7 +106,6 @@ New admin views must follow the master-detail / content-layout convention. See:
 - `apps/admin/uno.config.ts` — UnoCSS breakpoints (`phone:`, `tablet:`, `desktop:`) and theme colors (if present)
 - `apps/admin/src/theme.ts` — CSS token installation for the shell
 - `apps/admin/src/index.css` — global stylesheet + Tailwind layer
-- `turbo.json` — task pipeline (build/dev/lint/typecheck)
 
 ## Related Projects
 

apps/admin/src/features/_shared/components/content-list-item.tsx

@@ -10,7 +10,8 @@ import type {
 } from 'react'
 
 import { useI18n } from '~/i18n'
-import { ContextMenuTrigger, showContextMenu } from '~/ui/overlay/context-menu'
+import { ListRow } from '~/ui/list-actions'
+import { showContextMenu } from '~/ui/overlay/context-menu'
 import { Checkbox } from '~/ui/primitives/checkbox'
 import { cn } from '~/utils/cn'
 
@@ -19,17 +20,16 @@ export type ContentEntrySelectMode = 'single' | 'toggle' | 'range'
 export interface ContentEntryListItemProps {
   checkboxLabel?: string
   className?: string
-  /** Stable id of the underlying entity. Exposed on the row as `data-id`. */
+  /** Stable id of the underlying entity. */
   dataId?: string
   editTitle: string
   editTo: string
   externalHref: string
+  /** Visual leading slot rendered inline with the title (icon, pin, etc.). */
   leading?: ReactNode
   menuItems: ContextMenuItem[] | (() => ContextMenuItem[])
   meta?: ReactNode
-  /** Called when the row body is clicked (away from links / buttons / checkbox). */
   onSelect?: (mode: ContentEntrySelectMode) => void
-  /** Called when the checkbox itself is toggled. */
   onSelectedChange?: (checked: boolean) => void
   openTitle: string
   selected?: boolean
@@ -38,21 +38,19 @@ export interface ContentEntryListItemProps {
   titleTo: string
 }
 
-const INTERACTIVE_SELECTOR =
-  'a[href], button, input, [role="menuitem"], [role="checkbox"]'
-
 /**
  * Two-line list item shared by `/posts` and `/notes`.
  *
  *   ☐  [leading]  Title text                 [status]   ✎  ↗  ⋯
  *       category · tags · 👁 N · ♡ N                       relative time
  *
- * The whole row is wrapped in `<ContextMenuTrigger>`; right-clicking
- * anywhere on the row opens the menu and the row receives
- * `data-popup-open=""` so it can highlight via the `data-[popup-open]:`
- * variant. Left-clicking the row body (outside links, buttons, checkbox)
- * fires `onSelect` with a modifier-aware mode so consumers can do
- * single / toggle (`$mod`+click) / range (`Shift`+click) selection.
+ * Delegates row keyboard/selection/context-menu plumbing to `ListRow`. Owns the
+ * checkbox column + title link + status badge + meta line + edit/external/more
+ * action button trio.
+ *
+ * Note: `props.leading` is the *visual* leading slot rendered next to the title
+ * (e.g. a pin icon). It is distinct from `ListRow.leading`, which holds the
+ * selection-column checkbox.
  */
 export function ContentEntryListItem(props: ContentEntryListItemProps) {
   const { t } = useI18n()
@@ -68,103 +66,82 @@ export function ContentEntryListItem(props: ContentEntryListItemProps) {
     showContextMenu(resolved)
   }
 
-  const onRowClick = (event: ReactMouseEvent<HTMLElement>) => {
-    if (event.defaultPrevented) return
-    if (!props.onSelect) return
-    const target = event.target as Element | null
-    // Skip clicks on links, buttons, inputs, the checkbox — those interactive
-    // descendants do their own thing.
-    if (target?.closest(INTERACTIVE_SELECTOR)) return
-    const mode: ContentEntrySelectMode = event.shiftKey
-      ? 'range'
-      : event.metaKey || event.ctrlKey
-        ? 'toggle'
-        : 'single'
-    props.onSelect(mode)
-  }
-
   return (
-    <ContextMenuTrigger items={props.menuItems}>
-      <article
-        className={cn(
-          'group grid cursor-default gap-x-3 gap-y-1.5 px-4 py-3',
-          selectable
-            ? 'grid-cols-[auto_minmax(0,1fr)_auto]'
-            : 'grid-cols-[minmax(0,1fr)_auto]',
-          // Vercel/Geist convention: selection lives on the neutral scale,
-          // brand color stays out of row backgrounds. Hover < popup-open ≈
-          // selected < selected+hover < selected+popup-open.
-          'hover:bg-neutral-50 dark:hover:bg-neutral-900/50',
-          'data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800/60',
-          'data-selected:bg-neutral-100 dark:data-selected:bg-neutral-800/60',
-          'data-selected:hover:bg-neutral-200/60 dark:data-selected:hover:bg-neutral-800/80',
-          'data-selected:data-popup-open:bg-neutral-200 dark:data-selected:data-popup-open:bg-neutral-800',
-          // Keyboard cursor (J/K/Arrow). `:focus-visible` only fires on
-          // keyboard focus, so mouse clicks don't draw the ring.
-          'outline-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-400 dark:focus-visible:outline-neutral-500',
-          props.className,
-        )}
-        data-id={props.dataId}
-        data-scope-item="row"
-        data-selected={props.selected ? '' : undefined}
-        onClick={onRowClick}
-        tabIndex={-1}
-      >
-        {selectable ? (
+    <ListRow
+      as="article"
+      className={cn(
+        'group grid cursor-default gap-x-3 gap-y-1.5 px-4 py-3',
+        selectable
+          ? 'grid-cols-[auto_minmax(0,1fr)_auto]'
+          : 'grid-cols-[minmax(0,1fr)_auto]',
+        'hover:bg-neutral-50 dark:hover:bg-neutral-900/50',
+        'data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800/60',
+        'data-selected:bg-neutral-100 dark:data-selected:bg-neutral-800/60',
+        'data-selected:hover:bg-neutral-200/60 dark:data-selected:hover:bg-neutral-800/80',
+        'data-selected:data-popup-open:bg-neutral-200 dark:data-selected:data-popup-open:bg-neutral-800',
+        'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-400 dark:focus-visible:outline-neutral-500',
+        props.className,
+      )}
+      dataId={props.dataId ?? ''}
+      leading={
+        selectable ? (
           <Checkbox
             aria-label={props.checkboxLabel}
             checked={props.selected ?? false}
             className="mt-0.5"
             onCheckedChange={handleSelectedChange}
           />
-        ) : null}
-
-        <div className="min-w-0">
-          <div className="flex min-w-0 items-center gap-2">
-            {props.leading}
-            <Link
-              className="outline-hidden min-w-0 truncate text-sm font-medium text-neutral-950 hover:text-neutral-600 focus-visible:ring-2 focus-visible:ring-[var(--color-primary-shallow)] dark:text-neutral-50 dark:hover:text-neutral-300"
-              to={props.titleTo}
-            >
-              {props.title}
-            </Link>
-            {props.status}
-          </div>
-          {props.meta ? (
-            <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
-              {props.meta}
-            </div>
-          ) : null}
+        ) : null
+      }
+      menuItems={props.menuItems}
+      onSelect={props.onSelect}
+      selected={props.selected}
+    >
+      <div className="min-w-0">
+        <div className="flex min-w-0 items-center gap-2">
+          {props.leading}
+          <Link
+            className="outline-hidden min-w-0 truncate text-sm font-medium text-neutral-950 hover:text-neutral-600 focus-visible:ring-2 focus-visible:ring-[var(--color-primary-shallow)] dark:text-neutral-50 dark:hover:text-neutral-300"
+            to={props.titleTo}
+          >
+            {props.title}
+          </Link>
+          {props.status}
         </div>
+        {props.meta ? (
+          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
+            {props.meta}
+          </div>
+        ) : null}
+      </div>
 
-        <div
-          className={cn(
-            'row-start-1 flex shrink-0 items-center gap-0.5 self-start text-neutral-300',
-            'group-hover:text-neutral-600 group-data-[popup-open]:text-neutral-600 group-data-[selected]:text-neutral-600',
-            'dark:text-neutral-700 dark:group-hover:text-neutral-300 dark:group-data-[popup-open]:text-neutral-300 dark:group-data-[selected]:text-neutral-300',
-            selectable ? 'col-start-3' : 'col-start-2',
-          )}
+      <div
+        className={cn(
+          'row-start-1 flex shrink-0 items-center gap-0.5 self-start text-neutral-300',
+          'group-hover:text-neutral-600 group-data-[popup-open]:text-neutral-600 group-data-[selected]:text-neutral-600',
+          'dark:text-neutral-700 dark:group-hover:text-neutral-300 dark:group-data-[popup-open]:text-neutral-300 dark:group-data-[selected]:text-neutral-300',
+          selectable ? 'col-start-3' : 'col-start-2',
+        )}
+      >
+        <ActionLink title={props.editTitle} to={props.editTo}>
+          <Pencil aria-hidden="true" className="size-4" />
+        </ActionLink>
+        <ActionLink
+          href={props.externalHref}
+          rel="noreferrer"
+          target="_blank"
+          title={props.openTitle}
         >
-          <ActionLink title={props.editTitle} to={props.editTo}>
-            <Pencil aria-hidden="true" className="size-4" />
-          </ActionLink>
-          <ActionLink
-            href={props.externalHref}
-            rel="noreferrer"
-            target="_blank"
-            title={props.openTitle}
-          >
-            <ExternalLink aria-hidden="true" className="size-4" />
-          </ActionLink>
-          <ActionButton
-            onClick={onMoreClick}
-            title={t('shared.contentListItem.moreActions')}
-          >
-            <MoreHorizontal aria-hidden="true" className="size-4" />
-          </ActionButton>
-        </div>
-      </article>
-    </ContextMenuTrigger>
+          <ExternalLink aria-hidden="true" className="size-4" />
+        </ActionLink>
+        <ActionButton
+          onClick={onMoreClick}
+          title={t('shared.contentListItem.moreActions')}
+        >
+          <MoreHorizontal aria-hidden="true" className="size-4" />
+        </ActionButton>
+      </div>
+    </ListRow>
   )
 }
 

apps/admin/src/features/comments/components/CommentListItem.tsx

@@ -1,43 +1,92 @@
+import { CheckCheck, ShieldAlert, Trash2 } from 'lucide-react'
 import type { CommentModel } from '~/models/comment'
+import type { ListAction, ListRowSelectMode } from '~/ui/list-actions'
+import type { ContextMenuItem } from '~/ui/overlay/context-menu'
 
 import { useI18n } from '~/i18n'
+import { CommentState } from '~/models/comment'
+import { ListRow } from '~/ui/list-actions'
 import { Checkbox } from '~/ui/primitives/checkbox'
 import { cn } from '~/utils/cn'
 
 import { formatCommentDate } from '../utils/comments'
 import { Avatar } from './CommentPrimitives'
 
 export function CommentListItem(props: {
+  actions: ReadonlyArray<ListAction<CommentModel>>
   checked: boolean
   comment: CommentModel
+  currentFilter: CommentState
+  isDetailTarget: boolean
   onCheck: (id: string, checked: boolean) => void
-  onSelect: () => void
+  onMarkJunk: (id: string) => void
+  onMarkRead: (id: string) => void
+  onSelect: (mode: ListRowSelectMode) => void
   selected: boolean
 }) {
   const { t } = useI18n()
   const commentText = props.comment.isDeleted
     ? t('comments.deletedPlaceholder')
     : props.comment.text
 
+  const menuItems = (): ContextMenuItem[] => {
+    const items: ContextMenuItem[] = []
+    if (props.currentFilter !== CommentState.Read) {
+      items.push({
+        icon: CheckCheck,
+        key: 'mark-read',
+        label: t('comments.action.markRead'),
+        onClick: () => props.onMarkRead(props.comment.id),
+      })
+    }
+    if (props.currentFilter !== CommentState.Junk) {
+      items.push({
+        icon: ShieldAlert,
+        key: 'mark-junk',
+        label: t('comments.action.markJunk'),
+        onClick: () => props.onMarkJunk(props.comment.id),
+      })
+    }
+    if (items.length > 0) items.push({ key: 'sep-1', type: 'divider' })
+    items.push({
+      danger: true,
+      icon: Trash2,
+      key: 'delete',
+      label: t('common.delete'),
+      onClick: () =>
+        props.actions.find((a) => a.key === 'delete')?.run([props.comment]),
+    })
+    return items
+  }
+
   return (
-    <article
+    <ListRow
+      as="article"
+      ariaCurrent={props.isDetailTarget}
       className={cn(
-        'flex cursor-pointer gap-3 border-b border-neutral-100 px-4 py-3 transition-colors last:border-b-0 dark:border-neutral-900',
-        props.selected
-          ? 'bg-neutral-100 dark:bg-neutral-900'
-          : props.checked
-            ? 'bg-neutral-50 dark:bg-neutral-900/60'
-            : 'hover:bg-neutral-50 dark:hover:bg-neutral-900/40',
+        'group grid cursor-default grid-cols-[auto_auto_minmax(0,1fr)] gap-3 border-b border-neutral-100 px-4 py-3 last:border-b-0 dark:border-neutral-900',
+        'hover:bg-neutral-50 dark:hover:bg-neutral-900/40',
+        'data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800/60',
+        'data-selected:bg-neutral-100 dark:data-selected:bg-neutral-900',
+        'data-selected:hover:bg-neutral-200/60 dark:data-selected:hover:bg-neutral-800/80',
+        'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-400 dark:focus-visible:outline-neutral-500',
       )}
-      onClick={props.onSelect}
+      dataId={props.comment.id}
+      leading={
+        <Checkbox
+          aria-label={t('comments.list.selectComment')}
+          checked={props.checked}
+          className="mt-1"
+          onCheckedChange={(checked) =>
+            props.onCheck(props.comment.id, checked)
+          }
+        />
+      }
+      menuItems={menuItems}
+      onSelect={props.onSelect}
+      role="row"
+      selected={props.selected}
     >
-      <Checkbox
-        aria-label={t('comments.list.selectComment')}
-        checked={props.checked}
-        className="mt-1 shrink-0"
-        onCheckedChange={(checked) => props.onCheck(props.comment.id, checked)}
-        onClick={(event) => event.stopPropagation()}
-      />
       <Avatar comment={props.comment} size="sm" />
       <div className="min-w-0 flex-1">
         <div className="flex items-baseline gap-2">
@@ -65,6 +114,6 @@ export function CommentListItem(props: {
           </span>
         ) : null}
       </div>
-    </article>
+    </ListRow>
   )
 }