VueUse Issue Watcher

VueUse のコントリビュート先 issue を探すための自分用ウォッチャー。 「AIに都度探させると再現性がない」問題への対策として、絞り込み条件をプリセットとしてコードに資産化し、固定のビューで眺め直せるようにしたもの。

起動

pnpm install
pnpm dev   # → http://localhost:5173/

バックエンドなし。ブラウザから GitHub REST API を直接叩く。

使い方

• プリセット（関心軸）: どの切り口で見るかをタブ化（src/presets.ts）
  • PR歓迎 — pr welcome / direction: approved ラベル（メンテナ方針明示済み）
  • バグ / 放置半年+ / 未応答 / good first issue / すべて
• 未着手のみトグル（状態軸）: -linked:pr -label:"has pr" no:assignee を任意のプリセットに重ねる。プリセットと分離してあるのは、OFFにすれば「PRはあるが停滞している issue」（再訪候補）も見えるようにするため。関心軸と状態軸をプリセットに混ぜて焼き込まない
• 追加条件: GitHub 検索構文をそのまま入力して絞り込み（例: label:directive, useFetch in:title）
• 一覧: NEW / 更新バッジ（既読状態は localStorage）、ラベル・コメント数・リアクション数・作成/更新日
• 詳細ペイン: 本文とコメントを表示。メンテナ（OWNER / MEMBER / COLLABORATOR）のコメントにはバッジ付き。開いた時点で既読になる
• 気になるリスト: 一覧の☆・詳細の「☆ 気になる」でストック（IndexedDBに永続化）。「★ 気になる」タブで一覧表示し、詳細ペインで選定メモを付けられる（見送り理由・再訪条件など）

GitHub PAT

未設定でも動く（未認証: search 10回/分・core 60回/時）。ヘッダ右上に PAT を入れると search 30回/分・core 5,000回/時に拡大。public リポジトリの読み取りだけなのでスコープ不要（fine-grained なら Public repositories read-only でよい）。PAT は localStorage にのみ保存される。

構成

src/
├── api/github.ts   # REST API クライアント（search / issue詳細 / コメント、rate limit表示）
├── presets.ts      # 検索プリセット定義（ここを育てる）
├── store.ts        # PAT・既読管理（useLocalStorage）・気になるリスト（useIDBKeyval）
├── utils.ts        # 相対時刻・ラベル色・メンテナ判定
├── App.vue         # レイアウト・検索状態
└── components/
    ├── IssueList.vue
    └── IssueDetail.vue

• Vue 3 + Vite + TypeScript + @vueuse/core + @vueuse/integrations（useLocalStorage / watchDebounced / useIDBKeyval をドッグフーディング）
• useIDBKeyval は { shallow: true } 必須。deep な ref だと配列要素が reactive proxy になり、IndexedDB への structured clone が DataCloneError で失敗する（proxy は clone 不可。VueUse 本体の「ref() 禁止 → shallowRef」規約と同じ発想がここでも正解）
• issue 本文・コメントは application/vnd.github.html+json で取得した GitHub 側サニタイズ済み HTML をそのまま表示（Markdown レンダラ不要）

既知の制限

• Search API は結果最大 1,000 件まで（「すべて」で全件は辿れない）
• -linked:pr は Development 欄で正式にリンクされた PR しか見ない。ラベル運用の has pr は別途 -label:"has pr" で除外している
• 「メンテナが方針を明示したか」のラベルが無い issue は機械判定不可。一覧で候補を絞り、詳細ペインのメンテナバッジ付きコメントで人間が判断する設計