Vier Facelift? Before I started work on BookLook the plan was to just create

Submitted ⁨⁨2⁩ ⁨months⁩ ago⁩ by ⁨randompenguin@dillyofapickle.com⁩ to ⁨helpers@forum.friendi.ca⁩

https://dillyofapickle.com/photo/30272866416a5ec8500cd27946796708-0.jpeg

Vier Facelift?

Before I started work on BookLook the plan was to just create a modern UI style for the "Vier" theme along the same lines of what I did with Bookface for the "Frio" theme. I didn't really get all that far with the one for Vier, but it was pretty functional - at least on desktop. I hadn't thought about the mobile UI. Instead of Facebook this "Modern" style takes design cues from both Mastodon and Bluesky.

Anyway, I pulled that stylesheet into Friendica 2026.08-dev and now I'm wondering if I should just go ahead and finish it? I'm not sure how Vier users feel about it. Is there any interest in this?

As for what's left to do, the two sections you see above are the only ones I finished styling. Though the layout seems to work pretty well across most of the Friendica. I'd also need to figure out the responsive design including how this transforms into a mobile UI for phones and tablets, and of course make a "dark mode" variant.

Not sure if it would get into the Friendica core code or not, but if there's interest I can work on finishing it and at least release it on my own repository like I do with Bookface.

@developers @helpers

original

Comments

Sort:hotnew top

randompenguin@dillyofapickle.com ⁨2⁩ ⁨weeks⁩ ago
After getting the stylesheet to about 75% of modifying "Vier" I realized to actually fix some of the issues I need to just copy it and make a new theme based on Vier. It isn't that I can't do it completely with CSS, it just requires some really convoluted styling to get it to work the way I want. Which also means if you're using keyboard nav the focus jumps around because the elements are no longer being shown in the order they appear in the HTML code.
It's much easier if I can just rearrange the HTML so I don't have to have convoluted CSS. Another issue is that to get that nice 3-column layout in Vier it needs to be done with fixed positioning and negative margins. I can't use a flexbox on it because of the page architecture. But if I make a new theme I can create a custom layout that does let me use a flexbox. On top of that, Vier still uses server-side device detection that conditionally loads a "wide," "narrow," or "mobile" stylesheet. My responsive layout is sort of fighting against those. Lastly, Vier does not have a "schemes" folder like Frio. You can't just drop in a new sub-style and have it available in the theme drop-down. You actually have to hard code it into the theme options.
So the simpler solution is to just fork Vier and make a new theme that doesn't do server-side device detection or conditionally load stylesheets based on that, won't require anyone to hack theme files to add the option of this layout, and lets me customize the actual page architecture to make the layout work properly and the tab order to be correct.
This won't be as complex a customization as the "BookLook" theme I'd been working on, a lot of ideas from which are now baked into the core Frio code. This is just to get around some minor issues with modding Vier's layout to look more like Mastodon or Bluesky.
But it does mean I likely won't have this ready for people to try before the Release Candidate becomes the Stable version.
original
randompenguin@dillyofapickle.com ⁨4⁩ ⁨weeks⁩ ago
If neither "Smart Threading" nor "Compact Conversation View" are enabled you get the default layout for replies. I'm calling this "Flow Chat" because it's a bit like a flow chart for the conversation that, unlike simple thread lines or indenting, shows the relationship between the replies in detail:

Again, direct replies to the OP are separated by thick dashed lines, so you can see replies beneath them form separate conversations, with those replies separated by thin dashed lines. But the big difference are the bracket-thread lines. Second level are gray. Third level are blue. Fourth level are orange. Fifth level are green. Sixth level are red. Seventh+ level are purple. Friendica never indents anything more than thread_level_7.
If you compare the second conversation here to the "smart threaded" version you can see how this shows the actual relationship and depth of the replies, where "smart threading" does not.
Attachment: dillyofapickle.com ↗
original
randompenguin@dillyofapickle.com ⁨4⁩ ⁨weeks⁩ ago
For the aforementioned "Smart Threaded" option the replies under that depth test post would look like this with thick dashed lines between direct replies to the OP and thin lines and indenting for replies to replies:

The point of the "smart threaded" option is to reduce the amount of indentation. It accomplishes that by making any reply, at any depth, that has < 2 direct replies a thread_level_2 post (as if it were a direct reply to the OP). Once there are 2 or more replies to that comment its thread level changes and it starts indenting.
However, that purposely completely breaks the relationship of replies to replies that have fewer than two direct replies. Nothing I can do about that. That's how it intentionally works.
If you enable the new "Compact Conversation View" option, which only shows comments by the current user and the OP, whether "smart threading" is also enabled or not, this is the layout used.
Attachment: dillyofapickle.com ↗
original
randompenguin@dillyofapickle.com ⁨4⁩ ⁨weeks⁩ ago
I'm still working on this layout but haven't tackled the mobile version yet. I got sidetracked trying to make post replies look and work better. One thing that annoys me is that the engagement count for comments only shows the number of direct replies to the post instead of the total of all replies. So I've been thinking of at least adding a counter for how many total replies are downloaded/visible:
I think you only ever see that button with the full comment count if you enable "smart threading." My downloaded number is done entirely with CSS counters and only appears on a post that has at least one reply. It dynamically updates if you press the button to load more comments. I would prefer an option to just show the total reply count in every thread view mode, but it doesn't just hide that "16" it doesn't even create it in the other views. So the best I can do is a count of how many are currently downloaded and visible.
Attachment: dillyofapickle.com ↗
original
leanderlindahl@friendica-sverige.se ⁨1⁩ ⁨month⁩ ago
@randompenguin I think I'd like to see the mobile view to be able to offer an opinion.
original
randompenguin@dillyofapickle.com ⁨1⁩ ⁨month⁩ ago
Curious whether people would want this theme style to work like Bluesky/Mastodon where:
* The main feeds only show you the actual posts and none of the comments
* You click the post body to open that post in a new window by itself with all its comments
It would require adding a couple invisible elements to a Vier template to pull it off, but I don't know if people like the way Bluesky and Mastodon make you go to a new page to see the comments or if Friendica users would want that?
original
- randompenguin@dillyofapickle.com ⁨4⁩ ⁨weeks⁩ ago
  I was thinking of making a variant of this theme style that implements this idea, mostly to see how well it works and if people like it before resubmitting a PR to do it in all themes.
  Hiding all the comments is easy via CSS. It's not quite as efficient as not generating them in the first place though. But the end result for the user is the same - no comments cluttering up their feed and making it super long in some cases.
  Making the post body a clickable link that takes you to the post's single display page is also easy.
  What I'm not sure of is how to handle the COMMENT button? The options are:
  A. Hide Button so you have to click through to the single display page to comment.
  B. Show Button and allow writing a direct comment to the OP in the feed (however, after you submit it the only way to see your comment is to click through to the single display view).
  C. Button Opens Post - make the Comment button also click you through to the single display page (but then you have to click it again to actually comment).
  None of these is an ideal solution. I'm favoring option "B" since all the other action buttons are available in the feed it feels like Comment should be as well. But I also realize it might confuse some people that they can't actually see their comment appear under the post. All they'd see is the engagement emoji count go up one.
  Which option sounds better to you?
  original
- randompenguin@dillyofapickle.com ⁨1⁩ ⁨month⁩ ago
  While trying this out I've decided I'm going to submit a PR that offers "Hide Comments in Feeds" as Settings > Display option for ALL themes (turned off by default of course).
  People who want a really compact feed will love it. People who don't like extra clicks will hate it. But nobody has to use it if they don't want to.
  In every feed all of the comments are hidden. But you click on the post body and it opens the post in its own page, only there it will actually show you any comments under it.
  This is exactly how the web UI of both Mastodon and Bluesky work so it is a UX with which many users will already be familiar.
  The trick is making sure that all the other stuff in the post still works as expected. The contact links in the post header. The (re)action buttons below. Commenting without having to first open the post in the single display page.
  The only thing I don't like is that it literally just hides the comments in the feeds. It's still going through all those loops creating them. But the same loop creates the top post too and while the templates are context-aware if they're being rendered in a "display" page or not, the backend is not. So it's not quite as efficient as it could be. Maybe I'll figure out that backend part. But right now on my Dev Server I've got this working perfectly across all the themes.
  Now, if I can just get all these PRs I've been working on submitted...
  original
  - randompenguin@dillyofapickle.com ⁨1⁩ ⁨month⁩ ago
    I retracted my PR for this. It won't be in the next release of Friendica. It conflicts with the existing "Compact Conversation View" feature which hides all other comments except your own interactions with a post author (or something like that), where mine literally hides ALL comments under the post and requires you to click the post to read it on a separate page that shows all the comments.
    There were questions of whether there is demand for a feature to make Friendica feeds work the same way as Bluesky and Mastodon? And whether being able to write a comment to a post in the feed, but _not_ see it get added under the post in the feed is too confusing, and whether commenting in the feed should be completely disabled, or on submission should it take you to that post's single page where you _can_ see your comment? Which will take a little more work to figure out to make it do that.
    So I'll probably do a post/poll on that question and if there's enough interest I'll resubmit the PR for the _next_ version. We can probably put both options in a dropdown so you can't enable both of them at the same time.
    original
    -> View More Comments
randompenguin@dillyofapickle.com ⁨2⁩ ⁨months⁩ ago
As reference for anyone who doesn't have accounts on Bluesky and/or Mastodon this is what their layouts look like:
Attachment: dillyofapickle.com ↗
original
tealk@friendica.rollenspiel.monster@friendica.rollenspiel.monster ⁨2⁩ ⁨months⁩ ago
@randompenguin generally I like it, although I find it overloaded with a left and right sidebar.
original
- randompenguin@dillyofapickle.com ⁨2⁩ ⁨months⁩ ago
  @tealk IMO Friendica is overloaded. It has so many "moving parts" it's really hard to redesign it. I mean, we could get rid of that right sidebar. It already disappears on narrower screens. The "Frio" theme doesn't even have it. And/or I could selectively hide things in it to pare it down to something more like Bluesky's right-hand sidebar. I made the drop-down user menu stuck open, I could turn that back into a drop-down and move the left sidebar up.
  original
  - randompenguin@dillyofapickle.com ⁨2⁩ ⁨months⁩ ago
    @tealk Something like this:
    Attachment: dillyofapickle.com ↗
    original
    -> View More Comments