refactor: pagination/date-separated-list系処理を良い感じに？

[tamaina]

Fix #6001

#8850 のつづき

What

「うまく動くように」するようにしたらなんか大変なことになった

• pagination/date-separated-list系処理でreversed: trueのとき、配列を反転するのではなくflexでcolumn-reverseで並べ替えるように
• pagination/date-separated-list系処理でreversedのときスクロールをうまい具合に処理するように
  • 初回読み込みと「もっと見る」の時に「もっと見る」が連続して動作しないように
  • 「もっと見る」でアイテムが追加されたとき、スクロールが動かないように
  • もっと見るでアイテムが追加されたときにmoveトランジションが作動しないように(deny-move-transition系処理)
• scripts/scroll.tsを書き換えてみた
  • 主にisBottom( => isBottomVisible)でデフォルトUIでコンテンツ高さ < ウィジェット高さの場合でもうまく動くように
  • 不要っぽい処理を消したりなどした
• date-separated-listで、アイテムが削除したときアニメーションするように(アニメーション有効時)
• pagination.vueで先頭かどうかの検出はIntersectionObserverを使用するように
• pagination/date-separated-list系処理で使う「エンティティ共通」の型 (MisskeyEntity)を追加
• pagination.vueのqueue
  • 順番をitemsと揃える
  • キューをitemsに移行するとき一つずつ処理せず配列ごと処理するように

Additional info (optional)

p1.a9z.devに適用中

[syuilo]

p1.a9z.dev訪れるとやばいことになる
タイムラインが横向きにレンダリングされて無限にTLが遡られていく

[tamaina]

flexのcolumn-reverseが効いていないのだろうけどなんでそうなるかがわからない(

[tamaina]

デフォルト表示でウィジェットがコンテンツより長くてスクロールになる場合にisBottomの評価ができなくなる

以下解決策の案

1. XListで表示されている最新の投稿にIntersectionObserverを仕込んでisBottom/onScrollBottomの代用にする
2. ウィジェットをstickyではなく固定窓にしてスクロールを独立させちゃう

[tamaina]

タイムラインが横向きにレンダリングされて無限にTLが遡られていく

Chrome OS 96で再現した

[tamaina]

data-derection/data-reversedがなぜか付加されないらしい

[tamaina]

なるほどアニメーションオフだと付加されないということだった

[tamaina]

なおった

[tamaina]

message-roomがなんか変なことになってたのを修正

[tamaina]

もっと見るでアイテムが追加されたときにmoveトランジションが作動しないように(deny-move-transition系処理)

修正できていない場合がある…

[tamaina]

コンフリクト解消

[tamaina]

(何か間違っている気がするけど元のコードがこうだったので元のコードに合わせた)

[codecov]

Codecov Report

Merging #8209 (86f13a4) into develop (b52fd72) will decrease coverage by 0.00%.
The diff coverage is n/a.

@@             Coverage Diff             @@
##           develop    #8209      +/-   ##
===========================================
- Coverage    22.32%   22.31%   -0.01%     
===========================================
  Files          724      724              
  Lines        67154    67170      +16     
  Branches      2171     2171              
===========================================
  Hits         14991    14991              
- Misses       52163    52179      +16     

Impacted Files	Coverage Δ
packages/backend/src/server/api/endpoints/stats.ts	0.00% <0.00%> (ø)
...ckages/backend/src/server/NodeinfoServerService.ts	0.00% <0.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[tamaina]

deny-move-transitionあたりの動作が間違ってそう

[syuilo]

今wip?

[tamaina]

超wip

[tamaina]

どうせならCSS Moduleにしようと

[tamaina]

CSS Module化できた(はず)

[syuilo]

🙏🏻