// ==UserScript==
// @name         Bilibili哔哩哔哩B站主页极简
// @namespace    http://tampermonkey.net/
// @version      1.0.3
// @description  只保留导航和B站首页的前6个（可自行更改）动态卡片，每个视频卡片调整宽度即可调整大小，简单实用。
// @author       极简实用
// @match        https://www.bilibili.com/*
// @grant        none
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// @license      AGPL
// @downloadURL none
// ==/UserScript==

(function($) {
    'use strict';

    // 检查是否是B站首页
    if (!/^\/(\?|$)/.test(window.location.pathname)) {
        return; // 如果不是首页，则不执行后续代码
    }

    // 确保DOM完全加载后再执行
    $(document).ready(function() {
        // 动态添加CSS
        const styleTag = `
            .header-history-video {
                display: flex;
                padding: 10px 20px;
                transition: background-color .3s;
            }

            .header-dynamic-list-item {
                padding: 12px 20px;
                display: flex;
                flex-direction: column;
                cursor: pointer;
                transition: .3s;
            }

            .header-dynamic-container {
                display: flex;
                flex-direction: row;
            }

            .dynamic-name-line {
                display: inline-block;
                font-size: 13px;
                color: var(--text2);
            }

            .header-dynamic-avatar {
                position: relative;
                display: block;
                width: 38px;
                height: 38px;
                border: 2px solid var(--graph_bg_thick);
                border-radius: 50%;
            }

            .header-history-video__image .v-img {
                position: relative;
                flex-shrink: 0;
                margin-right: 10px;
                width: 128px;
                height: 72px;
                border-radius: 4px;
            }
        `;
        $('<style>').text(styleTag).appendTo('head');

        // 直接通过选择器只获取所需的元素，避免多次查询
        const feedCards = $('div.feed-card').slice(0, 6);// 调整数字可更改显示数量
        const popoverWraps = $('li.v-popover-wrap').not('.header-avatar-wrap');

        // 创建一个新的容器来存放feed-cards 和 li.v-popover-wrap
        const container = $('<div class="header-dynamic-container"></div>').css({
            'display': 'flex',
            'flex-direction': 'column',
            'align-items': 'center',
            'padding': '20px'
        });

        // 创建并设置所有要添加的元素的样式
        const cardsContainer = $('<div></div>').css({
            'display': 'flex',
            'flex-wrap': 'wrap',
            'justify-content': 'center',
            'align-items': 'center',
            'gap': '10px'
        }).append(feedCards.css({
            'width': '380px',// 调整宽度可更改视频大小
            'margin': '10px'
        }));

        const popoverContainer = $('<div></div>').css({
            'display': 'flex',
            'justify-content': 'center',
            'align-items': 'center',
            'margin-bottom': '10px'
        }).append(popoverWraps.css({
            'width': '90px',
            'height': '20px',
            'display': 'inline-block',
            'margin-right': '5px',
            'position': 'relative',
            'z-index': '1000'
        }));

        // 组装主容器
        container.append(popoverContainer, cardsContainer);

        // 删除其他所有元素并将新容器添加到body中
        $('body').children().not(container).remove();
        $('body').append(container);
    });
})(window.jQuery);