Enhancement: add bookmarks description option (#2034)

src/components/bookmarks/item.jsx

@@ -5,7 +5,7 @@ import { SettingsContext } from "utils/contexts/settings";
 import ResolvedIcon from "components/resolvedicon";
 
 export default function Item({ bookmark }) {
-  const { hostname } = new URL(bookmark.href);
+  const description = bookmark.description ?? new URL(bookmark.href).hostname;
   const { settings } = useContext(SettingsContext);
 
   return (
@@ -21,7 +21,7 @@ export default function Item({ bookmark }) {
       >
         <div className="flex">
           <div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md bookmark-icon">
-            {bookmark.icon && 
+            {bookmark.icon &&
               <div className="flex-shrink-0 w-5 h-5">
                 <ResolvedIcon icon={bookmark.icon} alt={bookmark.abbr} />
               </div>
@@ -30,7 +30,7 @@ export default function Item({ bookmark }) {
           </div>
           <div className="flex-1 flex items-center justify-between rounded-r-md bookmark-text">
             <div className="flex-1 grow pl-3 py-2 text-xs bookmark-name">{bookmark.name}</div>
-            <div className="px-2 py-2 truncate text-theme-500 dark:text-theme-300 text-xs bookmark-hostname">{hostname}</div>
+            <div className="px-2 py-2 truncate text-theme-500 dark:text-theme-300 text-xs bookmark-description">{description}</div>
           </div>
         </div>
       </a>