So we've got a base Post built up and now we need to add variations to it. So we can have a Post that has multiple replies threaded below it. You can have a Post where the User is replying currently. So there is the reply form underneath. And so let's tackle these variations and I think we are going to start with the reply thread. All right, so here's what I mean. This is a basic Post that we've built.

All right, so here's what I mean. This is a basic post that we've built. Uh, so is this one, but then you will see that some posts, if I keep going like this one, have a reply thread. So you can see these indented uh, avatars with a line through. So this is what we're going to build in this lesson. So one thing to keep in mind here is the more variation we bring, the more duplication we will bring.

So one thing to keep in mind here is the more variation we bring, the more duplication we will bring. You probably remember how much code is involved in just these three icon SVG icons here. And every time we're going to have another post for another variation, we are going to bring along all this duplication. And you might remember just the padding-top problem we had in the previous lesson where we ended up using the :not(:first-child), just this was bringing some friction in terms.

This is just a simple explanation with no code.

And a better time to make this fine tuning might be after the team has implemented the UI in components or partials within the Laravel app. At this point, it's much easier to go and tweak some style on one of the elements and be applied everywhere. So I'll do my best to do the best job possible now, but there might be a chance that we do a round of revisions and fine tuning after the team has moved our codes, our UI code to Laravel.

and fine tuning after the team has moved our codes, our UI code to Laravel. Okay, so with all that out of the way, let's focus on the threaded reply as we can see here. All right, so let's go in main feed and let's add a comment here. Feed item. And I guess we need to add more placeholder comments. Uh, you might have seen that pattern in Tailwind UI. You will have something like more feed items, da da da.

Uh, you might have seen that pattern in Tailwind UI. You will have something like more feed items, da da da to indicate where you would go about putting more of these repeating blocks of HTML. So for now, I will duplicate this whole post, but I might delete it later. So we should see two similar posts in our UI. But I'm going to change this just to mix it up a bit and we are going to mirror that post from Michael because I happen to have this image.

and we are going to mirror that post from Michael because I happen to have this image and this image in my public/images directory. And so I'm going to change the avatar with Michael. And so we will update the username and the handle here, which is going to be m Mitch, JJ like so, and maybe let's make this post posted three hours ago. Alright. And then if I scroll down to the content here, the paragraph will say I made this

Alright. And then if I scroll down to the content here, the paragraph will say I made this and there's a couple of hashtag my artwork pixel. So let's add these, hashtag my artwork and have another one pixel. And now we probably want to style these differently and it wouldn't make much sense to add classes here on the anchor tags because this is definitely going to come from the database or some sort of content management.

because this is definitely going to come from the database or some sort of content management. And perhaps we might end up using the tailwind typography plugin for all of this. But here we can say that any anchor tag as a child of this div should have specific classes. So .m-percent-a should target all anchor tags children of this div and will set the color to text-pixel. Let's check if that works. And yep, that works. And let's perhaps underscore the hashtag

Let's check if that works. And yep, that works. And let's perhaps underscore the hashtag when we hover over it. So once again, M percent for these current elements and then underscore for space and then a hover underline. And just to be clear, what happens here, you can see that the selector will target M percent, which is the current element, which is this div and then nested anchor tags in there. So just like this, we are able to style hashtags.

and then nested anchor tags in there. So just like this, we are able to style hashtags and every time there's an anchor tag in any post it's going to be styled like this. Nice. Next we are going to have this image here. So below the paragraph tag, we'll have an image. I think that the image is called Simon-chilling.png. And because we have this flex flex-col gap-3 classes here, the spacing between the paragraph

And because we have this flex flex call gap three classes here, the spacing between the paragraph and the image should be handled nicely. And yeah, look at this looking great and I just realized there's something wrong here. The heart should actually not be yellow unless it's hovered. And actually I remember what happened after the last video off camera. I tried to implement the active state of the liked button, but then realized that it needs to be another SVG icon.

I tried to implement the active state of the liked button, but then realized that it needs to be another SVG icon for reasons I'll tell you later. And so I backtracked, but I forgot to remove the classes. So let's clean that up. Let's go back to no active state and we'll handle this later in this course. All right, so what I'm talking about is this class here of text-pixel and then the fill-pixel here. So if I remove these two classes, this should be fixed. Yep.

of text pixel and then the fill pixel here. So if I remove these two classes, this should be fixed. Yep. Cool. And let's go all the way to the top inside the other ally and quickly do the same. So remove this class and this class. Apologies about this. Pretend that it never happened. Alright, so we good with the hearts that are not yellow anymore. So now we are going to implement threaded replies below the Post by Michael.

So now we are going to implement threaded replies below the post by Michael. So if we look at the design below the action buttons, we have that separator instantly after nested within the separator. So let me show the next post so you understand the hierarchy here. Instead of being aligned with the left here, it's nested within the current post container. And then we have this line through.

it's nested within the current post container. And then we have this line through. So what I'm thinking is the nested children here are also going to be part of this big container. If I scroll to the top, remember we have one container here and then another container here. So that container is going to also contain the threaded replies within it. And because it's going to be a list of replies, we are going to have a nested ordered list inside the li item,

And because it's going to be a list of replies, we are going to have a nested ordered list inside the li item, which is part of the main ordered list. That main container that already contains a whole lot of things and that's the one with the border bottom is going to contain the threaded replies. So we have our username and metadata here that I'll collapse. Then we have the actual posts body and then the action buttons.

Then we have the actual posts body and then the action buttons. I'm tempted to add some comments here. So user meta and then here post content like copilots new, uh, just so it's a little bit easier for the team and for me of course. So now uh, the action buttons come next. And so I'm going to collapse this. And so still within this div here, so right

And so I'm going to collapse this. And so still within this div here, so right after the action buttons is where we have our eventual threaded replies. So that's going to be an optional block of markup within the post markup. Once it's implemented in Laravel, when there is a reply, it's going to be slotted along in here. And if no replies are present, there just won't be anything here.

And if no replies are present, there just won't be anything here. Okay, let's try this. So at a very high level we are going to have an all at list and then items with each a reply like so. So let's see where this lands. And this should be aligned in the right column. Yep, this is where I want it to be. The border bottom of the entire post is below this. And so we cannot rely on

The border bottom of the entire post is below this. And so we cannot rely on that border bottom to make that line. This actually needs to be a border top on the nested ordered list, the reply thread list. So on the ol we are going to have a class of borderT and again borderPixelLight at 10% opacity and to create some space before the list items. I'm also going to have a class of emptyDash8.

and to create some space before the lease items. I'm also going to have a class of empty-8. Let's see how that looks. Alright, that looks a little bit too big. What do we have on the design between this and the elements? Okay, there's 20. So empty-5. Alright, let's adjust this empty-5. Okay, yep, that's looking nice. So next let's try to tackle the nested items, the replies. So each of these is going to be exactly

So next let's try to tackle the nested items, the replies. So each of these is going to be exactly how this selection shows. It looks like we are going to have some separation from the border top. Uh, let's try pt-4 and then reduce it if it feels too big. So each li item is going to have actually, it's even less between each element regardless. Let's try pt-4, see how it feels.

between each element regardless. Let's try PT four, see how it feels. But I feel like once we position this element, this will basically be a typical post except it doesn't have the save and share options and it looks like something went wrong here in the design. So I'm not sure if it should also have all the controls and it looks just like this. I think I will leave it like that just for simplicity and then we can remove it if it was unwanted.

I think I will leave it like that just for simplicity and then we can remove it if it was unwanted. But what I'm saying is this is just a regular post, it happens to be indented and then we have this line through that goes through the avatar that's gonna be quite fun to build and also notes that the line ends at the last post. So if it's the last post, it doesn't have a line that keeps going all the way down, that's gonna be a nice challenge.

that keeps going all the way down, that's gonna be a nice challenge. Alright, so let's keep only one reply. I am going to give it a class of pt-4. And inside of this, my goodness, we are going to duplicate the entire post one more time. So let me grab the post that doesn't have any threaded replies. So this one, and I'm going to go down here. Hmm. And actually I've copied the li so I'm going to have

So this one, and I'm going to go down here. Hmm. And actually I've copied the li so I'm going to have to re-add the pt-4 class. Let me paste that and go all the way back up. This is getting super confusing with all the markup, but thanks to the threaded replies comment here I can see where I am and let's he have a reply. And so here instead of this not first pt-2.5, we want pt-4. Let's go take a look at what we have moment of truth.

we want PT dash four. Let's go take a look at what we have moment of truth. Scroll down. Hey look at this. This is actually looking really nice. Let's change its contents to Alex in Paris just so it's less confusing looking at it. All right, so the image is Alex, avatar for Alex, the username is Alex. Let's make that one hour ago. And the username is Alex in Paris.

Let's make that one hour ago. And the username is Alex in Paris. And we'll change the content paragraph to say what it says in the design and here's what it's going to look like. Whoops. We have an image problem. Where is Alex? Whoops, looks like we don't have it. So let's change it to me answering this question. And because the post has a picture of me, I could say, hey, this looks just like me.

And because the post has a picture of me, I could say, hey, this looks just like me. So I'll quickly go and change the meta here. Simon Swiss Simon. And the image here is Simon chilling avatar for Simon. Let's check it out. That looks great. Awesome. All right, we're making good progress. Let's duplicate one more time the reply because we need at least two replies to be able

Let's duplicate one more time the reply because we need at least two replies to be able to work on the thread line between the avatars. So I know that's a lot of duplication, I'm not enjoying this, but we've gotta do it. Okay? I am not going to bother to change the content or avatar for this. I will just duplicate. And before I do this, let's have a more replies do.dot comment to let the team know.

And before I do this, let's have a more replies do.dot comment to let the team know and we'll probably delete these test posts that I have now. So we should now have two threaded replies and yeah, that works great. So what I wanna work on now is that line that goes through the middle of the avatar and all the way down here but stops before showing below the last entry. Once again, this is what it looks like on the design. Uh, it looks like it's overlapping a bit.

Once again, this is what it looks like on the design. Uh, it looks like it's overlapping a bit. I don't know if this is intentional or not, but regardless, to be able to build this, I feel like we are going to need to absolutely position that line and then offset it from the left. So what I'm thinking in my brain is the whole li reply is relatively positioned and then we can have a div that is one pixel wide and a hundred percent tall.

and then we can have a div that is one pixel wide and a hundred percent tall and instead of left zero, we are going to go left half the width of the avatar here. Let's try that. And so I feel like we need to give a class of relative to both ally items here. And the reason being that we can then have a line through decorative element, which is a div, which is going to be aria-hidden equals true. And that one is going to have a class of

to be area hidden equals true. And that one is going to have a class of absolute top zero left. Let's try five. And the reason for five is the avatar has a size of 10, so that should be half. It's gonna be one pixel off to the side, but I think that's okay. And so we want it to have a width of pixel, one pixel and height of full.

And so we want it to have a width of pixel, one pixel and height of full. Alright, so those are the dimensions and the very last thing we need is a background color. Let's go with a pixel light at 10% opacity. So keep in mind we've only done that for the first ally reply. Let's go take a look and check this out. It's doing exactly what I wanted. To me this is perfect. So it probably is offsets by one pixel.

It's doing exactly what I wanted. To me this is perfect. So it probably is offsets by one pixel to the right from the exact center of the width of the avatar, but we can't go between pixels anyway. Maybe the only problem, and you might not see it, but the line goes over the avatar, that's easy to fix, but we need to make sure that the line is behind the avatar. Alright, so a line through here is absolutely positioned and therefore sits on top. So we can give a class of relative to the anchor tag here,

therefore sits on top. So we can give a class of relative to the anchor tag here, which is our avatar. But I like to use most of the time to fix stacking order issues, the isolate properly, which is going to create a new stacking context with isolation: isolate. And I feel like this should fix the issue. And yep, it's kind of hard to tell, but I guarantee you that the line is below the image.

And yep, it's kind of hard to tell, but I guarantee you that the line is below the image. Now, matter of fact, let me make the background color red-600. So you will clearly see that the line is behind the avatar, but if I did not have the isolate class here, the line would go above. So now you can for sure see it. Let's undo that and bring the color back like so. And now that we've got this working on the first one,

Let's undo that and bring the color back like so. And now that we've got this working on the first one, let's duplicate all of these for the other element and then we'll find a way to not let the line go all the way down. So I've added the relative class to the other li item, but what I've added afterwards is this line-through element that I'll copy and also the isolate class here. So I will collapse this one and open this one and paste our line-through.

So I will collapse this one and open this one and paste our line through. And remember I need to add the isolate class as well. So now both elements are the same and so as a result we should see the line go through all the way to the end of the second Post. So now we want to remove that portion here and you might think that we need to be clever and have another line that is the same color as the background on top of this line to hide it.

and have another line that is the same color as the background on top of this line to hide it. But actually there's a much simpler way to fix that. Remember how before we use the firstChild selector to determine if we needed some padding? Well here we can use the lastChild to determine if we need to do something about that one. So if we are the lastChild, which is currently that one, what we want to do is instead of having a height of full, we just want a height of four.

what we want to do is instead of having a height of full, we just want a height of four. And the reason is there is a padding top of four before the avatar shows up. So if we have a height of four, it's going to make a line that goes from the top to the top of the avatar here. So this is exactly what we want. We could make it go a little bit further and hide behind, but technically it goes right to the edge here. But once again, let's be clever about this

but technically it goes right to the edge here. But once again, let's be clever about this and not have conditional classes, although it's totally doable. But let's try to do this with CSS here. So I will have height of full again and what I want to do is if we are the lastChild, we want to have H of four and let's go and do the same in this one here, height of full, unless this is the lastChild,

and do the same in this one here, height of full, unless this is the last child, in which case we want height of four. And that sounds promising but it's not going to work. And the reason it's not going to work is last child is looking for siblings, same level elements and find the last, but we have applied last to the li item here. And basically there's only one of these, what we want is the last li item,

And basically there's only one of these, what we want is the last li item, which is a parent selector. And so we can do some magic trickery with group and let me show you. Alright, so on the li item which we want to compare to check if it's the last, I'm going to give a class of group, but you might have an alarm bell going in your head. We have already used a class of group

alarm bell going in your head. We have already used a class of group for the little options menu with the three squares. And so this group is going to clash with the other group. Luckily we can use namespace groups. So let me show you how that works. And so instead of just calling this group group, I will call it group/ and then I can give it a name. So li, so this is now the group li marker. And so what I can do here

So li, so this is now the group li marker. And so what I can do here with last is I can go group-last. You can see the selector here, but I need to namespace it to li and this time it should do the trick and look for the last li item. So let's collapse these and do the same on the second li group/li and then here group-last/li.

and do the same on the second li group /li and then here group last /li. And this now should be working. So let's scroll down. The first item has the line through all the way, and the second one has the line through stopping right where it needs to. Super cool, isn't it? Now I know this is quite confusing. So let me quickly show you the Tailwind CSS documentations about this namespace groups, okay? I mean the hover focus

about this namespace groups, okay? I mean the hover focus and other states page of the tailwind docs. And if I search for group slash you will see the differentiating nested groups. So that's exactly what we've done. We've done group li, and then we've done group hover slash li except we've used group last for the last child. Pretty cool stuff, huh?

group last for the last child. Pretty cool stuff, huh? I don't use namespace groups every day, but when you need them they're super handy. Alright, so I think our threaded replies are nearing completion. The only issue I see left is we have that double border bottom here we have this line which is aligned with the thread and then we have the border bottom of the actual parent post.

aligned with the thread and then we have the border bottom of the actual parent Post or Post to which the thread belongs. And so we probably need to get rid of one or the other. According to the design, it looks like when there are reply threads, the last line belongs to the last response and there is no bottom, bottom on the actual entire parent post wrapper. We might let the border bottom of that do the separation

bottom on the actual entire parent post wrapper. We might let the border bottom of that do the separation and then have our responses below. So let's try that. I'm going to collapse the allies so we see clear. And so if I go further up, basically this is where the border bottom is defined, but it almost feels like we need one more wrapper that is going to wrap the user meta post content and action buttons and then move the border bottom classes.

that is going to wrap the User meta post content and action buttons and then move the border bottom classes. So border-pixel-light and border-b to that element. And so this is not going to be completely fixed, but let's take a look at what we've got. All right, so now we have this double line because we need to get rid of the border-t on this one. And it looks like we're missing some padding class that should have been moved along.

And it looks like we're missing some padding class that should have been moved along. And yet the pb-5 needs to also move down with there. So that's there's padding-bottom before the border-bottom. And so now if we go down to our threaded replies, I feel like all of these classes can get removed because we don't want a border-top and we don't want a margin-top, do we? I don't think we do because there is the padding-top on the li items.

I don't think we do because there is the padding top on the ally items. So let's remove all of that. And I have a funny feeling this is going to work now, so I'm fully zoomed in, but this is the normal post without replies. And then this is Michael's post with replies and we have a perfectly set thread that starts like this and ends like this. And just to triple check that it works, I actually need

set thread that starts like this and ends like this. And just to triple check that it works, I actually need to duplicate this Post one more time to put it after the thread. So let's go right to the top and grab this first feed item and then we'll have more feed items. This one contains the replies, but I'll post one more afterwards. And so we should see a thread below Michael's post with two posts and then we have one separator.

And so we should see a thread below Michael's post with two posts and then we have one separator and back to the normal post. So it looks like it's working exactly like it should. There is a track ton of duplication in these templates, but we can't avoid this and we will remove some of them. But so far so good. I'm quite happy with how things are looking. Honestly, this duplication is bothering me because there's a lot of scrolling up and down.

Honestly, this duplication is bothering me because there's a lot of scrolling up and down. And in the next lesson we are just going to add more duplication. So what I'm going to do is only keep one Post, actually one main top level Post and then one reply inside of it. So I'm going to do the thing where I have a placeholder for more Posts and more replies, but we are only going to keep one Post and one reply.

for more posts and more replies, but we are only going to keep one post and one reply and then we're going to push this to GI and move on to the next lesson. Alright, so I am going to keep this post that contains the replies and for which we've done some adjustments. So I will move the more feed items below and I will move the feed item comment here and delete that one completely.

and I will move the feed item comment here and delete that one completely. Okay, so I can also remove the feed item afterwards. So we should be left with just one Post and two replies below it. This is Michael's Post, and then there is two replies below it. Great. And then I'm going to get rid of the threaded replies, which are here. So we have one reply, here's the reply,

of the threaded replies, which are here. So we have one reply, here's the reply, and then the more replies comment and so I can get rid of the next one below. So now our main section has the navigation, the post prompt, the feed, which is literally just one feed item and then threaded replies if needed. And we have the more replies and more feed items so the team knows where to add additional entries.

and more feed items so the team knows where to add additional entries. This is going to look much more minimal, but I think that's all we need to convey the intent and the team should be able to implement this based off that. If not, we'll revisit, but at least I've removed a lot of duplication and I'm already feeling much better. So offline, I'm going to push this to GI

and I'm already feeling much better. So offline, I'm going to push this to GI and I'll see you in the next lesson.