feat: improve side nav item style and fix some UI issues

database/seeders/collection_seeder.ts

@@ -2,6 +2,7 @@ import Collection from '#models/collection';
 import User from '#models/user';
 import { BaseSeeder } from '@adonisjs/lucid/seeders';
 import { faker } from '@faker-js/faker';
+import { Visibility } from '../../app/enums/visibility.js';
 
 export default class extends BaseSeeder {
   static environment = ['development', 'testing'];
@@ -10,9 +11,12 @@ export default class extends BaseSeeder {
     // eslint-disable-next-line unicorn/no-await-expression-member
     const users = await getUserIds();
 
-    const collections = faker.helpers.multiple(() => createRandomCollection(users), {
-      count: 50,
-    });
+    const collections = faker.helpers.multiple(
+      () => createRandomCollection(users),
+      {
+        count: 50,
+      }
+    );
     await Collection.createMany(collections);
   }
 }
@@ -28,7 +32,8 @@ function createRandomCollection(userIds: User['id'][]) {
     id: faker.string.uuid(),
     name: faker.string.alphanumeric({ length: { min: 5, max: 25 } }),
     description: faker.string.alphanumeric({ length: { min: 0, max: 254 } }),
-    nextId: faker.string.uuid(),
+    visibility: Visibility.PRIVATE,
+    nextId: undefined,
     authorId,
   };
 }

inertia/components/common/text_ellipsis.tsx

@@ -1,9 +1,20 @@
 import styled from '@emotion/styled';
 
-const TextEllipsis = styled.p({
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
+const TextEllipsis = styled.p<{ lines?: number }>(({ lines = 1 }) => {
+  if (lines > 1) {
+    return {
+      overflow: 'hidden',
+      display: '-webkit-box',
+      WebkitLineClamp: lines,
+      WebkitBoxOrient: 'vertical',
+    };
+  }
+
+  return {
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+  };
 });
 
 export default TextEllipsis;

inertia/components/dashboard/collection/header/collection_description.tsx

@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
+import TextEllipsis from '~/components/common/text_ellipsis';
 import useActiveCollection from '~/hooks/use_active_collection';
 
-const CollectionDescriptionStyle = styled.p({
+const CollectionDescriptionStyle = styled.div({
+  width: '100%',
   fontSize: '0.85rem',
   marginBottom: '0.5rem',
 });
@@ -11,7 +13,7 @@ export default function CollectionDescription() {
   return (
     activeCollection && (
       <CollectionDescriptionStyle>
-        {activeCollection?.description}
+        <TextEllipsis lines={3}>{activeCollection?.description}</TextEllipsis>
       </CollectionDescriptionStyle>
     )
   );

inertia/components/dashboard/side_nav/nav_item.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
+import { rgba } from '~/lib/color';
 
 export const Item = styled.div(({ theme }) => ({
   userSelect: 'none',
@@ -21,9 +22,7 @@ export const Item = styled.div(({ theme }) => ({
   // Disable hover effect for UserCard
   '&:hover:not(.disable-hover)': {
     cursor: 'pointer',
-    backgroundColor: theme.colors.secondary,
-    outlineWidth: '1px',
-    outlineStyle: 'solid',
+    backgroundColor: rgba(theme.colors.font, 0.1),
   },
 }));
 

inertia/components/dashboard/side_nav/side_navigation.tsx

@@ -9,6 +9,7 @@ import { Item, ItemLink } from '~/components/dashboard/side_nav/nav_item';
 import UserCard from '~/components/dashboard/side_nav/user_card';
 import ModalSettings from '~/components/settings/modal';
 import useActiveCollection from '~/hooks/use_active_collection';
+import { rgba } from '~/lib/color';
 import { appendCollectionId } from '~/lib/navigation';
 
 const SideMenu = styled.nav({
@@ -20,14 +21,23 @@ const SideMenu = styled.nav({
 
 const AdminButton = styled(Item)(({ theme }) => ({
   color: theme.colors.lightRed,
+  '&:hover': {
+    backgroundColor: `${rgba(theme.colors.lightRed, 0.1)}!important`,
+  },
 }));
 
 const SettingsButton = styled(Item)(({ theme }) => ({
   color: theme.colors.grey,
+  '&:hover': {
+    backgroundColor: `${rgba(theme.colors.grey, 0.1)}!important`,
+  },
 }));
 
 const AddButton = styled(ItemLink)(({ theme }) => ({
   color: theme.colors.primary,
+  '&:hover': {
+    backgroundColor: `${rgba(theme.colors.primary, 0.1)}!important`,
+  },
 }));
 
 export default function SideNavigation() {
@@ -52,9 +62,6 @@ export default function SideNavigation() {
         <AddButton href={route('collection.create-form').url}>
           <AiOutlineFolderAdd /> {t('collection.create')}
         </AddButton>
-        <Item>
-          <AiOutlineFolderAdd /> Archives
-        </Item>
       </div>
       <FavoriteList />
     </SideMenu>

resources/views/inertia_layout.edge

@@ -2,13 +2,32 @@
 <html>
 
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta
+    name='theme-color'
+    content='#f0eef6'
+  />
   <link
     href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Rubik:ital,wght@0,400;0,700;1,400;1,700&display=swap'
     rel='stylesheet'
   />
-
+  <meta charSet='UTF-8' />
+  <link
+    rel='shortcut icon'
+    href='/favicon.png'
+    type='image/png'
+  />
+  <link
+    rel='manifest'
+    href='/manifest.json'
+  />
+  <link
+    rel='apple-touch-icon'
+    href='/favicon.png'
+  />
+  <link
+    rel='icon'
+    href='/favicon.png'
+  />
   <title inertia>MyLinks</title>
 
   @routes()