All right, so I'm about ready to move on to displaying the idea cards themselves. But very quickly, let's switch over to the Code Rabbit tab and see if it picked up any issues, uh, that I introduced. So we'll start with registered user controller. Uh, yeah, so here it's recommending that we manually be crypt the password. It probably just doesn't know yet that Laravel has support to do this automatically as part of a cast. And just as a reminder, if you missed the previous episode,

to do this automatically as part of a cast. And just as a reminder, if you missed the previous episode, that will be handled right here. Okay? So this is an example of something where, thank you for telling me, but it's actually not quite relevant, so I'm going to ignore that. Alright, next in session controller. It wants us, yeah, it wants us to invalidate and re the token. Uh, when we log out, as you see here, now we do regenerate,

and re the token. Uh, when we log out, as you see here, now we do regenerate, uh, as part of the sign-in. Uh, so I'm not sure how useful or necessary this is, but nonetheless, if we wanted to apply it, we can just click this here and it'll take care of that. However, at this point, uh, we're being a little bit inconsistent here. Within this action, we type the request, but down here we use the request

Within this action, we type the request, but down here we use the request helper, try to be consistent. So in this case, if I keep this, I would do something like this. Got it. All right, let's keep going Next within form css. Uh, yeah, this is the kind of stuff I really find useful. So it's spotted that right here we're using RGB on a CSS variable.

So it's spotted that right here we're using RGB on a CSS variable. Um, and that's actually not quite appropriate. So I'm gonna make that change and it updates it for me, right? Those are easy things to miss. So I really appreciate that. Next, within our form, what do we have here? Let's see up. We have a unclosed div. I thought we fixed that, but maybe not. All right, let's keep going. Within navigation,

I thought we fixed that, but maybe not. All right, let's keep going. Within navigation, we have a duplicate alts. Yep, we have one and two. All right, fix that for me. You can see why I really appreciate this. And yeah, now we're at the point where there are no further comments. Okay, so now I will do a get add everything, and I'm gonna do a commit amends. I'm just going to, whoops, excuse me.

and I'm gonna do a commit amends. I'm just going to, whoops, excuse me. Uh, I will amend to the previous commit from the last episode. Alright, we're in business. Okay, so let's get started. Here's what I'm gonna do. I'm gonna open up my routes file and let me see my face a little bit bigger. There we go. Apologies in advance. Okay, so here's what I'm thinking. The homepage really should be

Okay, so here's what I'm thinking. The homepage really should be ultimately the marketing page, right? The, the reason you should sign up. Uh, but for now we don't have that. So instead what I will do is say, let's just perform a redirect. I'm gonna redirect the homepage to slash ideas for now with the understanding that later you would actually take some time to build up your marketing, uh, homepage.

with the understanding that later you would actually take some time to build up your marketing, uh, homepage. Okay? Next, I'm gonna build up a route to display all of our ideas. And this will delegate to an idea controller. So let's make a controller idea controller, and do I want it to be a resource? Sure. For an idea. Okay, next, let's switch back and we can reference that. So this is gonna go to idea controller,

Okay, next, let's switch back and we can reference that. So this is gonna go to idea controller, and the action of course is going to be index because this is where I display all of our ideas. Import that, okay? Next, we're going to assume at this point you need to be signed in in order to view your ideas. So I'm gonna add a middleware here and say, Nope, you gotta be signed in. Alright? So think about what's happening here.

and say, Nope, you gotta be signed in. Alright? So think about what's happening here. Let's imagine on a new guest, they visit the homepage and they are immediately redirected to ideas temporarily. All right, so this, uh, this route fires however, it requires authentication and this new guest is not authenticated. So once again, it redirects them to the login page and it uses a named route for that. But at the moment, we haven't assigned

and it uses a named route for that. But at the moment, we haven't assigned or created a named route. So if we were to give this a shot notice, yep, we're gonna get an exception or an error. Hey, I'm trying to redirect the user to the login route, but you haven't specified what URL corresponds to login. So I'm gonna do that now. Give it a name of login. Now we have a named route. Come back, refresh. And there we go. Okay, but next notice it's un styled

Now we have a named route. Come back, refresh. And there we go. Okay, but next notice it's un styled and I think that's because if I boot up the terminal, we need to be running vet. So come back, give that a refresh. And there we go. We're up and running. Okay, but next it looks like I introduced a little issue there. Let's fix that. That looks okay. Let's go into our form. Yep, there it is. Perfect. Okay, so now I go to the homepage, I'm not signed in

Yep, there it is. Perfect. Okay, so now I go to the homepage, I'm not signed in and it'll just keep reloading the login page. Perfect. So let's go ahead and log in. There we go. So now we can see we have loaded this routes, but of course we're not loading a view. Alright? We're in business. So let's get to work, go into our routes file. This loads the index action on idea controller. And now let's return a view called, uh, idea do index.

This loads the index action on idea controller. And now let's return a view called, uh, idea do index. And along with that I'd like to send through all of our ideas. So we'll say ideas and yeah, we need to fetch those. Okay, so let's just do it, um, kind of the quick and dirty route and then we're gonna slowly tweak this. And then finally add pagination. I'm gonna say, all right, idea. We don't wanna say all

I'm gonna say, all right, idea. We don't wanna say all because remember that's gonna give me all of the ideas within that table when we really want them scoped to just hours. So of course you have a couple options. You could say idea query, uh, where the user ID is the authenticated user, or often I prefer to just start with the authenticated user. So I have, um, I have clear protection in place that

or often I prefer to just start with the authenticated user. So I have, um, I have clear protection in place that whatever query I'm performing is scoped to the current user. So if I go on user, of course we have an ideas relationship and that assumes that it is scoped to the current user, right? So I can say auth user ideas and just give me all of them for now. So we want pagination, but just for now we get all of them. Alright? So we load a view and we send through the ideas.

So we want pagination, but just for now we get all of them. Alright? So we load a view and we send through the ideas. That's the next step. Alright? So let's create that view. And just to show you workflow, remember one option of course is to scroll down and create a directory. Create a file. Another option is to run from the terminal, PHP artisan, make me a view. And then finally, a third option would be to leverage your editor, right? So in code or cursor, uh, there's a,

to leverage your editor, right? So in code or cursor, uh, there's a, an extension called advanced new file that I like. And it allows me to do things like this within the resources, views directory, create an ideal folder and then indexed, upload PHP. And now you'll see it does that very, very quickly. So just find something that fits your fingers in your workflow. Okay? So anyways, let's build our layout,

that fits your fingers in your workflow. Okay? So anyways, let's build our layout, show all ideas, open the browser, give it a refresh, and we're in business. Okay, let's get started. So I'm gonna begin with a wrapping div and then we'll have a little header here. We might even use a header tag. So yep, simple stuff. Larger text, bold. And then we have a subtitle. So now if I come back, there we go.

Larger text, bold. And then we have a subtitle. So now if I come back, there we go. And if I zoom out, you can see it is center aligned. Cool. Next, let's say below it we'll have a little spacing above it and we're basically gonna loop over all of our cards. So I could say maybe, uh, let's do four else and we'll say ideas as idea empty. And then finally and four else. Okay, so here we could say, you know, no ideas at this time.

And then finally and four else. Okay, so here we could say, you know, no ideas at this time. And then this will be our card. Show the card, all right, come back, give it a refresh. And we get no ideas at this time of course, because we don't have any, uh, ideas in the database. So that's the next step. Let's go into our idea factory. Remember, this allows us to quickly whip up dummy factories. And here's what I'll do. I'll boot up tinker and I'll say peach B artisan tinker

And here's what I'll do. I'll boot up tinker and I'll say peach B artisan tinker app models idea factory creates. But I'm gonna override the user id. I want the user ID to be my own. And I just happen to know that's an ID of eight. Okay? So this will create one uh, idea for me. So if I were to come back, give this a refresh, sure enough, we're not showing the actual details, but we can see that uh, there is at least one item.

we're not showing the actual details, but we can see that uh, there is at least one item. So what I'm gonna do is run this one more time, but why don't we create, I don't know, three more. Okay, so now it returns a collection of three items. Cool. So let's close that out, return to our ideas page and yeah, the, at the very start we could say within an H three show the IDs title, come back and now we have some dummy titles available to us.

IDs title, come back and now we have some dummy titles available to us. So I'd like these to be displayed as a grid, I think. So maybe I could do one more diviv and let's make this a grid. I'll just paste this in. Gimme a grid for large enough screens that consists of two columns and then a little space in between each column and reformat. Okay, so now we have a grid where each one of these will be a grid item.

Okay, so now we have a grid where each one of these will be a grid item. So you're gonna see this is gonna change a little bit. So if I hover over each item, you can see right now we don't have a large width, uh, so they are stacked, which is what we want for mobile. But if I zoom out just to simulate a larger screen size or desktop, we get two columns. Cool. So now what I'll do is why don't we style each

Cool. So now what I'll do is why don't we style each of the individual cards and I'll paste this in. Alright, so once again, just basic stuff. I want some borders. Let's make the edges rounded. We're gonna use that BG card color that we defined in app CSS right there. Okay? Add a little padding, make the text small, make it a block. Simple stuff, uh, that a fault is blocked.

make the text small, make it a block. Simple stuff, uh, that a fault is blocked. So at least right now we can disable that. Okay? So if I come back now, yeah, now you can see, um, we just have a little bit of a backdrop there and I'll zoom in a couple clicks like that. Okay? But next, as you can imagine, there's probably more than one scenario where I want a panel or a card like you see here. Are there other sections of the site

or a card like you see here. Are there other sections of the site where I want this styling, basically? And if the answer is yes, I have two choices. One, create a dedicated CSS class that applies these, or two extract a blade component, and I think a blade component is the way to go. So I'm gonna select all of this as you see here. And within my components directory, I'm gonna create a new one card, do blade dot PHP,

And within my components directory, I'm gonna create a new one card, do blade dot PHP, and then I'll paste all of that in here. All right? Now let's make this extend extendable. So I can do attributes here and then I can pass in the default classes, but you can override that if you want. All right, this will be our slot. And yeah, we have, we have a simple component. Okay, so check this out.

And yeah, we have, we have a simple component. Okay, so check this out. If I were to switch back now this becomes much cleaner. I can replace this with X card Like that. All right, come back to the browser and I'm still gonna get the exact same thing. Cool. Next. This should also probably be a diviv, so I will clean that up.

This should also probably be a diviv, so I will clean that up. Uh, or actually let's make it a card already. We're reusing it. So let's begin styling the card itself. We want the H three to be a little bit more prominent. So I will tweak the text color and make it larger. Next. Below that, I want the description. So this would be the ideas description and maybe that should be within a paragraph tag. I'm gonna keep it in a diff for now

and maybe that should be within a paragraph tag. I'm gonna keep it in a diff for now because that could be marked down. And then finally below that we want a timestamp. So I can say create it at, but this will actually be a carbon instance, which is a PHP package that allows us to format it in any number of ways. In our case, I could do diff for humans. And this will show me how long ago that timestamp is,

In our case, I could do diff for humans. And this will show me how long ago that timestamp is, things like two minutes ago or 23 days ago. All right, so let's give this um, a little margin above it. And yeah, now within our card we have the title and then a description and then a timestamp below it. If we take a look. There we go. Looking good. Now here's what I think we should do. This is a little prominent, so if I switch back, maybe on the wrapper itself I can say, uh,

This is a little prominent, so if I switch back, maybe on the wrapper itself I can say, uh, text muted foreground. And this is kind of a, a more subtle color. So if I come back, yeah, it's just a little, little bit easier on the eyes, but our heading is still white. Alright, so we're gonna keep working on this later. I want image support. I wanna show the current status. I wanna see how many steps have been completed.

I want image support. I wanna show the current status. I wanna see how many steps have been completed. But we will, as we implement those features, come back and update the card. But now one thing I'm thinking is these should probably be clickable and this would take me to a page to view the idea itself. So let's do this. Um, first actually, I think I screwed up. Let's put this right here Instead text muted foreground.

Let's put this right here Instead text muted foreground. Yeah, because otherwise this would receive that color as well. And I only wanted applied to these. Okay, but anyways, now it sounds like our card could be a diviv or maybe it could be uh, an anchor tag as well. And we just have to decide, is it okay to assume that it will always be an anchor tag? Maybe, but maybe we also have times when we want a card,

that it will always be an anchor tag? Maybe, but maybe we also have times when we want a card, but it's not an anchor tag. So for now we only have use case for an anchor tag. So I will stick with that. But once we introduce the other need, then we'll make this a little more flexible. Cool. So now I can say the harath is gonna be the ideas, uh, path. We could add a method to our idea model to support that. That's one option. Another option is just hardcoded.

We could add a method to our idea model to support that. That's one option. Another option is just hardcoded. So ideas slash idea id, right? And another option just to show you, you have, you have flexibility here. You could use a named route like idea show and then you send through the idea in question. Okay, so though if I were to come back, that doesn't work. Just magically you have to declare the route. So if I were to come back, if you wanna go that uh, path,

Just magically you have to declare the route. So if I were to come back, if you wanna go that uh, path, create a new route idea, uh, idea, this would hit the show action. This still requires authentication, but now we're gonna give it a name idea that show. And yeah, if you just wanted to be consistent, you could follow this convention here. Idea index or action name. Alright, now if I come back, this should work.

Idea index or action name. Alright, now if I come back, this should work. If I click on it, it's going to attempt to load a page that does not have a view. But nonetheless we are at the right end point. Cool. So why don't we wrap up with one last thing. For this video, I would like to see the current status of the card. That's sort of an important thing. I had these ideas that are at various stages,

That's sort of an important thing. I had these ideas that are at various stages, some are pending, some are in progress and some are done. So what is the current status for these cards? I have no idea. Alright, let's do that. Now let's go into our index action. And maybe we'll put it right here. We'll have a little span. I'll give it a few classes. Once again, just inline block, make it fully rounded. Tiny text font, medium.

make it fully rounded. Tiny text font, medium. Maybe we'll start with background primary. All right. And then let's do idea. Give me the status. And you'll remember that's an enum, right? That's gonna be idea status. But we have this handy dandy label method that gives us a label for it. Super helpful label. All right, come back to the browser

Super helpful label. All right, come back to the browser and now we have an unattractive uh, pill or a little status label. Cool. So let's do this. Let's switch back. And I need a little more real estate. Good. So yeah, if I added a few more classes, these would be unique to our pending um, uh, status. So we have kind of a yellowish color, but pretty much faded. We have the opacity lower to 10%

So we have kind of a yellowish color, but pretty much faded. We have the opacity lower to 10% and then we have yellow text and a border. So now, yeah, if I were to come back and take a look, yeah, then maybe that's a little bit more what you might expect. The only thing I see here is I wouldn't mind a little space above it. So let's add some march on top of one just to push it down a little bit.

So let's add some march on top of one just to push it down a little bit. Alright, this is good. But uh, what about when the status is completed or in progress? Presumably the color will change, right? Maybe if it's completed it has like a greenish color or something like that. But right now we are assuming that all statuses are pending, which is not quite right.

But right now we are assuming that all statuses are pending, which is not quite right. Alright, so if I want a little more flexibility, what can I do? Well, I'm gonna extract a blade component. So once again, within the views directory, I'm gonna create within the components directory actually a new idea folder. And this will be, um, I don't know, status label, whatever you want.

And this will be, um, I don't know, status label, whatever you want. All right, so I'm gonna grab all of this. Once again, paste it in. I make it dynamic and all I wanna do is just reproduce what I had before. So I come back, can I now do, uh, status label? Yes, I can. Does this still work? I come back, yes, I see everything like I did before. Okay, so now though, I have a place

I come back, yes, I see everything like I did before. Okay, so now though, I have a place where I can configure things. I'll show you what we might do. Uh, we can add these PHP uh, directives and this is literally just opening up PHP and I could say, okay, my initial classes will be this, but minus all of the unique status specific styles. So I get rid of that. Cool. Then we can say, well, I need to know something like, well,

So I get rid of that. Cool. Then we can say, well, I need to know something like, well, if um, the status is pending, well then, excuse me, well then let's append two classes right at that point and make sure we add a little space there. Otherwise it would be font, medium, bg, yellow, uh, so we add a little space there. Okay, so now I could swap this out and we can say attributes

Okay, so now I could swap this out and we can say attributes and set the initial class to the classes. All right, but what about status, right? We haven't declared that, so it's gonna fail. All right, fair enough. Let's declare it as a prop. In order to use this component, you gotta tell us what the status is, but we're gonna default to pending. So now if I come back, there we go. Cool. So if we were to come back now, I could say, well,

So now if I come back, there we go. Cool. So if we were to come back now, I could say, well, let's say the status is if I hard code it completed. Well now you'll see we don't get any of the colors, uh, because we don't have any classes for that. Okay, cool. So now I can just update this. I'll do it right down here. And you don't need to watch this. I'll just paste it in. If the status is in progress, then we use some blue colors.

I'll just paste it in. If the status is in progress, then we use some blue colors. If it's completed, then we use our green primary colors, right? And these are the three that are supported. So come back and now, uh, we hard coded completed even though it's pending, so we see green. But yeah, if I were to hard code, what is it in progress? Come back. Now it's blue.

But yeah, if I were to hard code, what is it in progress? Come back. Now it's blue. Uh, but of course we actually want this to be dynamic. So I'm gonna send through the idea status. Okay, so now if I come back, there we go. We have a dynamic status label and this is looking pretty good. Let's, uh, just manually tweak a couple things from the terminal. I'm gonna open up our database and let's go into ideas

things from the terminal. I'm gonna open up our database and let's go into ideas and just tweak a couple of these. So we'll say the status is, uh, completed for this one. For this one, it's in progress. That looks good. Alright, come back, give it a refresh. And there we go. Now this is what I want. This one's completed, this one's pending. This one's in progress. Okay? But next, you know

This one's in progress. Okay? But next, you know what would be cool is if we had some filtering options right above it so that I can say no, I only care about seeing my completed one, so I click a little pill. Uh, ideally we'd have one for all three states here. How exactly do we do that? How do we allow the user to click a button that then filters the results on the page?

How do we allow the user to click a button that then filters the results on the page? Well, I'll show you how in the next episode.