fix: favorite link and search result styles

app/controllers/collections_controller.ts

@@ -25,9 +25,11 @@ export default class CollectionsController {
       return response.redirectToNamedRoute('dashboard');
     }
 
+    // TODO: Create DTOs
     return inertia.render('dashboard', {
-      collections,
+      collections: collections.map((collection) => collection.serialize()),
-      activeCollection: activeCollection || collections[0],
+      activeCollection:
+        activeCollection?.serialize() || collections[0].serialize(),
     });
   }
 

inertia/components/dashboard/dashboard_provider.tsx

@@ -80,6 +80,7 @@ export default function DashboardProviders(
       enabled: globalHotkeysEnabled,
     }
   );
+
   return (
     <CollectionsContext.Provider value={collectionsContextValue}>
       <ActiveCollectionContext.Provider value={activeCollectionContextValue}>

inertia/components/dashboard/search/search_result_item.tsx

@@ -15,7 +15,7 @@ const SearchItemStyle = styled('li', {
   shouldForwardProp: (propName) => propName !== 'isActive',
 })<{ isActive: boolean }>(({ theme, isActive }) => ({
   fontSize: '16px',
-  backgroundColor: isActive ? theme.colors.background : 'transparent',
+  backgroundColor: isActive ? theme.colors.secondary : 'transparent',
   display: 'flex',
   gap: '0.35em',
   alignItems: 'center',

inertia/components/dashboard/side_nav/favorite/favorite_item.tsx

@@ -16,6 +16,7 @@ import { appendCollectionId, appendLinkId } from '~/lib/navigation';
 import { LinkWithCollection } from '~/types/app';
 
 const FavoriteItemStyle = styled(ItemExternalLink)(({ theme }) => ({
+  height: 'auto',
   backgroundColor: theme.colors.secondary,
 }));
 
@@ -23,13 +24,20 @@ const FavoriteDropdown = styled(Dropdown)(({ theme }) => ({
   backgroundColor: theme.colors.secondary,
 }));
 
+const FavoriteContainer = styled.div({
+  flex: 1,
+  lineHeight: '1.1rem',
+});
+
 export default function FavoriteItem({ link }: { link: LinkWithCollection }) {
   const { t } = useTranslation();
   return (
     <FavoriteItemStyle href={link.url}>
       <LinkFavicon url={link.url} size={24} />
+      <FavoriteContainer>
         <TextEllipsis>{link.name}</TextEllipsis>
-      <Legend>({link.collection.name})</Legend>
+        <Legend>{link.collection.name}</Legend>
+      </FavoriteContainer>
       <FavoriteDropdown
         onClick={(event) => {
           event.preventDefault();

inertia/components/settings/profile.tsx

@@ -14,7 +14,7 @@ const ProfileStyle = styled(UnstyledList)({
   gap: '1.25em',
 });
 
-const Column = styled.li({
+const Column = styled.div({
   display: 'flex',
   gap: '1rem',
   flexDirection: 'column',