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

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>