Readable everywhere: contrast floors, glyphs, search and details

plans/folio.md

@@ -34,7 +34,7 @@ Done, tested, and verified offscreen:
 - `/` searches this folder and every folder below it by name as you type: a live breadth-first walk, nearest first, that stays on the folder's drive and doesn't follow symlinked folders.
 - Three views, remembered between launches: grid (Ctrl+1), list with name, size and date (Ctrl+2; no headings; the date then the size step aside when narrow), and Finder-style columns (Ctrl+3).
 - Preview pane: large preview, the system's type name, size, modified, dimensions, opening lines of text files, Open.
-- Sidebar: a Home section (its label goes home) listing every folder in home (XDG folders and Dropbox with their own glyphs, `omarchy` shown as Omarchy); Pinned folders (Ctrl+D or drag onto the sidebar) stored as GTK bookmarks; Dropbox (with `dropbox-cli` sync status), Trash, physical drives (removable and extra internal disks, not the system's own), online tailnet machines from `tailscale status --json`.
+- Sidebar: a Home section holding Home, every folder in home (XDG folders and Dropbox with their own glyphs, `omarchy` shown as Omarchy), Recents and Trash; Pinned folders (Ctrl+D or drag onto the sidebar) stored as GTK bookmarks; Dropbox (with `dropbox-cli` sync status), physical drives (removable and extra internal disks, not the system's own), online tailnet machines from `tailscale status --json`.
 - Tailnet machines open over SFTP through GIO, landing in the matching home folder; their host keys are accepted without asking (Tailscale already checked the peer), and a password, when keys aren't set up, is asked in the window.
 - Mouse back/forward buttons move through history (in the preview: previous/next file).
 - Space opens a large preview in its own process (`folio preview`), like Sushi: pictures at full size with zoom, animated GIF/WebP, video and audio playing (Qt Multimedia's FFmpeg backend), PDFs scrolling (Qt PDF), text and rendered Markdown, folders with their pictures, and the largest cached thumbnail for anything else. Arrows step through the folder and the grid follows; a crash in the preview is reported in the Folio window. Ctrl+I toggles the details pane.

src/Band.qml

@@ -81,6 +81,6 @@ MouseArea {
         height: Math.abs(band.end.y - band.start.y)
         color: Qt.alpha(theme.accent, 0.12)
         border.width: 1
-        border.color: theme.accent
+        border.color: theme.accentMark
     }
 }

src/ClashDialog.qml

@@ -56,7 +56,7 @@ FolioDialog {
                 radius: Math.min(3, theme.radius)
                 color: forAll.checked ? theme.accent : "transparent"
                 border.width: forAll.checked ? 0 : 1
-                border.color: forAll.visualFocus ? theme.accent : Qt.alpha(theme.foreground, 0.4)
+                border.color: forAll.visualFocus ? theme.accentMark : Qt.alpha(theme.foreground, 0.4)
                 Glyph {
                     anchors.centerIn: parent
                     visible: forAll.checked

src/FileDrop.qml

@@ -0,0 +1,19 @@
+import QtQuick
+
+// A folder files can be dropped on. While they hover it knows whether letting go moves or copies them.
+DropArea {
+    id: area
+    property string folder
+    property bool copies: false
+    // Whether the hovering files all come from other drives. It asks the drives, so it is read once a drag, never on the timer.
+    property bool otherDrive: false
+    // The drag loop takes the key events, so Ctrl pressed or let go with the pointer still is seen only by asking again.
+    readonly property int ctrlCheckMs: 100
+
+    keys: ["text/uri-list"]
+    function recheck() { copies = otherDrive || fileOps.ctrlHeld() }
+    onEntered: (drag) => { otherDrive = fileOps.dropCopies(drag.urls, folder, false); recheck() }
+    onPositionChanged: recheck()
+
+    Timer { interval: area.ctrlCheckMs; repeat: true; running: area.containsDrag; onTriggered: area.recheck() }
+}

src/FileMenu.qml

@@ -123,6 +123,8 @@ FolioMenu {
             FolioMenuItem {
                 required property var modelData
                 text: modelData.isDefault ? qsTr("%1 (default)").arg(modelData.name) : modelData.name
+                iconColumn: true
+                icon.source: modelData.icon ? "image://appicon/" + encodeURIComponent(modelData.icon) : ""
                 onTriggered: fileOps.openWith(fileMenu.target.path, modelData.id)
             }
         }

src/FileRow.qml

@@ -20,8 +20,12 @@ Item {
     required property int itemCount
     required property string icon
     required property bool selected
+    required property string fileName
+    required property string folder
 
     property bool current: false
+    // In a pane the keys don't go to: the selection is drawn without the accent.
+    property bool inactive: false
     // In a column to the left: the folder the next column is showing.
     property bool trail: false
     property bool detailed: false
@@ -37,34 +41,37 @@ Item {
     // for it.)
     readonly property bool showDate: detailed && width >= 480
     readonly property bool showSize: detailed && width >= 380
+    // With nothing selected, keys act on the cursor's item; only the folder being shown has one.
+    readonly property bool cursor: ListView.isCurrentItem && ListView.view.model === backend.folder && backend.folder.selectedCount === 0
 
     readonly property string glyph: row.isDir ? "folder"
                                   : row.kind === "item" ? row.icon
                                   : row.kind === "image" ? "pictures"
                                   : row.kind === "video" ? "videos"
                                   : row.kind === "audio" ? "music"
                                   : row.kind === "pdf" || row.kind === "text" ? "documents"
+                                  : row.kind === "archive" ? "archive"
                                   : "file"
 
     // A folder row takes files dropped on it, lighting up while they hover.
-    DropArea {
+    FileDrop {
         id: folderDrop
         anchors.fill: parent
         enabled: row.isDir
-        keys: ["text/uri-list"]
+        folder: row.path
         onEntered: (drag) => { drag.accepted = fileOps.canDrop(drag.urls, row.path) }
-        onDropped: (drop) => { fileOps.dropInto(drop.urls, row.path); drop.accept(Qt.MoveAction) }
+        onDropped: (drop) => drop.accept(fileOps.dropInto(drop.urls, row.path, fileOps.ctrlHeld()))
     }
 
     Rectangle {
         anchors.fill: parent
         anchors.leftMargin: 4
         anchors.rightMargin: 4
         radius: Math.min(4, theme.radius)
-        border.width: folderDrop.containsDrag ? 2 : 0
-        border.color: theme.accent
-        color: row.current || folderDrop.containsDrag ? Qt.alpha(theme.accent, 0.18)
-             : row.trail ? Qt.alpha(theme.foreground, 0.08)
+        border.width: folderDrop.containsDrag ? 2 : row.cursor ? 1 : 0
+        border.color: row.inactive && !folderDrop.containsDrag ? theme.quietMark : theme.accentMark
+        color: row.current && !row.inactive || folderDrop.containsDrag ? Qt.alpha(theme.accent, 0.18)
+             : row.trail || row.current ? Qt.alpha(theme.foreground, 0.08)
              : hover.hovered ? Qt.alpha(theme.foreground, 0.05)
              : "transparent"
     }
@@ -113,34 +120,55 @@ Item {
         // mirrored: left as they are, they'd follow their own script, and a
         // Latin name would sit at the far end of a right-to-left row.
         Text {
+            // A search result lights the run of its name that matched; only the folder being shown is searched.
+            readonly property string lit: row.ListView.view.model === backend.folder
+                ? Format.lit(row.fileName, backend.folder.matchStart(row.fileName), backend.folder.query.length, theme.brightForeground) : ""
             Layout.fillWidth: true
             Layout.minimumWidth: 120
             horizontalAlignment: Text.AlignLeft
-            text: row.name
-            color: row.current ? theme.accent : theme.foreground
+            text: lit || row.fileName
+            textFormat: lit ? Text.StyledText : Text.PlainText
+            color: row.current ? theme.brightForeground : theme.foreground
             elide: Text.ElideMiddle
         }
         Text {
-            visible: row.showSize
+            visible: row.folder.length > 0
+            Layout.maximumWidth: Math.round(row.width / 3)
+            horizontalAlignment: Text.AlignLeft
+            text: row.folder
+            textFormat: Text.PlainText
+            color: theme.secondaryForeground
+            font.pixelSize: 12
+            elide: Text.ElideMiddle
+        }
+        Text {
+            visible: row.showSize && !folderDrop.containsDrag
             Layout.preferredWidth: 96
             horizontalAlignment: Text.AlignRight
             text: row.kind === "item" ? row.extension : row.isDir ? Format.count(row.itemCount) : Format.size(row.size)
-            color: theme.secondaryForeground
+            color: row.current ? theme.foreground : theme.secondaryForeground
             font.pixelSize: 12
         }
         Text {
-            visible: row.showDate
+            visible: row.showDate && !folderDrop.containsDrag
             Layout.preferredWidth: 96
             Layout.leftMargin: 12
             horizontalAlignment: Text.AlignLeft
             text: {
                 translator.language // Re-read when the language (and so the default locale) changes.
                 return Format.when(row.modified)
             }
-            color: theme.secondaryForeground
+            color: row.current ? theme.foreground : theme.secondaryForeground
             font.pixelSize: 12
             elide: Text.ElideRight
         }
+        // While files hover a folder, what the drop will do takes the size and date's place.
+        Text {
+            visible: folderDrop.containsDrag
+            text: folderDrop.copies ? qsTr("Copy here") : qsTr("Move here")
+            color: theme.foreground
+            font.pixelSize: 12
+        }
         // Points to where the next column opens.
         Glyph {
             visible: row.chevron && row.isDir