Tiles view: +/- control for cards per row

Adjusts the tile grid's column count as an offset from the existing
width-based auto-fill default, shared across Library, Decks, Card search,
and set card lists. Clicking the count resets to the default.

src/views/LibraryBrowser.tsx

@@ -24,6 +24,7 @@ import {
   SortDir,
   SortMode,
   TagInput,
+  TileColumnsControl,
   ViewToggle,
   CardCriteriaFields,
   applyCardCriteria,
@@ -31,6 +32,7 @@ import {
   sortCards,
   useCardCriteria,
   usePersistedState,
+  useTileColumns,
   useViewMode,
 } from "../components";
 
@@ -78,6 +80,7 @@ export function LibraryBrowser({
   const [decks, setDecks] = useState<Deck[]>([]);
   const [rows, setRows] = useState<LibraryCard[]>([]);
   const [view, setView] = useViewMode("library-view");
+  const tiles = useTileColumns();
   const [groupBy, setGroupBy] = usePersistedState<GroupMode>("library-group", "none");
   const [sortBy, setSortBy] = usePersistedState<SortMode>("library-sort", "name");
   const [sortDir, setSortDir] = usePersistedState<SortDir>("library-sort-dir", "asc");
@@ -405,7 +408,7 @@ export function LibraryBrowser({
 
   function libTiles(cards: LibraryCard[]) {
     return (
-      <div className="tile-grid">
+      <div {...tiles.gridProps}>
         {cards.map((c) => (
           <CardTile
             key={c.oracle_id}
@@ -693,6 +696,7 @@ export function LibraryBrowser({
             onToggleDir={() => setSortDir(sortDir === "asc" ? "desc" : "asc")}
           />
           <ViewToggle mode={view} onChange={setView} />
+          {view === "tiles" && <TileColumnsControl tiles={tiles} />}
         </div>
       </div>