Enhancement: icons-only bookmarks style (#4384)

docs/configs/settings.md

@@ -118,6 +118,22 @@ As an example, this would produce the following layout:
 
 <img width="1260" alt="Screenshot 2022-09-15 at 8 03 57 PM" src="https://user-images.githubusercontent.com/82196/190466646-8ca94505-0fcf-4964-9687-3a6c7cd3144f.png">
 
+### Icons-Only Layout
+
+You can also specify the an icon-only layout for bookmarks, either like so:
+
+```yaml
+layout:
+  Media:
+    iconsOnly: true
+```
+
+or globally:
+
+```yaml
+bookmarksStyle: icons
+```
+
 ### Sorting
 
 Service groups and bookmark groups can be mixed in order, **but should use different group names**. If you do not specify any bookmark groups they will all show at the bottom of the page.

src/components/bookmarks/group.jsx

@@ -7,7 +7,13 @@ import ErrorBoundary from "components/errorboundry";
 import List from "components/bookmarks/list";
 import ResolvedIcon from "components/resolvedicon";
 
-export default function BookmarksGroup({ bookmarks, layout, disableCollapse, groupsInitiallyCollapsed }) {
+export default function BookmarksGroup({
+  bookmarks,
+  layout,
+  disableCollapse,
+  groupsInitiallyCollapsed,
+  bookmarksStyle,
+}) {
   const panel = useRef();
 
   useEffect(() => {
@@ -64,7 +70,7 @@ export default function BookmarksGroup({ bookmarks, layout, disableCollapse, gro
             >
               <Disclosure.Panel className="transition-all overflow-hidden duration-300 ease-out" ref={panel} static>
                 <ErrorBoundary>
-                  <List bookmarks={bookmarks.bookmarks} layout={layout} />
+                  <List bookmarks={bookmarks.bookmarks} layout={layout} bookmarksStyle={bookmarksStyle} />
                 </ErrorBoundary>
               </Disclosure.Panel>
             </Transition>

src/components/bookmarks/item.jsx

@@ -4,12 +4,17 @@ import classNames from "classnames";
 import { SettingsContext } from "utils/contexts/settings";
 import ResolvedIcon from "components/resolvedicon";
 
-export default function Item({ bookmark }) {
+export default function Item({ bookmark, iconOnly = false }) {
   const description = bookmark.description ?? new URL(bookmark.href).hostname;
   const { settings } = useContext(SettingsContext);
 
   return (
-    <li key={bookmark.name} id={bookmark.id} className="bookmark" data-name={bookmark.name}>
+    <li
+      key={bookmark.name}
+      id={bookmark.id}
+      className={classNames("bookmark", iconOnly && "grid")}
+      data-name={bookmark.name}
+    >
       <a
         href={bookmark.href}
         title={bookmark.name}
@@ -17,25 +22,37 @@ export default function Item({ bookmark }) {
         target={bookmark.target ?? settings.target ?? "_blank"}
         className={classNames(
           settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
-          "block w-full text-left cursor-pointer transition-all h-15 mb-3 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10",
+          "text-left cursor-pointer transition-all rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10",
+          iconOnly ? "h-[60px] w-[60px] grid" : "block w-full h-15 mb-3",
         )}
       >
-        <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">
+        {iconOnly ? (
+          <div className="flex items-center justify-center text-theme-700 hover:text-theme-700 dark:text-theme-200 text-xl font-medium rounded-md bookmark-icon py-0.5">
             {bookmark.icon && (
-              <div className="flex-shrink-0 w-5 h-5">
+              <div className="w-7 h-7">
                 <ResolvedIcon icon={bookmark.icon} alt={bookmark.abbr} />
               </div>
             )}
             {!bookmark.icon && bookmark.abbr}
           </div>
-          <div className="flex-1 overflow-hidden flex items-center justify-between rounded-r-md bookmark-text">
-            <div className="pl-3 py-2 text-xs bookmark-name">{bookmark.name}</div>
-            <div className="shrink truncate px-2 py-2 text-theme-500 dark:text-theme-300 text-xs bookmark-description">
-              {description}
+        ) : (
+          <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 && (
+                <div className="flex-shrink-0 w-5 h-5">
+                  <ResolvedIcon icon={bookmark.icon} alt={bookmark.abbr} />
+                </div>
+              )}
+              {!bookmark.icon && bookmark.abbr}
+            </div>
+            <div className="flex-1 overflow-hidden flex items-center justify-between rounded-r-md bookmark-text">
+              <div className="pl-3 py-2 text-xs bookmark-name">{bookmark.name}</div>
+              <div className="shrink truncate px-2 py-2 text-theme-500 dark:text-theme-300 text-xs bookmark-description">
+                {description}
+              </div>
             </div>
           </div>
-        </div>
+        )}
       </a>
     </li>
   );

src/components/bookmarks/list.jsx

@@ -4,16 +4,22 @@ import { columnMap } from "../../utils/layout/columns";
 
 import Item from "components/bookmarks/item";
 
-export default function List({ bookmarks, layout }) {
+export default function List({ bookmarks, layout, bookmarksStyle }) {
+  let classes =
+    layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col mt-3 bookmark-list";
+  const style = {};
+  if (layout?.iconsOnly || bookmarksStyle === "icons") {
+    classes = "grid gap-3 mt-3 bookmark-list";
+    style.gridTemplateColumns = "repeat(auto-fill, minmax(60px, 1fr))";
+  }
   return (
-    <ul
-      className={classNames(
-        layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col",
-        "mt-3 bookmark-list",
-      )}
-    >
+    <ul className={classNames(classes)} style={style}>
       {bookmarks.map((bookmark) => (
-        <Item key={`${bookmark.name}-${bookmark.href}`} bookmark={bookmark} />
+        <Item
+          key={`${bookmark.name}-${bookmark.href}`}
+          bookmark={bookmark}
+          iconOnly={layout?.iconsOnly || bookmarksStyle === "icons"}
+        />
       ))}
     </ul>
   );

src/pages/index.jsx

@@ -297,6 +297,7 @@ function Home({ initialSettings }) {
                   disableCollapse={settings.disableCollapse}
                   useEqualHeights={settings.useEqualHeights}
                   groupsInitiallyCollapsed={settings.groupsInitiallyCollapsed}
+                  bookmarksStyle={settings.bookmarksStyle}
                 />
               ) : (
                 <BookmarksGroup
@@ -333,6 +334,7 @@ function Home({ initialSettings }) {
                 layout={settings.layout?.[group.name]}
                 disableCollapse={settings.disableCollapse}
                 groupsInitiallyCollapsed={settings.groupsInitiallyCollapsed}
+                bookmarksStyle={settings.bookmarksStyle}
               />
             ))}
           </div>
@@ -350,6 +352,7 @@ function Home({ initialSettings }) {
     settings.useEqualHeights,
     settings.cardBlur,
     settings.groupsInitiallyCollapsed,
+    settings.bookmarksStyle,
     initialSettings.layout,
   ]);