How to add new tab to media upload manager with custom set of images?

I would like to add new tab to upload manager and inside list images from

theme_folder/images/patterns

I tried something like this to add a tab but it does not work for me since it is adding tabs on the side of media manager but on image upload that tab is not visible.

function custom_media_upload_tab_name( $tabs ) {
    $newtab = array( 'tab_slug' => 'Patterns' );
    return array_merge( $tabs, $newtab );
}

add_filter( 'media_upload_tabs', 'custom_media_upload_tab_name' );

function custom_media_upload_tab_content() {
    // Add you content here.
    echo 'Hello content';
}
add_action( 'media_upload_tab_slug', 'custom_media_upload_tab_content' );

to be precise this is where I would like to add a new tab and in that tab I would like to list images from theme folder.

I am aware that media manager JS needs to be rewritten for it but to be honest I dont know where to start. Looks like I need to write completely new template for media manager in order to achieve this.

I went trough all suggestions but seems like no one is reading the question.
As advised
“I tried something like this to add a tab but it does not work for me since it is adding tabs on the side of media manager but on image upload that tab is not visible.”

So for now no one is able to find the solution for this.

This is an old thread but for me still as still as relevant.
I have been fiddling and has come up with this code for adding a media tab here, maybe someone want to continue for how the handle content for the tab? 🙂

add_action('admin_enqueue_scripts', function(){
    wp_enqueue_script( 'my-media-tab', plugin_dir_url( __FILE__ ) . '/js/mytab.js', array( 'jquery' ), '', true );
});

And then the js file:

var l10n = wp.media.view.l10n;
wp.media.view.MediaFrame.Select.prototype.browseRouter = function( routerView ) {
    routerView.set({
        upload: {
            text:     l10n.uploadFilesTitle,
            priority: 20
        },
        browse: {
            text:     l10n.mediaLibraryTitle,
            priority: 40
        },
        my_tab: {
            text:     "My tab",
            priority: 60
        }
    });
};

EDIT:
Ok, so. For handling the content i have not found a nice way to do this by wp.media. My current solution are 2 liseners, one for opening the media library and one for clicking in the media router menu;

jQuery(document).ready(function($){
    if ( wp.media ) {
        wp.media.view.Modal.prototype.on( "open", function() {
            if($('body').find('.media-modal-content .media-router a.media-menu-item.active')[0].innerText == "My tab")
                doMyTabContent();
        });
        $(wp.media).on('click', '.media-router a.media-menu-item', function(e){
            if(e.target.innerText == "My tab")
                doMyTabContent();
        });
    }
});

the function doMyTabContent(); is just something like;

function doMyTabContent() {
    var html="<div class="myTabContent">";
    //My tab content here
    html += '</div>';
    $('body .media-modal-content .media-frame-content')[0].innerHTML = html;
}

I’m very sure this can be done in a much more delicate way. Whoever reads this and has a better solution, please fill in 🙂