Subscribe
Share
Share
Embed
Each week Adam & Ste focus on a specific feature, idea or prototype in Hardcover and iterate on it together or with guests.
Adam (00:02.614)
Hey, hey, stay, how's it going?
Ste (00:05.536)
Hey Adam, is going well.
Ste (00:10.452)
in the night. Yeah. How about you?
Adam (00:14.51)
Pretty good. Just been working on a bunch of like hardcover, like refactoring things that I've been excited to finally have time to do. So yeah, it feels fun to take on those like large projects that aren't gonna be done in a day, but because of that, you'll be able to make like a big refactoring improvement on the code base. So that's been kind of fun.
Ste (00:40.368)
Yeah, it's good. We do have a bunch of those in the pipeline. So today is us working on one of those, which is the list page. And yeah, I feel like we've got like a bunch of big projects happening at the same time.
And it's been good that we got the results from the state of Harcover survey, so that's put a bit of clarity into what we should build next. And maybe today, apart from the list page, we can also briefly touch on what we're planning to do with those results.
I feel like we had a lot of good feedback from the readers on hardcover, and feedback for the top feature for the dashboard as well.
Adam (01:47.882)
Yeah. I think, uh, one way I'm thinking about it right now is like, um, you know, we, we have the things we know about that. We kind of just need to do just like housekeeping and bugs and just general UI things, making the site. Faster, better improving what we currently have. And then we have like from the survey, we kind of found out we have some, like kind of
Easy wins, like things that we thought weren't going to be that big or that people weren't going to be that interested in, but now. Since people are interested in, we can probably do some of those pretty easily. And I'm thinking like the top two are like the dashboard and the, uh, like new releases, calendar notification, something to let you know about new books. And, and then, uh, yeah.
Ste (02:39.571)
Mm-hmm.
Adam (02:42.294)
I th those are at least the two that stand out. And I, I like that the dashboard kind of ties in with some other things we've been talking about for like library and tools as well.
Ste (02:53.132)
Yeah, and I think another thing that's very good is that some of the feedback we've been getting aligns with what we're going to talk about today, the new list page, because that's kind of pivotal to how we show books throughout the site. So nearly everywhere you see a collection of books in hardcover, somehow it's a list.
and it uses a display of a list. And historically, after the version one of the list page, then we had the error lists, which is the really highly functional version of lists that we tried to do to make a page that's more functional than the page of our list.
any of our competitors network. And we kind of did that, but now, um, I think using that list in various places on the website, some things stood out related to how it can work better. And that's kind of where we're at and why you want to improve it. And it's cool because, uh, improving it meant that very
You will see this on many parts of the site. Your want to read currently reading lists, our list pages, your lists, our list pages, other people's lists, list pages. Yeah, it's all lists.
Adam (04:43.198)
as well as the books you've read in a goal, the books on a prompt, the books in a series. Trying to think, oh yeah, the books for an author. Each of these is a list of books. And yeah, I think what we've been trying to figure out is right now on hardcover, because of the context and how these things are set up, currently,
Um, they start from a different place. Like authors starts from an author series starts from a series. Your books by status starts with a, like a array of your books that you've saved. So it's, it was, it's been tricky for us to try to get uniform functionality when we're not talking about a uniform feature or like a starting point. So a lot of this feature I see as re-imagining it as
We have a set of books. What do we want to do with that set of books, wherever we have it? Um, and that becomes things like, um, yeah, like what, uh, what stands out to you from that, like, what are, what are the things that you've heard that people want to do with a, a set of books?
Ste (05:55.22)
Well, we have a lot of power readers on hardcover. So that means a lot of books in a list or a lot of books in your want to read list that you want to organize. So bulk editing is one thing people really want from lists. Imagine you have like.
I want to read a list of a couple of thousand books. There are many readers who have those on hardcover and you want to have control over it, but you want to also bulk edit it and you want to do all sorts of things, uh, really easily. And, uh, yeah, that's like one big thing. Uh,
Adam (06:38.03)
Yeah. Bulk editing is a big one. Like I've been, I've been reading, uh, invincible, the comic, uh, catching up on it because the new season just came out on, uh, Amazon, uh, and, uh, it's like, I was trying to mark all of the single issues as red and I'm on issue 52. And so to, to mark 52 issues as red, I would need to like, go to the book button, expand it and click red. And then maybe give a rating for 52.
issues, but I would love to be able to just like, so a, you know, select all, or maybe like select the first one, hold shift and select the 52nd one. And it selects all of them between those two. And then Marcus read.
Ste (07:08.705)
Yeah.
Ste (07:21.012)
Yeah. Yeah, exactly. I mean, more or less, it's got a function. Like you're doing it in Finder or in Explorer, kind of like an OS. And people have been requesting that. And I think it's definitely doable.
And there's also the way you filter lists, which is kind of tricky. The way the thing with lists and the way they span throughout the website is.
thing that's tricky is that they have to be really simple in some cases and very, very complex in other cases where you want to control, edit, but they have to be really simple when you just gotta have a glimpse at, you know, a list of books. Maybe it's just a shelf and you just want to see some covers and some titles. It can be just that. So that's the, I guess, the tricky part.
When you get to the more complex cases, how do you do that without like jamming everything in the same page and making it so that it's nice to watch, nice to edit and also like really easy to get where, where you want. So yeah.
Adam (08:46.31)
Yeah, there's so many different ways you can sort and filter a list. So yeah, it seems like the features we have right now for Letterboxd, or for Letterlists, or Airlists, are, so you can change the view of the list, so you can have it in shelf view, card view, or table view. So I think...
Ste (08:57.232)
Mm-hmm. Yeah.
Adam (09:14.526)
Maybe like one of the questions I have is like, do we continue allowing that toggle between things in this list with those three options, or do we want to change that at all?
Ste (09:29.048)
Yeah, that's a good point. I mean, if you want to basically shuffle books on a list really easily, the shell view I think is good for that if we implement the dragon's reorder mechanism. The card view would be good for
selecting a level of detail that's higher than the table view than just like viewing books one underneath the other. So that would make sense. And of course there's the table view which is like the default view. So I think every one of them has its purpose but I think the table view stands out. So...
if we were to keep a view. I think that would be it. I'm not sure.
Adam (10:34.354)
Yeah, especially for things like multi-select. I feel like TableView works the best for multi-select.
Ste (10:42.596)
Mm-hmm Yeah, it does also depends on let's say you have a book a list with 100 books Dragging something from 99 to like the second position In a table view it might require some scrolling and it might be like pretty shaky. So
if you'd have the same list and it would just show covers and would figure out a way to just like drag a cover from here to there, I think reordering would be cool if you just had like that shelf. Plus, to me, the shelf view is...
interesting because it kind of mimics how you'd have the books in real life. So in real life, you wouldn't have like a table of books. You'd have like that shelf and for like display purposes, I'd have it there somehow, but we can maybe decide like to not show it or to access it in some other way.
Adam (11:58.77)
Yeah. I'm down to keep all three. I think, uh, I think one feature of our current setup that I'd be good cutting is, uh, right now you have the ability to change the size and maybe we, maybe we just get rid of that. And like, we have one standard size for. This is what a cover looks like. This is what, oh, wow. It gives me a thumbs up in the video here when I gave a thumbs up.
Ste (12:12.48)
Oh yeah.
Ste (12:22.332)
No. Ha ha ha. Here we go.
Adam (12:24.458)
Those like video effects I'm still getting used to when like a video like jumps in and like oh this person's thumbing someone Up I'm gonna add that to the video
Ste (12:27.813)
Yeah.
Ste (12:32.152)
Yeah, I don't even know how it happens. How did that happen? Someone thumb you up in the chat or did it just like...
Adam (12:38.887)
No, I think it was just a riverside thing. Kind of like.
Ste (12:42.792)
Okay, here we go. It doesn't work for me. My thumbs up is not like It's not functional
Adam (12:51.772)
Your thumb up is broken.
Ste (12:53.232)
Yeah, why is it not working? Okay, yeah.
Adam (12:57.627)
But yeah, having like one standard size for each of those, I think that'll, that cuts it down from nine potential ways of viewing it to three. So that'll make it significantly easier.
Ste (13:08.448)
Yeah. I definitely like it to be more opinionated because customizability is good, but yeah, I feel those are extra and it's better for us to design three good ways of showing them instead of having like nine ways that are pretty shaky in various cases. Yeah.
We could maybe jump into the design so everyone can see the actual state it's in right now. And yeah, maybe we can work on those. Should I share my screen?
Adam (13:43.278)
Yeah.
Adam (13:47.726)
Sounds good. Yeah, it's all in Figma, right?
Ste (13:52.852)
Here we go.
Ste (13:58.2)
Just a second. Okay. Science share, here we go. Okay.
You can see it, right?
Adam (14:12.826)
Yes, I'm seeing the New York Times 50 best memoirs.
Ste (14:17.456)
Yeah, that's it. So this is how we left it last time. We've put a few menus hidden and the things which were in tabs, right now we place them in various contextual links over here. So...
If you'd want to see the bookmarks, you'd see the readers that bookmarked it. And this is how it looked initially. You'd have these, but now it's cleaner. You don't have the tabs.
Adam (14:58.354)
And I think one of the ideas is that this area right here, like basically the books themselves and the headers above it, those are what we could reuse anywhere we show a list of books. So this part would be the same on a series page, although we might change what it means to be an individual card here, or like a...
Ste (15:16.73)
Mm-hmm.
Adam (15:26.87)
like, you know, a prompt one would have a little upvote. If it's somewhere else, it might have a different row here, but that's, it's the same. This part's kind of the same across all lists of books.
Ste (15:43.204)
Yeah, the header might change various things like, yeah, like you said, the upvote and downvote thing might change, but pretty much this is it. And the filters would be integrated somehow. I don't think we've settled because...
They were either filters that come in from the side and are different depending on what you click, or they were filters coming in from...
Oh, no. So actually, this was the sorting. And so the sorting, because there are less options, would have been a drop down. And the filters would have been a side drawer that on mobile would turn into something like this.
Adam (16:43.714)
Yes, that's right. I'm remembering this now. You know, we did this quite a few months ago, but I'm looking at it now and I still like it, which I think is a good sign. Ha ha ha.
Ste (16:52.364)
Yeah, we didn't do too bad of a job. So it's good. It's a, I think it's a good litmus test if you can come back to a design and, yeah, just get, get what you were trying to do. So that's, yeah.
Adam (16:58.275)
Yeah, like overall, yeah.
Adam (17:03.854)
I'm gonna go to bed.
Adam (17:08.53)
Yeah. Like I was, I was a bit, I was a bit hesitant about the, or I guess the part that I'm most hesitant about this, but I still don't see a better solution for is the filters pop-up because I feel like if we did that in some kind of drop down, then it becomes very difficult. Like currently we're doing it in that drop down and it's, uh, it's feels like you're like setting all these settings in this little, like little programmable panel. Oh.
I typed, like I was typing on a tiny keyboard, and all of a sudden in the video, hearts came up for some reason. So, it's the second time today. Yeah, it's difficult to kind of like use that, or imagining this whole sidebar that we have here in a dropdown menu or a popover. So I still do think this is kind of our best option. And then in mobile having it as this bottom drawer.
Yeah, I think it works on both
Ste (18:09.32)
Yeah, I was looking at, I mean, I think our main inspiration was Letterboxd. I'm a bit curious how Letterboxd does it on desktop. So over here, for filters and for sorting, they got way more options for sorting. They have this on desktop. It would be interesting to see.
Adam (18:21.109)
Oh yeah.
Ste (18:35.52)
to check out how they did it for the web app.
Adam (18:41.432)
What they're doing on desktop is me, I'll jump to where you are and drop a screenshot here. It's a.
It's a little different because they don't have as many filters on desktop as they do on mobile. So it's kind of interesting because their desktop app is very limited in what you can filter. So, for instance, here I just dropped it. So you can you can you can only filter by release date, genre, and they have an option for service, which is like what like if it's available on Netflix or.
Ste (19:06.852)
Oh, here we go. Okay, yeah, I remember now.
Adam (19:21.134)
Hulu or whatever.
Ste (19:24.388)
Oh yeah, compared to... yeah. Yeah, that's weird, that's a weird... solution, because on... I mean, look at this, on mobile they have, like, here, genre, country, language, released language. There's a whole bunch...
Adam (19:24.55)
And that's, that's really it.
Adam (19:38.158)
So many. Yeah, but you can't filter by language on the website, for instance, but you can on mobile, which is, it's an interesting choice.
Ste (19:49.908)
Yeah. Usually it's the other way around, but yeah, definitely. I'm guessing, you know, they have two separate like code bases. Uh, and probably like maybe the mobile one is newer because I mean, even this drop down, it's pretty good, but you know, it could have been better, I guess. It's a long job. Uh.
Adam (19:54.146)
Yeah.
Adam (20:16.022)
Yeah. And it's, yeah.
Ste (20:17.692)
If we'd put all the genres and subgenres there, yeah, it would be never ending.
Adam (20:24.341)
Yeah.
Yeah, I think if we want to have more options, then having it here on the sidebar is good. I was thinking about one other thing. Let me drop another screenshot next to the letterbox one. So here is our current.
Ste (20:35.498)
Yeah.
Ste (20:45.62)
Mm-hmm.
Adam (20:52.882)
search page, which has some parallels to what we're talking about right now.
Ste (21:00.532)
Mm-hmm. Yeah, exactly. I was about to mention the exact same thing that, you know, we could put this somewhere as a sidebar. So, yeah, it would basically, I mean, a crude version of it would be this. Or just like have it as a sidebar for the whole page, like we do on search.
Ste (21:29.56)
But yeah, I don't know. I mean, I like this first search because it allows you to quickly do things. But I think the problem I'd have with it is that there's already like a lot of stuff going on over here. If we put a sidebar here, it would...
Adam (21:42.295)
Yeah.
Ste (21:57.372)
get like really, I mean, imagine have this and this.
Adam (22:03.387)
What if it were like a collapsible sidebar? Like instead of it showing an overlay, like when you click on filters, instead of having it look like this, it more like looks like it expands it out and shows them here, but then you can hide them again.
Ste (22:24.948)
That wouldn't be too bad, I mean, it's kind of like...
Adam (22:27.854)
Because then you could do a filter, see the results, do a filter, see the results, do a filter, see the results, without having to reopen the sidebar, without having to reopen the popover every time.
Ste (22:42.3)
Yeah, that's true. Um, we could even like push the content, you know, I ha I've seen this done on a couple of apps where they have the collapsible sidebar, uh, and it's not just for over here, I'm a bit worried about like this will degrade very fast at lower resolutions. So.
an iPad will probably jump pretty weird when it gets...
Adam (23:16.054)
we'd probably have to go down to the drawer in iPad and lower.
Ste (23:22.692)
Yeah, that's true. Yeah, it would maybe that would be better.
Adam (23:28.846)
So this would only be for large screens and larger.
Ste (23:34.38)
Maybe it could be just like something like this and it comes from the side for the whole page. Or over here, yeah.
Adam (23:46.222)
I think I could see something like that. And I mean, I don't love that it has to make everything else smaller for it to work. Cause if you are building a table and the table has a lot of columns, I guess that's another thing to figure out for us is like, like right now for the airlift.
Ste (23:57.256)
Uh huh.
Ste (24:05.447)
Uh-huh.
Adam (24:14.122)
you can select which columns you want to see. And I'm like on the fence about that feature because it is really neat to be able to say like, oh, I want to see these specific columns of this table, but it's a little crazy how many things you can show.
Ste (24:31.794)
Mm-hmm.
Ste (24:37.12)
Yeah. What would be a good way to... I mean, we could include the column functionality. This is like the first prototype we had with... I mean, it was like pretty basic. We could show the columns either like in a sidebar like this or like this, but...
If we were to ditch it completely, would we just show all of the things or just like make our own selection of what we think is important?
Adam (25:18.142)
Yeah, maybe we should just have a set easy library of columns and just have that. Because I feel like I don't know enough about what specific columns people would want to see.
Ste (25:35.068)
Yeah, I think.
Adam (25:39.682)
especially for table view, I think for the list view or for like the card view, I think we kind of know what people want to see for like a snippet. But when you're in table view, you're kind of exploring and you're kind of coming to the list with a problem in mind. And that problem, you might need different data for it depending on the problem.
Ste (25:55.24)
Mm-hmm.
Ste (26:01.616)
Yeah, that's true. And I'm just like adding columns over here. The thing is we already have that functionality and I have a hunch some people who read a lot of books use it.
to filter, to add and to remove columns they're not using. Would that be useful for bulk editing? I mean, would those columns be editable? Would you, for instance, be able to show ratings and bulk edit them and then like...
Adam (26:28.869)
Mmm.
Ste (26:42.012)
If you don't want, maybe you want to add reasons for why you read some books, could you just like remove the ratings and activate that column? I mean, that's how it would work, right?
Adam (26:56.446)
Yeah, that's what I was thinking. Like for bulk editing, you would add the, add the bulk edit column or whatever we call it. And then, uh, that would show up as like a checkbox and then. Yeah. So it would like show up as a checkbox kind of like here for every column.
Ste (27:04.973)
Mm-hmm.
Ste (27:16.824)
Could we just maybe hide some columns without like having that as a separate control if it makes sense? I'm thinking about if we had like the table with all the columns, maybe collapse some of them, but have them.
Adam (27:38.542)
Hmm
Ste (27:39.952)
always active, so you wouldn't be able to like remove them, you'd be able to just hide them. Or maybe we can just like let people reorder them so they can just drag the columns they're most interested in first.
Adam (27:56.27)
Yeah, because that's kind of how it exists now. Let me jump to where I just was real quick. And we have this option here. And this is kind of how you're, if you jump to where I am, you'll be able to see it.
Ste (27:58.24)
How does that sound? Does that sound? Yeah.
Adam (28:29.774)
So this is like, these are the columns that I'm showing, these four in yellow, and I can click and drag these to reorder the columns, or I can add any of these other columns. So yeah, this is kind of the feature we're talking about here. And yeah, being able to reorder these and add kind of design your own interface, yeah, I'm down to keep this feature. I think, in the worst case, we would like clean up some of these columns and make it easier, but.
Ste (28:39.486)
Uh-huh.
Mm-hmm.
Adam (28:59.103)
Yeah, I think.
I think functionality functional wise, I, I do like this feature.
Ste (29:08.144)
Yeah, it's pretty good. Then we have it. So maybe, I mean, in the actual table, would you be able to do this? So instead of opening this and dragging these, would there be an option to actually drag the columns from the main interface without the columns?
Adam (29:30.27)
Yeah, yeah, we could make it so that the only way to drag them is by clicking and dragging the column headers. I'm down to switch to that.
Ste (29:39.44)
Yeah. And just activate or deactivate columns from, from here. I think that might make more, more sense. It's more direct.
Adam (29:46.554)
Yeah, what if, yeah, what if, like on, like here, like within a column, there's like an X to remove them. And then at like the end of the table, like the last column, there's like a little plus sign. And then plus just allows you to add new columns.
Ste (30:05.681)
Oh yeah, that's.
Ste (30:10.108)
Yeah, that's a good, I was, that's what I mentioned before, but I haven't, I didn't have a way like to visually do that, but that's perfect. So you could dismiss them. I was thinking like how you could hide them and then reactivate them, but that, that makes sense. Yeah. Just like Exum and then add a new one. And you just, I guess have like when you click plus something like this, right?
Adam (30:35.87)
Yeah, or maybe something like that, but in a, it could be like instead of with the expand down, maybe it's like a left right thing. So like you click author and it, you know, author goes to your left and a new list of author fields comes up kind of like in the bottom drawer.
Ste (30:56.956)
Nice, yeah, that's perfect. That's, that would be really nice. And we remove this. It's way better to like add direct controls instead of like adding this layer.
Adam (31:08.754)
Yeah. I think that sounds exciting. Yeah. And easy to use.
Ste (31:14.692)
Okay, let me see. Let me actually just add the comments here. So, plus, no, not this. Oh, God damn it. Plus, plus for adding a new column, x for removing a column. And the moving...
Adam (31:41.305)
Reorder column, yeah.
Ste (31:42.6)
Yeah, the reordering column icon, drag button. Here we go. Yeah, this is great. It's gonna make the table view very, very easy to use. And the bulk editing maybe we'd keep by default I'm thinking or...
Adam (31:55.008)
Yeah.
Ste (32:12.54)
That's the only one where I don't see how it would work apart from having a column. Let me see if it's over here. Column where you could tick. So yeah, let's imagine this is like a ticker and you would tick or select multiple columns. And then you'd be able to do bulk editing on them. Is that? Yeah.
Adam (32:13.294)
Hmm. Yeah.
Adam (32:39.242)
So yeah, so one thing that was coming up or one thing that came up in the last version was like the reorder feature. It's actually like a separate view. So it's like, you know, we have shelf view, card view, table view, and reorder view. And reorder view is really just like table view but with another column at the front.
Ste (33:03.76)
Yeah, basically this, right?
Adam (33:06.822)
Oh yeah, so yeah, this was like the letterbox way. Like if we wanted to make it so that to reorder a list, you would go to edit it rather than doing it here on the visible list. And I think I do kind of like, yeah, I'm split on it. Cause I mean, it would be easier for the user to never have to go to edit, but I think it kind of does make sense in edit cause you are editing the list. Like...
Ste (33:18.855)
Mm-hmm.
Ste (33:32.293)
Yeah.
Ste (33:35.536)
Well, I edited where it's at. It feels more natural in a way that, you know, when you'd go to your bookshelf and reorder things, it's kind of like you don't go to a separate editing mode. If we could have the table view and let people reorder it directly from there, I guess...
It would be easier than them having to go to the editing mode, edit it, and then come back. And maybe they decide, you know, I edited this wrong, so I'm going to go back to that view. It's, it's, I feel it kind of like would eliminate the step and would make it easier for people who do editing. I'm guessing it's like...
Yeah, it could be easier from here if we find like a good way of doing it, like dragging to reorder rows, that would be like the easiest way of doing it.
Adam (34:36.512)
I think.
Adam (34:42.824)
Yeah.
Adam (34:49.482)
Yeah, so it's just kind of always reorderable if you're the owner of the list and it's a ordered list. So it would almost be like, if it's an ordered list, we would always want to show the list position as a column. And then...
Ste (34:58.625)
Yeah.
Ste (35:08.656)
Yeah, exactly. And maybe so you'd have the drag to reorder, and you'd also have this field where you could just change position from here.
Adam (35:21.858)
Yeah, so it's like the rank is just editable or the position is editable.
Ste (35:23.485)
And...
Ste (35:27.225)
Yeah. It could even be like a separate column. So if you'd rather not like edit this, you'd have like, like kind of a combo of what we have here, kind of like this.
Adam (35:42.986)
I think, as we're talking about this, I'm remembering more about why we moved it into the edit page. And a big reason is this reason section here, because we have this option for why each book was added to each, added to that list. And we, like right now, we have a column called reason. And if you add the reason column to a list,
Ste (36:00.704)
Mm-hmm.
Adam (36:11.286)
then you can edit the reason a book was added to a list. But I feel like very few people notice that that's there because we've kind of not optimized it to how people do it. So it's almost like you're going into, like when you're reordering or you're adding a book to a list, it's kind of, yeah, how do we show that in an easy way without using a separate edit page?
Ste (36:23.816)
Yeah.
Ste (36:37.576)
Yeah, I think it would be like the same. Obviously, putting it here, people who would go into Edit Mode would see, oh, OK, I can add reasons. That's perfect. But I'm wondering, is there a way if we did it in TableView where we could surface that column so people find it easier?
And I'm also thinking about the card view because maybe the card view is a good place to add that reason. So in card view, maybe instead of this, this would be like reason added. Um, I was trying to think like what would make the card view attractive and maybe this is it because else it offers no extra info other than.
what you see on the table view. And of course, we could have it on the table view as well. And maybe by default, we activate it and maybe put it right next to the title. So it's kind of similar to how it shows over here.
I feel like it would be easier to edit it directly over here to not like have to go to edit mode, save, come back to the table view or card view if we put it there as well. What do you think about that?
Adam (38:08.622)
I think it depends on how we trigger the change from being a viewer of the list to being an editor of it. Because right now, we would still need some way that makes it clear, like, hey, I'm ready to start reordering this list. How do I start reordering this list? Or how do I?
Um, like add a reason for why a book was added. If I'm just at the, at the view step, I feel like putting it here in edit kind of makes it very clear. Like they don't have to know that. Uh, like if there's a reorder button or maybe we changed the edit button to like edit and reorder if it's a, if it's a ranked list and then for every other book, it's just edit.
Ste (38:58.836)
Yeah, that's true. Well, what if you're the owner of the list, we just put fields, like an input field here, where you could directly add the reason, and it would update it without having to save. I think the saving step is a bit, this is obviously like a more, let's say,
settled experience and You would like spend time adding reasons and reordering and then saving it But Yeah, I'm wondering if I mean yeah, maybe this is cleaner maybe this is cleaner and if we somehow
Ste (39:54.904)
think this is too much or people are telling us, okay, I just want to both edit everything from the table view. I don't wanna go like into that separate screen. We can...
fall back to trying to like integrate it here. But yeah, since we have the set screen, I might
Adam (40:17.556)
Yeah.
Adam (40:23.21)
Yeah, I'm, I, cause I think we, we did something kind of like what you're describing on our current lists. And I think people have struggled to figure out how to use it because very few people add reasons for why something was added to a list. But that might also be like, we also need, we might also need something from the book button when you're adding a book to a list to be able to get a reason there as well.
Ste (40:51.796)
Yeah, yeah, I was just thinking about that. It would like, this is one touch point, but yeah, it would ideally be like when you're adding a book to a list, you'd add the reason as well. Hmm.
I guess that would be TBD because adding a reason means adding text and adding text in the drawer while you have the keyboard open. That's like, yeah, we've seen that that's not ideal. So maybe like it's a separate page or an intermediary step.
Adam (41:08.726)
But that's, yeah.
Ste (41:34.492)
Although, you know, we wouldn't want to ruin the experience that you have on Harcov right now, where you can add books to lists so easily just using the button. So that's a good point. If we have it here, I think that's OK. But yeah, maybe this is a thing we can do last and see if we get other ideas.
Adam (41:47.285)
Yeah.
Adam (42:02.358)
Yeah, yeah, I'm down for that.
Adam (42:07.51)
But yeah, I'm still looking back at this. I'm still liking this setup for this page. I think we kind of used what Letterboxd does for their lists and kind of, they also do reordering from the edit page as well. And one thing that they have that we're also adding here is that if I remember right, this add a book button,
that would use a component we already have that pops up a modal. You can search for a book, you click plus on it and it adds it to this, this list. Or I was thinking, what if instead of having it show up in a modal, we just have it like, yeah, just like a, you know, had a book to this list or something. Probably not.
Ste (42:43.221)
Mm-hmm.
Ste (42:55.152)
Oh yeah, just yeah.
Ste (43:03.644)
Yeah, of course, yeah.
Ste (43:13.428)
Yeah, I always get to eliminate the step. So.
Adam (43:21.586)
Yeah, and that would just be like an autocomplete drop down. You add it, and it would add it to the very bottom of the list.
Ste (43:30.172)
Nice. Yeah, this is perfect. And could we, instead of the one, instead of the book button, have like a plus button, so it would like directly add it to the list, I'm guessing, like, why would you have to go and add it to the lists through the book button in the drop down?
Adam (43:49.686)
Oh, so I'm imagining it would be kind of how we have prompt, like adding a book to a prompt. So yeah, it's like a little like a. I'll, I'll drop something in here to.
Ste (43:56.768)
Okay, that's perfect. Yeah, I know that.
Adam (44:07.15)
I feel like every time I take a screenshot, it's like a race to get to somewhere before the screenshot disappears and I have to go find it and find her. Yeah. I just added it right below where you are. Yeah, it's, so nothing in that, yeah. Yeah, like nothing in that row would be clickable, like any, or to navigate away, everything in that would just add it. Of course we could.
Ste (44:16.281)
Yeah, I know those struggles.
Ste (44:21.944)
Oh, here we go. Oh, yeah. Yeah, this is perfect. Yeah, exactly. So yeah, this is the one I was talking about. That's perfect.
Adam (44:36.21)
restyle this as a drop down instead of as a modal.
Ste (44:39.836)
Nice, yeah, this is perfect. I just saw this. This is like potentially something we could do after, or when you add some book to a list. Maybe this is like another page, an intermediary page or a popover. We'll have to see, but yeah, this is like book button related, so maybe it's like the next step. Other than...
Adam (44:53.057)
Mm.
Ste (45:09.388)
that what would be like major things that we could do to it because I think other than like where to put this filter bar I was thinking maybe we could like design the views like an updated version of those.
Or we could do that.
Adam (45:38.838)
like an updated table view.
Ste (45:42.408)
Yeah, the table view and the card view and well, the shell view is pretty much there.
Adam (45:42.722)
But yeah...
Yeah.
Adam (45:52.286)
Yeah, I think that's pretty much the last step here, is creating a much better table of view than the one I think I probably initially created for the air list. Yeah.
Ste (46:06.648)
Haha, yeah.
Adam (46:11.562)
But yeah, aside from...
Ste (46:11.68)
I'm guessing let's design that and yeah, not, I was thinking we could do it directly in the UI because we're using like a library for that table view, right?
Adam (46:24.782)
I'm not sure actually. I think I like before I was using a library for our current tables, but I think I'm gonna not use a library for it. The one of the problems I had with the library that we did use, which was a React TanStack table, which is a super powerful library. But the problem is that we're kind of moving towards rendering as much as possible on the server. And so if we're just showing like,
20 books, and then all of the sorting functionality we're handling on the server, all the filtering we're handling on the server, all of a sudden something like 10 stack table becomes much less useful to us. So I'm thinking this'll just be just listening, like just looping over 10 books in a React array and outputting them as either table rows, card views, or shelf.
Ste (47:07.369)
Uh-huh.
Adam (47:23.014)
And yeah, we can get rid of a lot of JavaScript that's loaded on this page. And I think that's probably one of the things that most excited about is just like deleting a lot of code.
Ste (47:33.364)
Nice, yeah, that's always refreshing. That's perfect. Well then, let's design it from scratch if we're not limited to a library because I have to look at some older designs for the table view, but if we can do it from scratch, yeah, that works. We can make it so that it looks...
way better in every view, including the shell view. I had some ideas for that. And I also found a library that makes it really easy to drag and reorder without having any lag. It works well on mobile as well. So maybe we can check that out. I'm thinking for shelf view. That's the most.
Adam (48:18.574)
Hmm.
Adam (48:25.614)
Nice.
Ste (48:32.88)
interesting option, but I mean that would only work if I'm guessing... So reordering would just be in the editing, we wouldn't like have any reordering going on like in the views, right?
Adam (48:50.986)
Yeah, at least for the books within the list, we could still potentially reorder the columns in table view, but not the books in the list.
Ste (49:04.912)
Okay, yeah, that works. Then we can just like keep it as a view for people who just wanna see the covers.
Adam (49:16.407)
Yeah.
Ste (49:17.864)
I guess that's a browsing experience as well. If you want to find the book that, you know, the cover of you can scan them and okay, this is the book I added to the list. So yeah, that's cool. And it doesn't take up too much space. Like the views can be there. The table view is like the primary one. So we should be good.
Adam (49:39.146)
And I thought of one other thing on the edit page that might be neat to do, because right now we don't have a great way of how we do this. So, you're creating a list, you add a bunch of books to it, you're ready to share it with some people, and what view do you want people to see when they visit this list?
Do you want them to see the table view? Do you want them to see the shelf view or the card view?
Ste (50:13.852)
Well, yeah, that's a good question. I was actually wondering if we can have that in the actual URL and have it as a parameter. So whatever URL you'd share, it would direct you to the specific view. So clicking on the card view would add the parameter to the URL. And when you'd share it.
it would default to the card view, but I'm not sure. Would that be like feasible or?
Adam (50:51.302)
Oh yeah, I'm definitely planning on doing that. And so I guess the last question is like, what happens at the default one, like at, you know, list slash slug before, before you've edited it, anything, how would it look initially when it loads as, because we might have a slash table, a slash shelf and a slash card, or yeah, card as three options, but the root one,
Um, cause right. Cause, cause, uh, one of the things is that like, if we do, like we could allow them to set that in the edit form, like what, what is the default view you want people to see when they access this list and then they select table shelf or card, and then we just load that view by default.
Ste (51:22.042)
Definitely the table one.
Ste (51:50.182)
I'd have it like if they are on the...
table view and they share the table view, the other person who receives it will see the table view. If they're on the car view, they will see the car view, or if they're on the shelf view, they would see the shelf view instead of like letting them default. So I think the view option should remain with the viewer. So if someone like,
wants to share the shelf view with someone, they'd see the shelf view, but they could change it. And that would change the URL. Or is this not the question?
Adam (52:35.834)
Yeah, I'm thinking like, you know, if someone's looking at my list of books on hardcover, those are effectively lists I've created to share with people. And I might have a different intent for each of those lists. Like I want people to view this list as a shelf. I want people to view this list as a table and this list as a series of cards. So when they click on that list from my list page, like it's the first list that it's the first view that would show up for them.
Ste (52:41.069)
Mm-hmm.
Ste (52:45.473)
Yeah.
Ste (52:56.693)
Okay, yeah.
Ste (53:01.385)
Yeah.
Ste (53:05.733)
Mm-hmm. Let's...
Adam (53:06.622)
And maybe if they don't default it, we default it to table if they don't set it or something like that.
Ste (53:12.248)
Uh-huh, we could just... Yeah, that's right. That's a valid issue. You might have some lists which you just want. We could just do this and set the default view.
Ste (53:33.732)
And.
Ste (53:37.708)
Have it here.
Adam (53:39.326)
Yeah, I think that works.
Ste (53:42.74)
There was some extra space, so this fills it in really nicely.
Adam (53:49.478)
Yeah, it's easy enough and then we don't need to worry about like what columns are shown and then we can just set it to the default columns and then they can, you know, the viewer can decide what columns they wanna see if they wanna change it.
Ste (54:05.788)
Yeah, exactly. So let me put this here. Maybe it's like table cards.
Ste (54:20.428)
shelf.
Adam (54:32.982)
Yeah, and maybe if they have list reasons for the items in the list, then we default to showing that column. Otherwise we don't show it.
Ste (54:43.653)
Yeah, that makes sense.
Ste (54:48.28)
I just have to remember to like change the color but yeah this is looking good yeah you're right good shot you might want some people to
Adam (54:56.18)
Yeah.
Adam (55:02.146)
Thank you.
Ste (55:03.184)
land on a default view and then change it if they want.
Adam (55:09.966)
Cool. Yeah, I'm getting really excited about this feature. Like I, it feels like it's everything we've learned in the past like two years about lists.
Ste (55:10.449)
Okay.
Ste (55:18.896)
Yeah, that's a major thing. I remember when we first like worked on the list page and that seemed exciting because we did so much. I think this is like, if that was, we had version zero, we had version one, which is what you're seeing now. I think like this version two really like puts into play many of the things we've, we've learned these past years. So.
Adam (55:46.367)
Yeah.
Ste (55:48.368)
It's definitely gonna make things easier and yeah, it includes things that many readers on hardcover told us they want so yeah pretty good. When is it finally gonna be live?
Adam (56:08.406)
Let's see, so right now I'm finishing up some refactoring and I'll probably start on this as the next feature after that. And I'm thinking, like, I'm hoping to get it out this month because I'm going on that vacation in April. So my hope is to just wrap it up before then. And then...
Ste (56:30.896)
Oh yeah, that'd be great. I mean, if we can focus, I can come in and work on the styling and the new thing. So yeah, if you get started on that, we can, we can sync and it would be great to ship it until the end of the month. And it's gonna change a lot of...
Adam (56:51.274)
Yeah.
Ste (56:58.54)
how hardcover looks because yeah, it's lists all the way down.
Adam (57:05.33)
Yeah, I have a feeling that once we start getting into like adding these to individual pages, it'll make us want to change those pages as well. Like, you know, once, once we update the author page to show this new feature, we're going to be like, now the rest of the author page needs help. And so
Ste (57:15.208)
Yeah.
Ste (57:22.192)
Oh yeah, definitely. I mean, it's good that, you know, I mean, it's planned and, uh, I think the changes won't be like, uh, they will, they will go pretty fast. They're mainly layout changes. So, uh, they will make the experience way more, uh, way nicer and feel like way more put together while on our ends, like there wouldn't be like any.
very hard to code features, just moving stuff around.
Adam (57:53.426)
Yeah. Very cool. Well, yeah, this is this is good. I think we're I think this is ready to start being worked on now. So, yeah, I think we're in a good spot for it.
Ste (57:56.)
Nice.
Ste (58:06.848)
Yeah, that's perfect. Yeah, this was good progress. Thanks for everybody who joined and who's watching this afterwards. And yeah, I guess see everybody next week.
Adam (58:14.254)
Thanks for watching!
Adam (58:18.91)
Yeah.
Adam (58:24.322)
Sounds good. Talk to you next week. See ya.
Ste (58:26.656)
Yeah, see you. Have a good one.