feat: v1.0.13 — compact list view, custom columns, persistent sort & Intel Mac builds

- macOS releases are now a universal binary (aarch64 + x86_64), so Stack runs on Intel Macs; CI installs both Rust targets and builds with --target universal-apple-darwin
- Compact list view: 40px rows without the category line, smaller artwork and waveform; virtualizer estimate and column-header spacer track the same density
- Column visibility via right-click on the column header — Waveform, Time, Key, BPM, Folder, plus compact rows; backed by Settings so it persists
- New Folder column shows each sample's location relative to its pack and jumps to that folder on click
- Sort order persists across launches (localStorage), and picking a new sort field now starts in its natural direction (names A-Z, recency newest-first)
- Sidebar: clicking a folder opens and expands it, double-click collapses, and expanded folders are remembered between launches
- Fixed the browser column header showing Waveform/Key/BPM labels while those columns were hidden
- Removed dead SortControls component

Author: swendlcode

.github/workflows/release.yml

@@ -11,8 +11,14 @@ jobs:
       fail-fast: false
       matrix:
         include:
+          # Universal binary so the DMG runs on both Apple Silicon and Intel Macs.
+          # GitHub's macOS runners are arm64 only, so x86_64 is cross-compiled.
           - os: macos-latest
+            rust-targets: aarch64-apple-darwin,x86_64-apple-darwin
+            args: --target universal-apple-darwin
           - os: windows-latest
+            rust-targets: ''
+            args: ''
 
     runs-on: ${{ matrix.os }}
     permissions:
@@ -29,6 +35,8 @@ jobs:
 
       - name: Install Rust stable
         uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: ${{ matrix.rust-targets }}
 
       - name: Cache Rust build
         uses: Swatinem/rust-cache@v2
@@ -76,3 +84,4 @@ jobs:
           releaseBody: ${{ steps.notes.outputs.body }}
           releaseDraft: false
           prerelease: false
+          args: ${{ matrix.args }}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stack",
   "private": true,
-  "version": "1.0.12",
+  "version": "1.0.13",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "stack"
-version = "1.0.12"
+version = "1.0.13"
 description = "Local sample library manager"
 authors = ["Stack"]
 edition = "2021"

src-tauri/Cargo.toml

@@ -49,6 +49,15 @@ pub struct Settings {
     /// Stick the toolbar + column header to the top when scrolling inside a folder
     #[serde(default = "default_true")]
     pub sticky_toolbar: bool,
+    /// Denser asset rows: smaller artwork, no category line
+    #[serde(default)]
+    pub compact_list: bool,
+    /// Show the duration column on asset rows
+    #[serde(default = "default_true")]
+    pub show_time_badge: bool,
+    /// Show the folder-path column on asset rows
+    #[serde(default)]
+    pub show_folder_column: bool,
 }
 
 impl Default for Settings {
@@ -70,6 +79,9 @@ impl Default for Settings {
             launch_at_startup: false,
             confirm_folder_removal: true,
             sticky_toolbar: true,
+            compact_list: false,
+            show_time_badge: true,
+            show_folder_column: false,
         }
     }
 }

src-tauri/src/models/settings.rs

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Stack",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "identifier": "app.stack.desktop",
   "build": {
     "beforeDevCommand": "npm run dev",

src-tauri/tauri.conf.json

@@ -1,10 +1,14 @@
 /**
  * Sticky column header that mirrors AssetRow's layout. Per-type column sets
  * (samples/midi keep waveform/time/key/bpm; presets show only Plugin; projects
- * show DAW + Date) are driven by the `viewType` prop.
+ * show DAW + Date) are driven by the `viewType` prop. Right-click opens a menu
+ * that toggles column visibility and row density (persisted in Settings).
  */
+import { useState } from 'react';
 import { useSelectionStore } from '../../stores/selectionStore';
+import { useColumnPrefs } from '../../hooks/useColumnPrefs';
 import { Checkbox } from '../ui/Checkbox';
+import { ContextMenu } from '../ui/ContextMenu';
 import { COL } from './assetColumns';
 
 export type AssetViewType = 'sample' | 'midi' | 'preset' | 'project' | 'favorites';
@@ -18,14 +22,22 @@ export function AssetColumnHeader({
   showWaveform = true,
   showBpmBadge = true,
   showKeyBadge = true,
+  showTimeBadge = true,
+  showFolderColumn = false,
+  compact = false,
 }: {
   viewType?: AssetViewType;
   pageAssetIds?: string[];
   showWaveform?: boolean;
   showBpmBadge?: boolean;
   showKeyBadge?: boolean;
+  showTimeBadge?: boolean;
+  showFolderColumn?: boolean;
+  compact?: boolean;
 }) {
   const { selectedIds, setSelection, clearSelection } = useSelectionStore();
+  const { settings, toggle } = useColumnPrefs();
+  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);
 
   const selectedCount = pageAssetIds.filter((id) => selectedIds.has(id)).length;
   const allSelected = pageAssetIds.length > 0 && selectedCount === pageAssetIds.length;
@@ -39,10 +51,17 @@ export function AssetColumnHeader({
     }
   };
 
+  const mark = (on: boolean) => (on ? '\u2713  ' : '\u2007\u2007 ');
+
   return (
     <div
       className="sticky top-0 z-10 flex shrink-0 items-center border-b border-gray-700 bg-gray-900"
       style={{ height: 32, paddingLeft: '12px', paddingRight: '12px' }}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        setMenu({ x: e.clientX, y: e.clientY });
+      }}
+      title="Right-click to choose columns"
     >
       {/* ── CHECKBOX: select-all ── */}
       <div
@@ -59,8 +78,8 @@ export function AssetColumnHeader({
 
       {/* ── LEFT: Filename ── */}
       <div className="flex min-w-0 flex-[0.85] items-center" style={{ minWidth: '200px' }}>
-        {/* Spacer for artwork (42) + play (32 on sm) + gap (8+12) */}
-        <div style={{ width: 42 + 32 + 20 }} className="shrink-0" />
+        {/* Spacer for artwork + play + gaps — must track AssetRow's geometry */}
+        <div style={{ width: compact ? 28 + 24 + 20 : 42 + 32 + 20 }} className="shrink-0" />
         <span className={LABEL_CLS}>Filename</span>
       </div>
 
@@ -75,9 +94,11 @@ export function AssetColumnHeader({
                 </span>
               </div>
             )}
-            <div className="shrink-0 text-right" style={{ minWidth: '40px' }}>
-              <span className={MONO_CLS}>Time</span>
-            </div>
+            {showTimeBadge && (
+              <div className="shrink-0 text-right" style={{ minWidth: '40px' }}>
+                <span className={MONO_CLS}>Time</span>
+              </div>
+            )}
             {showKeyBadge && (
               <div className="shrink-0 text-center" style={{ minWidth: '50px' }}>
                 <span className={MONO_CLS}>Key</span>
@@ -109,8 +130,32 @@ export function AssetColumnHeader({
         )}
       </div>
 
+      {/* ── FOLDER: optional path column ── */}
+      {showFolderColumn && (
+        <div className="hidden shrink-0 xl:block" style={{ width: 160 }}>
+          <span className={LABEL_CLS}>Folder</span>
+        </div>
+      )}
+
       {/* ── RIGHT: spacer for fav + more ── */}
       <div className="shrink-0" style={{ minWidth: '50px' }} />
+
+      {menu && settings && (
+        <ContextMenu
+          x={menu.x}
+          y={menu.y}
+          onClose={() => setMenu(null)}
+          items={[
+            { label: `${mark(settings.showWaveform)}Waveform`, onSelect: () => toggle('showWaveform') },
+            { label: `${mark(settings.showTimeBadge)}Time`, onSelect: () => toggle('showTimeBadge') },
+            { label: `${mark(settings.showKeyBadge)}Key`, onSelect: () => toggle('showKeyBadge') },
+            { label: `${mark(settings.showBpmBadge)}BPM`, onSelect: () => toggle('showBpmBadge') },
+            { label: `${mark(settings.showFolderColumn)}Folder`, onSelect: () => toggle('showFolderColumn') },
+            { label: '—', onSelect: () => {} },
+            { label: `${mark(settings.compactList)}Compact rows`, onSelect: () => toggle('compactList') },
+          ]}
+        />
+      )}
     </div>
   );
 }

src/components/asset/AssetColumnHeader.tsx

@@ -29,6 +29,7 @@ interface AssetGridProps {
 }
 
 const ROW_HEIGHT = 64;
+const COMPACT_ROW_HEIGHT = 40;
 const FOOTER_HEIGHT = 52;
 
 export function AssetGrid({
@@ -60,6 +61,9 @@ export function AssetGrid({
   const showWaveform = settings?.showWaveform ?? true;
   const showBpmBadge = settings?.showBpmBadge ?? true;
   const showKeyBadge = settings?.showKeyBadge ?? true;
+  const showTimeBadge = settings?.showTimeBadge ?? true;
+  const showFolderColumn = settings?.showFolderColumn ?? false;
+  const compactList = settings?.compactList ?? false;
 
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const selectedIndexRef = useRef<number | null>(null);
@@ -130,11 +134,16 @@ export function AssetGrid({
   const virtualizer = useVirtualizer({
     count: assets.length,
     getScrollElement: () => scrollContainerRef?.current ?? internalScrollRef.current,
-    estimateSize: () => ROW_HEIGHT,
+    estimateSize: () => (compactList ? COMPACT_ROW_HEIGHT : ROW_HEIGHT),
     overscan: 10,
     scrollMargin,
   });
 
+  // Cached row measurements go stale when density flips.
+  useEffect(() => {
+    virtualizer.measure();
+  }, [compactList, virtualizer]);
+
   // Set on pointer clicks so the scroll-into-view effect below knows the
   // selection came from the mouse (row already visible — don't nudge the list).
   const lastPointerSelectRef = useRef(0);
@@ -328,6 +337,9 @@ export function AssetGrid({
           showWaveform={showWaveform}
           showBpmBadge={showBpmBadge}
           showKeyBadge={showKeyBadge}
+          showTimeBadge={showTimeBadge}
+          showFolderColumn={showFolderColumn}
+          compact={compactList}
         />
       )}
 
@@ -377,6 +389,9 @@ export function AssetGrid({
                   showWaveform={showWaveform}
                   showBpmBadge={showBpmBadge}
                   showKeyBadge={showKeyBadge}
+                  showTimeBadge={showTimeBadge}
+                  showFolderColumn={showFolderColumn}
+                  compact={compactList}
                 />
               </div>
             );

src/components/asset/AssetGrid.tsx

@@ -56,6 +56,9 @@ interface AssetRowProps {
   showWaveform?: boolean;
   showBpmBadge?: boolean;
   showKeyBadge?: boolean;
+  showTimeBadge?: boolean;
+  showFolderColumn?: boolean;
+  compact?: boolean;
 }
 
 export const AssetRow = memo(function AssetRow({
@@ -71,6 +74,9 @@ export const AssetRow = memo(function AssetRow({
   showWaveform = true,
   showBpmBadge = true,
   showKeyBadge = true,
+  showTimeBadge = true,
+  showFolderColumn = false,
+  compact = false,
 }: AssetRowProps) {
   // Tier 1: ref-stable fields every row needs. Shallow-compared so a
   // currentTime tick doesn't invalidate this selector for any row.
@@ -238,6 +244,19 @@ export const AssetRow = memo(function AssetRow({
     }
   };
 
+  // "PackName/sub/folder" when the file lives under its pack, else the last
+  // two path segments — enough to place the sample without the full path.
+  const folderLabel = (() => {
+    const norm = asset.path.replace(/\\/g, "/");
+    const dir = norm.slice(0, norm.lastIndexOf("/"));
+    if (packRoot) {
+      const rootNorm = packRoot.replace(/\\/g, "/");
+      const rootName = rootNorm.split("/").filter(Boolean).pop() ?? "";
+      if (dir.startsWith(rootNorm)) return rootName + dir.slice(rootNorm.length);
+    }
+    return dir.split("/").filter(Boolean).slice(-2).join("/");
+  })();
+
   const categoryLabel =
     [asset.instrument, asset.subtype].filter(Boolean).join(" · ") || asset.type;
   const displayName =
@@ -350,7 +369,7 @@ export const AssetRow = memo(function AssetRow({
                 ? "bg-gray-800/70"
                 : ""
       }`}
-      style={{ height: 64, paddingLeft: "12px", paddingRight: "12px" }}
+      style={{ height: compact ? 40 : 64, paddingLeft: "12px", paddingRight: "12px" }}
       draggable
       onDragStart={(e) => {
         e.preventDefault();
@@ -418,7 +437,7 @@ export const AssetRow = memo(function AssetRow({
           title={`Go to ${asset.packName ?? "pack folder"}`}
           aria-label="Go to pack folder"
         >
-          <PackCover packRoot={packRoot} packName={asset.packName} size={42} />
+          <PackCover packRoot={packRoot} packName={asset.packName} size={compact ? 28 : 42} />
         </button>
 
         {/* Play / Open */}
@@ -488,9 +507,11 @@ export const AssetRow = memo(function AssetRow({
           >
             {displayName}
           </button>
-          <div className="truncate text-xs capitalize leading-tight text-gray-500 mt-0.5">
-            {categoryLabel}
-          </div>
+          {!compact && (
+            <div className="truncate text-xs capitalize leading-tight text-gray-500 mt-0.5">
+              {categoryLabel}
+            </div>
+          )}
         </div>
       </div>
 
@@ -528,17 +549,17 @@ export const AssetRow = memo(function AssetRow({
                 {asset.type === "sample" ? (
                   <WaveformViewer
                     assetId={asset.id}
-                    height={36}
+                    height={compact ? 20 : 36}
                     progress={progress}
                     onSeek={playFrom}
                   />
                 ) : asset.type === "midi" ? (
                   <MidiViewer
                     notes={(asset.meta as MidiMeta)?.pianoRoll ?? []}
-                    height={36}
+                    height={compact ? 20 : 36}
                   />
                 ) : (
-                  <div className="flex h-9 w-full items-center justify-center rounded-lg bg-gray-800">
+                  <div className={`flex w-full items-center justify-center rounded-lg bg-gray-800 ${compact ? "h-5" : "h-9"}`}>
                     <Icon
                       size={18}
                       color="var(--color-text-muted)"
@@ -549,12 +570,14 @@ export const AssetRow = memo(function AssetRow({
               </div>
             )}
 
-            <div
-              className="mono shrink-0 text-right text-xs sm:text-sm text-gray-500"
-              style={{ minWidth: "40px" }}
-            >
-              {formatDuration(asset.durationMs)}
-            </div>
+            {showTimeBadge && (
+              <div
+                className="mono shrink-0 text-right text-xs sm:text-sm text-gray-500"
+                style={{ minWidth: "40px" }}
+              >
+                {formatDuration(asset.durationMs)}
+              </div>
+            )}
 
             {showKeyBadge && (
               <div
@@ -589,6 +612,21 @@ export const AssetRow = memo(function AssetRow({
         )}
       </div>
 
+      {/* ══ FOLDER: optional path column ══ */}
+      {showFolderColumn && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            goToFolder();
+          }}
+          className="mono hidden shrink-0 truncate text-left text-[11px] text-gray-500 transition-colors hover:text-stack-white xl:block"
+          style={{ width: 160 }}
+          title={asset.path}
+        >
+          {folderLabel}
+        </button>
+      )}
+
       {/* ══ RIGHT: Favorite · More ══ */}
       <div
         className="flex shrink-0 items-center justify-end gap-0.5 sm:gap-1"