feat: compact collection view (#214)

* feat: compact collection view #201

* loc: compact view localization

Author: XFox111

entrypoints/sidepanel/components/CollectionView.styles.ts

@@ -19,6 +19,11 @@ export const useStyles_CollectionView = makeStyles({
 		"&:hover":
 		{
 			boxShadow: tokens.shadow4
+		},
+
+		"&:not(:focus-within) .compact":
+		{
+			display: "none"
 		}
 	},
 	color:

entrypoints/sidepanel/components/CollectionView.tsx

@@ -12,7 +12,12 @@ import { useStyles_CollectionView } from "./CollectionView.styles";
 import GroupView from "./GroupView";
 import TabView from "./TabView";
 
-export default function CollectionView({ collection, index: collectionIndex, dragOverlay }: CollectionViewProps): ReactElement
+export default function CollectionView({
+	collection,
+	index: collectionIndex,
+	dragOverlay,
+	compact
+}: CollectionViewProps): ReactElement
 {
 	const { tilesView } = useCollections();
 	const {
@@ -53,12 +58,12 @@ export default function CollectionView({ collection, index: collectionIndex, dra
 				{ (!activeItem || activeItem.item.type !== "collection") && !dragOverlay &&
 					<>
 						{ collection.items.length < 1 ?
-							<div className={ cls.empty }>
+							<div className={ mergeClasses(cls.empty, compact === true && "compact") }>
 								<CollectionsRegular fontSize={ 32 } />
 								<Body1Strong>{ i18n.t("collections.empty") }</Body1Strong>
 							</div>
 							:
-							<div className={ mergeClasses(cls.list, !tilesView && cls.verticalList) }>
+							<div className={ mergeClasses(cls.list, !tilesView && cls.verticalList, compact === true && "compact") }>
 								<SortableContext
 									items={ collection.items.map((_, index) => [collectionIndex, index].join("/")) }
 									strategy={ tilesView ? horizontalListSortingStrategy : verticalListSortingStrategy }
@@ -85,4 +90,5 @@ export type CollectionViewProps =
 		collection: CollectionItem;
 		index: number;
 		dragOverlay?: boolean;
+		compact?: boolean | null;
 	};

entrypoints/sidepanel/layouts/collections/CollectionListView.styles.ts

@@ -51,5 +51,9 @@ export const useStyles_CollectionListView = makeStyles({
 		{
 			gridTemplateColumns: "repeat(auto-fit, minmax(360px, 1fr))"
 		}
+	},
+	compactList:
+	{
+		alignItems: "baseline"
 	}
 });

entrypoints/sidepanel/layouts/collections/CollectionListView.tsx

@@ -18,10 +18,10 @@ import CollectionContext from "../../contexts/CollectionContext";
 import { useCollections } from "../../contexts/CollectionsProvider";
 import applyReorder from "../../utils/dnd/applyReorder";
 import { collisionDetector } from "../../utils/dnd/collisionDetector";
+import { snapHandleToCursor } from "../../utils/dnd/snapHandleToCursor";
 import { useStyles_CollectionListView } from "./CollectionListView.styles";
 import SearchBar from "./SearchBar";
 import StorageCapacityIssueMessage from "./messages/StorageCapacityIssueMessage";
-import { snapHandleToCursor } from "../../utils/dnd/snapHandleToCursor";
 
 export default function CollectionListView(): ReactElement
 {
@@ -31,11 +31,12 @@ export default function CollectionListView(): ReactElement
 	const [query, setQuery] = useState<string>("");
 	const [colors, setColors] = useState<CollectionFilterType["colors"]>([]);
 	const [showHidden, setShowHidden] = useState<boolean>(false);
+	const [compactView] = useSettings("compactView");
 
 	const [active, setActive] = useState<DndItem | null>(null);
 
 	const sensors = useSensors(
-		useSensor(MouseSensor, { activationConstraint: { delay: 10, tolerance: 20 } }),
+		useSensor(MouseSensor, { activationConstraint: { delay: 150, tolerance: 20 } }),
 		useSensor(TouchSensor, { activationConstraint: { delay: 300, tolerance: 20 } })
 	);
 
@@ -114,7 +115,7 @@ export default function CollectionListView(): ReactElement
 					</Button>
 				</div>
 				:
-				<section className={ mergeClasses(cls.collectionList, !tilesView && cls.listView) }>
+				<section className={ mergeClasses(cls.collectionList, !tilesView && cls.listView, !!(!tilesView && compactView) && cls.compactList) }>
 					<DndContext
 						sensors={ sensors }
 						collisionDetection={ collisionDetector(!tilesView) }
@@ -127,7 +128,7 @@ export default function CollectionListView(): ReactElement
 							strategy={ tilesView ? verticalListSortingStrategy : rectSortingStrategy }
 						>
 							{ resultList.map((collection, index) =>
-								<CollectionView key={ index } collection={ collection } index={ index } />
+								<CollectionView key={ index } collection={ collection } index={ index } compact={ compactView } />
 							) }
 						</SortableContext>
 

entrypoints/sidepanel/layouts/header/MoreButton.tsx

@@ -11,18 +11,32 @@ import { ReactElement } from "react";
 export default function MoreButton(): ReactElement
 {
 	const [tilesView, setTilesView] = useSettings("tilesView");
+	const [compactView, setCompactView] = useSettings("compactView");
 
 	const SettingsIcon: ic.FluentIcon = ic.bundleIcon(ic.Settings20Filled, ic.Settings20Regular);
-	const ViewIcon: ic.FluentIcon = ic.bundleIcon(ic.GridKanban20Filled, ic.GridKanban20Regular);
+	const GridIcon: ic.FluentIcon = ic.bundleIcon(ic.GridKanban20Filled, ic.GridKanban20Regular);
+	const CompactIcon: ic.FluentIcon = ic.bundleIcon(ic.ArrowMinimizeVerticalFilled, ic.ArrowMinimizeVerticalRegular);
 	const FeedbackIcon: ic.FluentIcon = ic.bundleIcon(ic.PersonFeedback20Filled, ic.PersonFeedback20Regular);
 	const LearnIcon: ic.FluentIcon = ic.bundleIcon(ic.QuestionCircle20Filled, ic.QuestionCircle20Regular);
 	const BmcIcon: ic.FluentIcon = ic.bundleIcon(BuyMeACoffee20Filled, BuyMeACoffee20Regular);
 
+	const checkedValues = useMemo(() => ({
+		view: [
+			tilesView ? "tiles" : "",
+			compactView ? "compact" : ""
+		]
+	}), [tilesView, compactView]);
+
+	const onCheckedValueChange = (_: unknown, e: fui.MenuCheckedValueChangeData) =>
+	{
+		setTilesView(e.checkedItems.includes("tiles"));
+		setCompactView(e.checkedItems.includes("compact"));
+	};
+
 	return (
 		<fui.Menu
 			hasIcons hasCheckmarks
-			checkedValues={ { tilesView: tilesView ? ["true"] : [] } }
-			onCheckedValueChange={ (_, e) => setTilesView(e.checkedItems.length > 0) }
+			checkedValues={ checkedValues } onCheckedValueChange={ onCheckedValueChange }
 		>
 			<fui.Tooltip relationship="label" content={ i18n.t("common.tooltips.more") }>
 				<fui.MenuTrigger disableButtonEnhancement>
@@ -36,9 +50,12 @@ export default function MoreButton(): ReactElement
 					<fui.MenuItem icon={ <SettingsIcon /> } onClick={ () => browser.runtime.openOptionsPage() }>
 						{ i18n.t("options_page.title") }
 					</fui.MenuItem>
-					<fui.MenuItemCheckbox name="tilesView" value="true" icon={ <ViewIcon /> }>
+					<fui.MenuItemCheckbox name="view" value="tiles" icon={ <GridIcon /> }>
 						{ i18n.t("main.header.menu.tiles_view") }
 					</fui.MenuItemCheckbox>
+					<fui.MenuItemCheckbox name="view" value="compact" icon={ <CompactIcon /> }>
+						{ i18n.t("main.header.menu.compact_view") }
+					</fui.MenuItemCheckbox>
 
 					<fui.MenuDivider />
 

locales/en.yml

@@ -231,6 +231,7 @@ main:
     create_collection: "Create new collection"
     menu:
       tiles_view: "Tiles view"
+      compact_view: "Compact view"
       changelog: "What's new?"
   list:
     searchbar:

locales/es.yml

@@ -231,6 +231,7 @@ main:
     create_collection: "Crear nueva colección"
     menu:
       tiles_view: "Vista de mosaicos"
+      compact_view: "Vista compacta"
       changelog: "¿Qué hay de nuevo?"
   list:
     searchbar:

locales/it.yml

@@ -231,6 +231,7 @@ main:
     create_collection: "Crea nuova collezione"
     menu:
       tiles_view: "Vista a riquadri"
+      compact_view: "Vista compatta"
       changelog: "Cosa c'è di nuovo?"
   list:
     searchbar:

locales/pl.yml

@@ -231,6 +231,7 @@ main:
     create_collection: "Utwórz nową kolekcję"
     menu:
       tiles_view: "Kafelki"
+      compact_view: "Widok kompaktowy"
       changelog: "Co nowego?"
   list:
     searchbar:

locales/pt_BR.yml

@@ -231,6 +231,7 @@ main:
     create_collection: "Criar nova coleção"
     menu:
       tiles_view: "Visualização em blocos"
+      compact_view: "Visualização compacta"
       changelog: "O que há de novo?"
   list:
     searchbar: