retold-remote 0.0.1 → 0.0.2

package/source/views/PictView-Remote-Gallery.js

@@ -113,6 +113,44 @@ const _ViewConfiguration =
 		{
 			color: var(--retold-text-placeholder);
 		}
+		.retold-remote-gallery-search-options
+		{
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			flex-shrink: 0;
+		}
+		.retold-remote-gallery-search-option
+		{
+			display: inline-flex;
+			align-items: center;
+			gap: 3px;
+			font-size: 0.68rem;
+			color: var(--retold-text-dim);
+			cursor: pointer;
+			white-space: nowrap;
+			user-select: none;
+		}
+		.retold-remote-gallery-search-option:hover
+		{
+			color: var(--retold-text-muted);
+		}
+		.retold-remote-gallery-search-option input[type="checkbox"]
+		{
+			margin: 0;
+			cursor: pointer;
+			accent-color: var(--retold-accent);
+		}
+		.retold-remote-gallery-search-option.active
+		{
+			color: var(--retold-accent);
+		}
+		.retold-remote-gallery-search-regex-error
+		{
+			font-size: 0.68rem;
+			color: #e06c75;
+			white-space: nowrap;
+		}
 		/* Filter chips */
 		.retold-remote-filter-chips
 		{
@@ -635,6 +673,12 @@ class RetoldRemoteGalleryView extends libPictView
 		let tmpThumbnailSize = tmpRemote.ThumbnailSize || 'medium';
 		let tmpCursorIndex = tmpRemote.GalleryCursorIndex || 0;
 
+		// Capture search input focus state before re-render so we can restore it
+		let tmpSearchEl = document.getElementById('RetoldRemote-Gallery-Search');
+		let tmpSearchHadFocus = tmpSearchEl && (document.activeElement === tmpSearchEl);
+		let tmpSearchSelStart = tmpSearchHadFocus ? tmpSearchEl.selectionStart : 0;
+		let tmpSearchSelEnd = tmpSearchHadFocus ? tmpSearchEl.selectionEnd : 0;
+
 		// Build header with type filters, sort, filter toggle, and search
 		let tmpHTML = this._buildHeaderHTML(tmpRemote.FilterState ? tmpRemote.FilterState.MediaType : 'all');
 
@@ -652,6 +696,17 @@ class RetoldRemoteGalleryView extends libPictView
 			tmpHTML += '<div>Empty folder</div>';
 			tmpHTML += '</div>';
 			tmpContainer.innerHTML = tmpHTML;
+
+			// Restore search focus even on empty results
+			if (tmpSearchHadFocus)
+			{
+				let tmpNewSearch = document.getElementById('RetoldRemote-Gallery-Search');
+				if (tmpNewSearch)
+				{
+					tmpNewSearch.focus();
+					tmpNewSearch.setSelectionRange(tmpSearchSelStart, tmpSearchSelEnd);
+				}
+			}
 			return;
 		}
 
@@ -667,6 +722,17 @@ class RetoldRemoteGalleryView extends libPictView
 
 		tmpContainer.innerHTML = tmpHTML;
 
+		// Restore search input focus and cursor position after re-render
+		if (tmpSearchHadFocus)
+		{
+			let tmpNewSearch = document.getElementById('RetoldRemote-Gallery-Search');
+			if (tmpNewSearch)
+			{
+				tmpNewSearch.focus();
+				tmpNewSearch.setSelectionRange(tmpSearchSelStart, tmpSearchSelEnd);
+			}
+		}
+
 		// Set up lazy loading for thumbnail images
 		this._setupLazyLoading();
 
@@ -676,6 +742,13 @@ class RetoldRemoteGalleryView extends libPictView
 		{
 			tmpNavProvider.recalculateColumns();
 		}
+
+		// Update the top bar filter icon state
+		let tmpTopBarView = this.pict.views['ContentEditor-TopBar'];
+		if (tmpTopBarView && tmpTopBarView.updateFilterIcon)
+		{
+			tmpTopBarView.updateFilterIcon();
+		}
 	}
 
 	// ──────────────────────────────────────────────
@@ -684,10 +757,18 @@ class RetoldRemoteGalleryView extends libPictView
 
 	/**
 	 * Build the gallery header with type filters, sort dropdown, filter toggle, and search.
+	 * The filter bar is hidden by default; toggled via / key or the top bar filter icon.
 	 */
 	_buildHeaderHTML(pActiveFilter)
 	{
 		let tmpRemote = this.pict.AppData.RetoldRemote;
+
+		// If the filter bar is not visible, don't render the header
+		if (!tmpRemote.FilterBarVisible)
+		{
+			return '';
+		}
+
 		let tmpFilters = [
 			{ key: 'all', label: 'All' },
 			{ key: 'images', label: 'Images' },
@@ -754,6 +835,24 @@ class RetoldRemoteGalleryView extends libPictView
 			+ 'placeholder="Search files... (/)" '
 			+ 'value="' + this._escapeHTML(tmpSearchValue) + '" '
 			+ 'oninput="pict.views[\'RetoldRemote-Gallery\'].onSearchInput(this.value)">';
+
+		// Case sensitivity and regex checkboxes
+		let tmpCaseSensitive = tmpRemote.SearchCaseSensitive || false;
+		let tmpRegex = tmpRemote.SearchRegex || false;
+		tmpHTML += '<div class="retold-remote-gallery-search-options">';
+		tmpHTML += '<label class="retold-remote-gallery-search-option' + (tmpCaseSensitive ? ' active' : '') + '">'
+			+ '<input type="checkbox" ' + (tmpCaseSensitive ? 'checked ' : '')
+			+ 'onchange="pict.views[\'RetoldRemote-Gallery\'].onSearchCaseSensitiveChange(this.checked)">'
+			+ 'Aa</label>';
+		tmpHTML += '<label class="retold-remote-gallery-search-option' + (tmpRegex ? ' active' : '') + '">'
+			+ '<input type="checkbox" ' + (tmpRegex ? 'checked ' : '')
+			+ 'onchange="pict.views[\'RetoldRemote-Gallery\'].onSearchRegexChange(this.checked)">'
+			+ '.*</label>';
+		if (tmpRemote._searchRegexError)
+		{
+			tmpHTML += '<span class="retold-remote-gallery-search-regex-error" title="' + this._escapeHTML(tmpRemote._searchRegexError) + '">invalid regex</span>';
+		}
+		tmpHTML += '</div>';
 		tmpHTML += '</div>';
 
 		return tmpHTML;
@@ -950,6 +1049,11 @@ class RetoldRemoteGalleryView extends libPictView
 				tmpHTML += '<div class="retold-remote-tile-thumb-icon"><span class="retold-remote-icon retold-remote-icon-md">' + (tmpIconProvider ? tmpIconProvider.getIcon('folder', 48) : '') + '</span></div>';
 				tmpHTML += '<span class="retold-remote-tile-badge retold-remote-tile-badge-folder">Folder</span>';
 			}
+			else if (tmpItem.Type === 'archive')
+			{
+				tmpHTML += '<div class="retold-remote-tile-thumb-icon"><span class="retold-remote-icon retold-remote-icon-md">' + (tmpIconProvider ? tmpIconProvider.getIcon('file-archive', 48) : '') + '</span></div>';
+				tmpHTML += '<span class="retold-remote-tile-badge retold-remote-tile-badge-folder">Archive</span>';
+			}
 			else if (tmpCategory === 'image' && tmpProvider)
 			{
 				let tmpThumbURL = tmpProvider.getThumbnailURL(tmpItem.Path, 400, 300);
@@ -1012,6 +1116,10 @@ class RetoldRemoteGalleryView extends libPictView
 			{
 				tmpHTML += '<div class="retold-remote-tile-meta">Folder</div>';
 			}
+			else if (tmpItem.Type === 'archive')
+			{
+				tmpHTML += '<div class="retold-remote-tile-meta">Archive' + (tmpItem.Size ? ' · ' + this._formatFileSize(tmpItem.Size) : '') + '</div>';
+			}
 
 			tmpHTML += '</div>'; // end tile
 		}
@@ -1047,7 +1155,7 @@ class RetoldRemoteGalleryView extends libPictView
 			tmpHTML += '<div class="retold-remote-list-icon">' + tmpIcon + '</div>';
 			tmpHTML += '<div class="retold-remote-list-name">' + this._escapeHTML(tmpItem.Name) + '</div>';
 
-			if (tmpItem.Type === 'file' && tmpItem.Size !== undefined)
+			if ((tmpItem.Type === 'file' || tmpItem.Type === 'archive') && tmpItem.Size !== undefined)
 			{
 				tmpHTML += '<div class="retold-remote-list-size">' + this._formatFileSize(tmpItem.Size) + '</div>';
 			}
@@ -1169,7 +1277,37 @@ class RetoldRemoteGalleryView extends libPictView
 	onSearchInput(pValue)
 	{
 		let tmpRemote = this.pict.AppData.RetoldRemote;
-		tmpRemote.SearchQuery = (pValue || '').toLowerCase();
+		tmpRemote.SearchQuery = pValue || '';
+
+		let tmpFilterSort = this.pict.providers['RetoldRemote-GalleryFilterSort'];
+		if (tmpFilterSort)
+		{
+			tmpFilterSort.applyFilterSort();
+		}
+	}
+
+	/**
+	 * Handle case-sensitive checkbox change.
+	 */
+	onSearchCaseSensitiveChange(pChecked)
+	{
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		tmpRemote.SearchCaseSensitive = pChecked;
+
+		let tmpFilterSort = this.pict.providers['RetoldRemote-GalleryFilterSort'];
+		if (tmpFilterSort)
+		{
+			tmpFilterSort.applyFilterSort();
+		}
+	}
+
+	/**
+	 * Handle regex checkbox change.
+	 */
+	onSearchRegexChange(pChecked)
+	{
+		let tmpRemote = this.pict.AppData.RetoldRemote;
+		tmpRemote.SearchRegex = pChecked;
 
 		let tmpFilterSort = this.pict.providers['RetoldRemote-GalleryFilterSort'];
 		if (tmpFilterSort)
@@ -1400,6 +1538,7 @@ class RetoldRemoteGalleryView extends libPictView
 	_getCategory(pExtension, pType)
 	{
 		if (pType === 'folder') return 'folder';
+		if (pType === 'archive') return 'archive';
 		// Delegate to the filter/sort provider if available
 		let tmpFilterSort = this.pict.providers['RetoldRemote-GalleryFilterSort'];
 		if (tmpFilterSort)

package/source/views/PictView-Remote-Layout.js

@@ -102,32 +102,6 @@ const _ViewConfiguration =
 		{
 			display: none;
 		}
-		/* Collapse toggle */
-		.content-editor-sidebar-toggle
-		{
-			position: absolute;
-			top: 8px;
-			right: -20px;
-			width: 20px;
-			height: 28px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			background: var(--retold-bg-tertiary);
-			border: 1px solid var(--retold-border);
-			border-left: none;
-			border-radius: 0 4px 4px 0;
-			cursor: pointer;
-			z-index: 10;
-			color: var(--retold-text-muted);
-			font-size: 11px;
-			line-height: 1;
-			transition: color 0.15s;
-		}
-		.content-editor-sidebar-toggle:hover
-		{
-			color: var(--retold-text-primary);
-		}
 		/* Resize handle */
 		.content-editor-resize-handle
 		{
@@ -186,6 +160,17 @@ const _ViewConfiguration =
 			background: var(--retold-bg-selected);
 			color: var(--retold-accent);
 		}
+		#ContentEditor-Sidebar-Container .pict-fb-detail-row.sidebar-focused
+		{
+			outline: 2px solid var(--retold-accent);
+			outline-offset: -2px;
+			background: var(--retold-bg-hover);
+			color: var(--retold-text-primary);
+		}
+		.content-editor-sidebar-inner.keyboard-focused
+		{
+			box-shadow: inset 0 0 0 1px var(--retold-accent);
+		}
 		#ContentEditor-Sidebar-Container .pict-fb-breadcrumbs
 		{
 			color: var(--retold-text-muted);
@@ -233,7 +218,6 @@ const _ViewConfiguration =
 				<div id="ContentEditor-TopBar-Container"></div>
 				<div class="content-editor-body">
 					<div class="content-editor-sidebar-wrap" style="width: 250px;">
-						<div class="content-editor-sidebar-toggle" onclick="pict.views['ContentEditor-Layout'].toggleSidebar()">&#9664;</div>
 						<div class="content-editor-sidebar-inner">
 							<div class="content-editor-sidebar-tabs">
 								<button class="content-editor-sidebar-tab active" data-tab="files" onclick="pict.views['ContentEditor-Layout'].switchSidebarTab('files')">Files</button>
@@ -412,6 +396,13 @@ class RetoldRemoteLayoutView extends libPictView
 		}
 
 		tmpHandle.addEventListener('mousedown', onMouseDown);
+
+		// Double-click on resize handle collapses the sidebar
+		tmpHandle.addEventListener('dblclick', function (pEvent)
+		{
+			pEvent.preventDefault();
+			tmpSelf.toggleSidebar();
+		});
 	}
 }