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/DeckView.tsx

@@ -18,11 +18,13 @@ import {
   QtyStepper,
   SampleHandModal,
   StatTile,
+  TileColumnsControl,
   ViewToggle,
   groupCards,
   useClickPreview,
   useHoverPreview,
   usePersistedState,
+  useTileColumns,
   useViewMode,
 } from "../components";
 import { SuggestionsModal } from "../SuggestionsModal";
@@ -363,6 +365,7 @@ export function DeckView({ refreshSignal }: { refreshSignal?: number }) {
   const [newName, setNewName] = useState("");
   const [contents, setContents] = useState<DeckEntry[]>([]);
   const [view, setView] = useViewMode("deck-view");
+  const tiles = useTileColumns();
   const [groupBy, setGroupBy] = usePersistedState<GroupMode>("deck-group", "none");
   const [combineSections, setCombineSections] = usePersistedState("deck-combine-sections", false);
   const [filterQuery, setFilterQuery] = useState("");
@@ -754,7 +757,7 @@ export function DeckView({ refreshSignal }: { refreshSignal?: number }) {
 
   function deckTiles(entries: DeckEntry[]) {
     return (
-      <div className="tile-grid">
+      <div {...tiles.gridProps}>
         {entries.map((e) => (
           <CardTile
             key={e.oracle_id}
@@ -1120,6 +1123,7 @@ export function DeckView({ refreshSignal }: { refreshSignal?: number }) {
               <span className="spacer" />
               <GroupBySelect value={groupBy} onChange={setGroupBy} />
               <ViewToggle mode={view} onChange={setView} />
+              {view === "tiles" && <TileColumnsControl tiles={tiles} />}
             </div>
 
             {selectedCards.size > 0 && (