Skip Navigation
Kbin Userstyles and Userscripts @kbin.social Perry @kbin.social

Kbin Subscriptions Panel 2.9

greasyfork.org Kbin Subscriptions Panel

Adds a side panel with all magazine subscriptions.

I saw right when I was going to post this that someone else had already posted something similar, but I thought I'll go ahead and post it anyway as an alternative.

I threw together a simple side panel last night that lists all magazine subscriptions sorted alphabetically. I've also added a simple search box to quickly filter the list.

Edit: Listening to the feedback, I've added some (hopefully) improvements:

Version 0.6

  • Improved panel resizing such that the main content column is prioritised.
  • Added a settings modal where you can choose to increase the width of the page to fit the panel better.

Version 0.7

  • Fixed misaligned panel when sidebar was set to left position.

Version 0.8

  • Added toggle to collapse the panel.
  • Added option to hide the magazines when panel is collapsed.

Version 0.9

  • Fixed collapsing panel when sidebar is on the left side

Version 1.0

First major release!

  • Added onboarding step.
  • Added optional cache of subscriptions to make the panel load quicker.
  • Added basic support for mobile devices.
  • Added accessibility labels to buttons.
  • Removed Tampermonkey specific functions to (hopefully) increase compatibility.

Version 1.1

  • Added option to always show mobile menu for those who prefers a modal instead of a side panel
  • Fixed not handling rounded edges setting.

Version 1.2

  • Fixed layout issue when sticky navigation was off

Version 1.3

  • Fixed only loading the first 48 subscriptions.
  • Changed cache settings to use cache by default.

Version 1.4

  • Fixed slight flickering when loading with cache enabled.

Version 1.5

  • Added magazine grouping. Magazines that share the same name are grouped together. Can be disabled in settings.
  • Improved search UX.

Version 1.6

  • Fixed page scrolling to top when opening the mobile modal.

Version 2.0

The project had grown much larger than I had initially anticipated, to the point that it had started to become very difficult to maintain.

This release features a completely overhauled codebase, making it significantly easier to develop. It has also enabled me to move away from relying purely on DOM manipulation and instead move towards a more object oriented approach where each magazine handles its own state and presentation.

There is still a lot of cleanup left to do, but with this restructure, it enabled me to introduce a few hopefully interesting new features:

  • Added a Recently Viewed section that lists the last 5 visited magazines. Can be disabled in settings.
  • Added staring where one can select magazines to be sorted at the top of the list.
  • Added ignore option, where one can choose to hide individual magazines from the panel.
  • Improved mobile UX. The main menu and the subscriptions panel will now respect each other's states, meaning if one opens the other one will close.

A few words about the recently viewed sections. If this is enabled, any time one navigates to a certain magazine (in any way), a time stamp is stored in local storage of when the magazine was last visited. While the data is of course only stored on the local device, some people might still not want to record such data at all for privacy reasons.

If the recently viewed section is disabled in settings, this data is not recorded and any existing data is removed. I've also added a reset button in settings, which removes all settings, cache and magazine data from the device.

Version 2.1

  • Added sticky panel option in settings to make the panel stick to the top and scroll independently.

Version 2.2

  • Improved sticky panel UX.

Version 2.3

  • Improved sorting
  • Improved mobile menu when viewport resizes between desktop and mobile sizes (e.g. typically when rotating a tablet)

Version 2.4

  • Fixed panel displaying while closed in force mobile mode.

Version 2.5

  • Fixed compatibility with future Kbin release
  • Added integration with KUP settings panel.

Version 2.6

  • Fixed issue with Firefox

Version 2.7

  • Fixed layouting issue with Kbin.
  • Added compatibility with KUP bookmarks modal.

Version 2.8

  • Added alternative mobile menu placement (behind the hamburger menu) to increase compatibility with other scripts.

Version 2.9

  • Fixed placement of alternative mobile menu.

Note that if "always mobile menu" is turned on, both the alternative menu and the original menu will be visible. May require reload to fully apply.

45
45 comments

  • Hey! Thanks for this.
    Would there be a way to make it toggleable to reclaim the space when it's not needed ?

  • Just wanted to chime in and say thanks for the excellent work. I've had it installed since the first one you made public, and updated it now to 2.0. Works great!

  • Looks good! But seems to break when the kbin sidebar is positioned left. Subscriptions get pushed below the content.

    • Ah, I'll look into it.

      There are of course probably numerous ways to break this. It's not exactly enterprise grade software I'm writing here :)

      Edit: It should be fixed now.

  • I like where your head is at with this. I think yours is actually better because you added filtering to account for long subscription lists and you alpha sorted it.

  • The 2.0 release was quite a hefty project compared to the previous versions. While I did squash a few old bugs, it wouldn't surprise me if a few new ones might still be lurking around in there.

    If you guys happen to find anything, just give me a shout and I'll look into it as soon as I can.

    • Damn cool update Perry. One question for you: I added css scroll to the subscription panel, however now with the new edit section the star and ignore tool ignore the scroll function. Are they in a container or is there a way i can get it to scroll with the rest of the elements? I attached an image of what I mean

      • I've released an update that adds an option in the settings to enable sticky panel. There are quite a lot of edge cases and I'm not entirely sure that I'm completely happy with how the panel scrolling behaves.

        I will need to tinker a bit more with it, but at least it should work in the most basic sense.

  • Very good for keeping track of communities I want to see fly off, thanks!

  • Nice work on version 1.0! Looking really good.

    A minor bug that appears for me is that when the cache is not used, the spinner is always shown (not spinning, but visible) at the bottom of the list, even when the list is collapsed.

    Also, when you have more than one page of subscriptions, only page 1 is checked.

    IMHO the default (if not only option) should be to use the cache, and fetch all pages, storing the list for e.g. 24 hours, or until the user presses a refresh button. That way performance is good (for both the user and the instance itself), and if someone subscribes to a new community and notices that it's missing, it can be fixed in a second or two.

    Edit: I was actually using version 1.1. I think I managed to grab in between you posting it to greasyfork and updating the post!

    • I've released a new update that should fix the issues you mentioned:

      • It will now iteratively load all subscription pages.
      • Cache is now enabled by default. My reasoning for leaving it off was that I didn't want to unnecessarily store more data on the user's device than required.

      Some words about the cache. As it right now, if there is a cache available it will instantly be presented, while the actual live subscription list is simultaneously loaded in the background. A bit unnecessary, perhaps, since the subscriptions tend to not change that often. I will look into finding a smarter solution without sacrificing usability too much.

  • Really well done, wondering if there's a way to integrate it with mobile devices, I can use tampermonkey with KIWI browser.

    • I've released an update that should make it work on mobiles. I only have an iPhone so I can't actually test it live (except with the device emulator in Chrome) so give me a shout if it doesn't work properly.

  • Great! I'm keeping yours installed for now since it pulls in the paginated subscriptions pages (and I love the grouping!)

  • This is amazing, I never heard of this magazine that has all this customization. Wow!

  • this looks really good, though im partial to the one @raltsm4k made bc it is itself scrollable instead of needing to scroll down the page to see all your subs

    • I've got it working on my end, and super easy. here's what I'm using (although I adjusted the height and width to fit my custom script so remove whatever you don't prefer):

          aside#subscription-panel-content {
        margin-left: 15px;
        background-color: #1a1a1b!important;
        border: var(--kbin-options-border)0px!important;
        color: var(--kbin-section-text-color);
        margin-bottom: .5rem;
        margin-right: 18px!important;
        margin-top: -5px;
        padding-top: 2rem;
        padding-right: 1rem;
        padding-left: 1rem;
        padding-bottom: .4rem;
        border-radius: 0 0 .5rem .5rem !important;
        height: fit-content;
        position: relative;
    }

    div#subscription-panel ul {
        overflow: scroll;
        height: calc(100vh - 270px);
    }

    • I think the closest equivalent I have is if you enable the mobile menu. You would of course have to click to open the menu, but then you would have a floating modal that you can scroll through.

      I guess I could technically add an option to enable inline scrolling, but it would probably look pretty weird since my implementation is based on a side panel rather than a floating element that the other one uses. I'll see if I can experiment a bit, but don't hold your breath for this one :)

  • Great work! Thank you for this

  • Dude, the magazine grouping is a sick addition! well done.

  • this is great. thank you. any way to make the center column wider so its not so squeezed?
    edit: attached an image of what it currently looks like

    • If you update to the latest version, you can now open a settings modal by clicking on the cog wheel in the header, where you can choose to increase the width of the page.

      Note that the reason why I didn't make it default is that I'm not entirely sure what this might break. If I'm lucky everything will just work as expected, but I'm leaving it as a setting just to be safe.

      • just browsed around the site and everything works great so far. thanks for the update!

  • This was the one consistent missing feature in Kbin that bothered me. Thanks for Posting this! It will be especially useful as we try to grow new smaller niche communities, while still taking part in the general conversation of the popular posts.

  • Excellent! This really helps in providing efficient access to favorite and recently used subscriptions. Thanks!

  • Hey, I am trying to get this to work on an iPad with iOS 16.5 as a safari „add to Home Screen“/PWA and it’s not working. Is that expected ?

    • Oh, I haven't tested that actually. I can look into it. Does it work when you're browsing in Safari?

      Edit: It seems like Safari extensions are disabled on iOS/iPadOS in PWA mode. Password managers work, but ad blockers, userscripts e.t.c. do not. Maybe my Google-fu is just weak, but I couldn't find much information about it other than what I see myself when testing on my own device. I'll keep looking, but if you find something yourself, please give me a shout.

      • have you seen this by any chance ?
        "kbin Enhancement Suite: a community-curated script manager that lets you customize your kbin experience"
        I would love to see your Subscription Panel addet to the KES MegaMod
        https://kbin.social/m/kbinMeta/t/183928

        At the moment there is a bug when i use KES and on of your scripts where the Search Icon in the top right corne changes to the "Subs"/"List" icon. I reported it to them aswell.

      • Thank you, I will try around but I think your correct. If anything changes I will let you know.

45 comments