Sidebar UI

[00:00:00]
>> So now we need to add the panel on the right so we can get ready for our sentiment stuff. So let's do that. We're going to do that in the journal ID page. So right next to the editor. So what we can do is we can just make this probably the easiest way is probably just to do a grid.

[00:00:22]
So we're gonna say grid. And you can say this has like a columns, or I'm sorry, grid calls of 3 like that. You're at this editor and a div. And we can say, you have a call span, Of 2 of that 3, basically. And then we can go down here and we can say this is where like the AI stuff will go.

[00:00:56]
All right, so just some basic Tailwind and you can see it's already sectioned off for us here. Pretty good. Let's just make a visual separation at a border left with a border black of like 5. I think that's the other ones are like 10 I think. There we go.

[00:01:19]
So now we got that visual border there. Cool. And then for the AI stuff, we'll just try our best to, I don't know exactly what I had on the last one, so I'm just gonna remake it cuz I don't think it was that crazy. If we had like a top panel at the top that had the word analysis on it then that would change colors.

[00:01:45]
So let's do that. So this will be like the color one. We'll just put a hard coded color in here for now give like a background of like blue 300 something like that. Give it some padding, so PX of 6 maybe and a PY of 10 and so just say, analysis, I'll just put a H2 in here.

[00:02:13]
Analysis, and it'll look something like that. The tricky thing with having the colors change is that it could be any color and some colors, depending on the color. The text has to be black or white. And cuz I don't know what color it'll be, [LAUGH], it's always gonna look back.

[00:02:35]
There's a way around it. I can force the AI to only pick one of these colors, but I didn't feel like doing that. But you could totally do that. And in that way, yeah, there's a way around it. I mean, there's actually a tool that will probably take a hexadecimal string and then tell you what color your text should be in order for it to be legible.

[00:02:56]
I guarantee there's an NPM package for that. We could probably use that to actually, that'd be the best package. If it bothers me, we'll do that. I'll just make the text a little bigger here 2XL. So we have that, everything after this is like a UL here, so let's make a div, a UL in here.

[00:03:19]
And each one of these LI's is gonna be something. So I think we had, what do we have? We have the subject, we had the mood, we had the summary. And then we had whether it was negative or not, right? I think we had those. Yeah, so this would be the subject so I can say, guess the easiest way to do this, it's just like make these a flex I guess.

[00:03:49]
I don't feel like writing a bunch of LI's so I'm just gonna make an array appear somewhere.. Because that's just annoying and I'll just say analysis data it's gonna be an array of objects and a name in this case we'll have subject like this. And we'll just hard-code it we'll just put an empty string here for now I got to turn this copilot off I can't just do that.

[00:04:17]
It's going to, I just can't do it. There we go. So we've got the subject there, and then the value will just be a string for now, and then we have the summary. Actually, I think the summary is first, yeah, and then subject, and then we have the mood and then we have, whether it was negative or not.

[00:04:50]
Cool so we got the analysis data and then we'll just loop over them with these allies down here. So, analysis data.map, get the item, and let's just make an LI, like that. And then, each one of these things in the LI, I mean, I guess the easiest way to probably do this is just a flex, so you can say class name.

[00:05:18]
Flex align, I'm sorry, items-center, and then justify-between. So they're on far ends of each other. [COUGH] And then, in-between the LI we can just do item we did two things. So we'll say, let's make a span and we'll say item.name. And then the next one will be item.value.

[00:05:52]
Let me change that to a word called false and not a Boolean called false. Save that and add a key so it can shut up and I'll leave it for a minute. I mean, it's really just us iterating over an array of objects and making some LI's. I do that a lot when I have like static data, because I'd rather write an array of objects than write 4 LI's, I don't want to write this 4 times.

[00:06:23]
It's just terrible because them I'm like, it's not styled correctly, I got to add some more classes. You got to do that in 4 different places, no. [LAUGH] Versus just doing this. And obviously, this data is gonna be dynamic anyway, we're gonna get this from the back end, but for now, yeah.

[00:06:50]
If you like, took this a step further and this is nothing to do what we're working on, but you can have like a data-driven UI. Imagine taking some data and using that data to describe a UI. You can have a UI that looks different for every single person.

[00:07:05]
Add some AI into that you can have AI create a specific UI for a specific person based off like the things they watch, the things they do, the questions they ask. This is something that I had to explore a lot when I was making a CMS, like, how do we allow people to create whatever UI's they want, and it basically came down to iterating over stuff.

[00:07:29]
Ok, cool we got that. Yeah I guess we wanna take this div with this UL and not put it in the div with a with a blue background. We'll put it after I guess. I'm just gonna do that. There we go. And guess we could just make these things look a little better.

[00:07:54]
So for the title here, I could just say give me this like a text large, and then text, semi-bold, the font semi-bold, I don't know, we'll see. I don't think that did anything.
>> It's fine.
>> It's fine?
>> Yeah, it's fine. OK, font semi bold. I guess we can add some padding to this because it's kind of gross.

[00:08:31]
So PX of like 2, there we go. And even some padding Y as well let's do like 4. There we go. And last thing would be like a border bottom, border top with a border black of 10. Cool, all right. Warm it up with some basic stuff here to get those fingers juices going.

[00:09:04]
>> Did you throw the border?
>> Yeah, so threw the border on the LI. So border bottom, border top, and then border black, and I did 10% opacity on the black. You can make yours look however you want. The design part is subjective, it's up to you, but that's the information I'm putting here.

[00:09:28]
Okay, so let's get everything that we need in order to have this analysis working. So before we can do the AI stuff, we need to have somewhere where this analysis is saved, right? So let's go check out our schema. That's where we save things in our database. So if you go here, We already have it we have a model called analysis.

[00:09:47]
You can see we have mood. We have summer we have color we have negative. What we need to do now is we need to generate this analysis every time the journal entry is changed. So when is the journal entry changed? Well, I guess once when it's created and then once again when it's updated.

[00:10:06]
So we need to go to those two places in which we're creating a journal entry on the backend and when we're updating a journal entry on the backend and create a new analysis. But before we could do that, we need to find some way to generate this analysis.

[00:10:22]
So that's where the AI stuff comes in.