move notification to postbox column

// ==UserScript==
// @name        move notification to postbox column
// @namespace   724a
// @match       https://mstdn.nere9.help/*
// @grant       none
// @version     1.0
// @author      724a
// @description 通知を投稿の下に移動する
// @grant       GM_addStyle
// @run-at      document-idle
// @license     CC0
// ==/UserScript==

/*
Note

投稿欄のエリアと同じクラスを持つ要素を作り、そこに投稿欄と通知欄を移動する。CSSを微調整して違和感なくする。
投稿欄のエリアにある検索結果用の要素を通知の下に移動する。

通知欄の設定があふれるのでそこはサイズ基準を調整して対策。
この実装の場合は検索結果は両方を覆うことができるのでUXが良い。
*/

const custom_style = `
#move_drawer_pager{
  flex-direction: column;
}

#move_notification_column{
  flex-grow: 1;
  width: auto;
  padding-left: 0;
  padding-right: 0;

  container-type: size;
}

#move_drawer_orig_pager,
#move_drawer_innner{
  display: block;
}

#move_drawer_innner{
  position: relative;
  height: auto;
}

#move_search_result{
  position: absolute;
  z-index: 2;
}

#move_notification_column > div.column-header__wrapper > div.column-header__collapsible{
  max-height: 70cqh;
}

#move_notification_column > div.column-header__wrapper > div.column-header__collapsible.collapsed{
  max-height: 0;
}
.;
`

const selectors = {
  drawer: '.drawer',
  pager: '.drawer__pager',
  inner: '.drawer__inner:has(.compose-form)',
  search_result: '.drawer__inner:has(.search-results)',
  notification: '.column:has(div.column-header__wrapper > .column-header > button > i.fa-bell)'
}


// settings
const load_wait = 2; // タイムラインロードされるまで何秒待つか。

const main = () => {
  console.log('[Move notification]Started');

  GM_addStyle(custom_style);

  const drawer = document.querySelector(selectors.drawer);
  const orig_pager = document.querySelector(selectors.pager);
  const notification = document.querySelector(selectors.notification);
  const inner = document.querySelector(selectors.inner);
  const search_result = document.querySelector(selectors.search_result);

  if(!drawer || !orig_pager || !notification || !inner || !search_result){
    console.error("[Move notification]Can't find elements");
    return;
  }

  const new_pager = document.createElement('div');
  drawer.append(new_pager);
  new_pager.id = "move_drawer_pager";
  new_pager.classList.add(selectors.pager.replace('.', ''));

  orig_pager.classList.remove(selectors.pager.replace('.', ''));
  orig_pager.id = 'move_drawer_orig_pager';

  notification.id = 'move_notification_column';
  inner.id = 'move_drawer_innner'
  search_result.id = 'move_search_result'

  new_pager.append(orig_pager);
  new_pager.append(notification);
  new_pager.append(search_result);
}


setTimeout(main, load_wait * 1000);