✨ 一覧のドラッグ&ドロップ並べ替え(ピン/非ピングループ独立)

[uzuraDev]

何を

サイドバー一覧のスニペットをドラッグ&ドロップで並べ替えられるようにしました。

ピン留めグループと非ピングループは独立して扱われます: 同じグループの項目の上でだけドロップを受け付けるため、ドラッグでグループを跨ぐことはできません(ピン状態はピンボタンでのみ切り替え)。

Workers 版 (html-vault-worker#2) と同じ機能の移植で、同 #3 のスナップバック(ドロップ解放時に残像が元の位置へ飛んで戻るアニメーション)抑止も最初から含んでいます。

なぜ

更新日時順の自動並びだけでは、よく使うスニペットを意図した順に並べられないため。

変更内容

• server.js
  • メタデータに表示順 order を追加。ソートは「ピン留め先頭 → グループ内は order 昇順(未設定は -updated フォールバック)」に変更
  • フォールバックにより、一度も並べ替えていなければ従来どおり更新日時降順のまま。並べ替え後に作成された新規スニペットは自動的にグループ先頭(新しい順)に浮きます
  • PUT /api/snippets/order を追加(セッション+CSRF必須)。表示順の完全なID列を受け取り各スニペットの order に位置を保存。ID形式(16進32文字)を全件バリデーション
  • ※ Express はルート登録順でマッチするため、/api/snippets/:id (PUT) より先に登録
• public/index.template.html
  • .item に HTML5 Drag & Drop を実装。ドラッグ中は DOM を直接動かしてライブプレビューし、dragend で確定順を保存
  • dragover で「ドラッグ元とドロップ先の pinned が一致するときだけ」受け入れることでグループ独立を保証
  • ドラッグ中は document レベルで dragover/drop を常に受け入れ、どこで離してもドロップ成立扱いにしてスナップバックアニメーションを抑止
  • 検索結果の表示中はドラッグ無効。保存失敗時はサーバー側の並びに復元

i18n

新規の表示文言はありません(既存キーのみ使用)。npm run build:i18n で未定義プレースホルダ警告が出ないことを確認済み。

確認

ローカル (Node) で確認済み: ログイン → 保存 → プレビュー → 削除 → 再起動

• 非ピン/ピン各グループ内のドラッグ並べ替えと永続化(サーバー再起動後も維持)
• 非ピン項目をピングループへドラッグ → 境界で停止し侵入しない
• 並べ替え後の新規作成 → 非ピングループ先頭に出現。検索結果も同じ表示順
• order API のバリデーション(不正IDで400、CSRF無しで403)
• セキュリティ機構(CSRF / sandbox プレビュー / レート制限 / サーバー採番ID)は変更なし。依存追加なし

制限

• HTML5 Drag & Drop のためタッチ端末では並べ替え不可(ボタン操作は従来どおり)

🤖 Generated with Claude Code