feat: Adding more informations on My Shares page (table and modal)

[pierrbt]

The description of the share is now displayed out on the table of My Shares page and by clicking the new button Information, a Modal pops out, on which you can see multiples informations about the share, as shown below.

This Pull Request is related to the Issue #164 . Do not hesitate if you have any other ideas to add on the page, or if you want to modify these changes.

Images :

[stonith404]

Awesome work, thank you!
A few things that I have noticed:

• Is the copy link button in the table still necessary? Because you can copy the link in the model. If you want to remove it, I would change the color of the info icon to the primary color (purple)
• Don't you think we could completely remove the author property in the model? Because its value is hard coded
• If the description is too long, the table doesn't look nice in my opinion, maybe you could limit the description length in the table but show the whole description in the modal:

Btw. I really like the idea of the progress bar for the share size :)

[pierrbt]

I'll see that asap, thank you for the review

[pierrbt]

Awesome work, thank you!
I'm happy to help on this project !

Is the copy link button in the table still necessary? Because you can copy the link in the model.

Yes for sure, but I think the copy link button remains important to make the copy faster, and not disturb people that copied the link like that, I don't really know, but it's not that disturbing

Don't you think we could completely remove the author property in the model? Because its value is hard coded

Yes, I can remove it, indeed the user is in My Shares, so he knows that it's his share.

If the description is too long, the table doesn't look nice in my opinion, maybe you could limit the description length in the table but show the whole description in the modal

I'll work on this, I can limit the height, but when I try working on the width, I can only use px, I've already had this issue using tables before, but I don't know how to solve it, I put a 300px max-width, so it's good on PC but on smartphones, it's terrible.

Btw. I really like the idea of the progress bar for the share size :)

Yes I found that it would fill a bit the interface and the result is good.

[pierrbt]

I'll work on this, I can limit the height, but when I try working on the width, I can only use px, I've already had this issue using tables before, but I don't know how to solve it, I put a 300px max-width, so it's good on PC but on smartphones, it's terrible.

I've found a way to bypass this error :

display: table;
table-layout: fixed;

But the problem is, by setting the layout to fixed, the table cannot slide as before.
Maybe we could just hide the description on smaller screens, because anyway we'll not be able to see it

[stonith404]

Yes for sure, but I think the copy link button remains important to make the copy faster, and not disturb people that copied the link like that, I don't really know, but it's not that disturbing

Yeah good point.

[stonith404]

Maybe we could just hide the description on smaller screens, because anyway we'll not be able to see it

Yes I think this would be the best solution as the description can be seen anyways if you open the modal on mobile.

[pierrbt]

@stonith404

Yes I think this would be the best solution as the description can be seen anyways if you open the modal on mobile.

Do you know how we can do this directly in React ?
Else we can just make a media query

[stonith404]

@pierrbt Mantine does support media queries https://mantine.dev/core/media-query/

Something like this:

      <MediaQuery largerThan="lg">
           {/* the description in here */}
      </MediaQuery>

[pierrbt]

@stonith404
Just added a MediaQuery

[stonith404]

@pierrbt LGTM, thanks again!

[pierrbt]

@stonith404
No problems, I had time to help.
PS : this week I'll not be able to code, I'm not at home