1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-04-03 20:32:07 -04:00

launcher v2: improve search result responsiveness, highlight matches

This commit is contained in:
bbedward
2026-02-02 12:48:52 -05:00
parent 546cbfb3ca
commit d934b3b3b4
5 changed files with 163 additions and 30 deletions

View File

@@ -26,6 +26,8 @@ Item {
property string activePluginId: ""
property var collapsedSections: ({})
property bool keyboardNavigationActive: false
property var _modeSectionsCache: ({})
property bool _queryDrivenSearch: false
property var sectionViewModes: ({})
property var pluginViewPreferences: ({})
property int gridColumns: SettingsData.appLauncherGridColumns
@@ -42,6 +44,14 @@ Item {
target: SettingsData
function onSortAppsAlphabeticallyChanged() {
AppSearchService.invalidateLauncherCache();
_clearModeCache();
}
}
Connections {
target: AppSearchService
function onCacheInvalidated() {
_clearModeCache();
}
}
@@ -266,6 +276,7 @@ Item {
function setSearchQuery(query) {
_searchVersion++;
_queryDrivenSearch = true;
searchQuery = query;
searchDebounce.restart();
@@ -324,6 +335,8 @@ Item {
activePluginCategory = "";
pluginFilter = "";
collapsedSections = {};
_clearModeCache();
_queryDrivenSearch = false;
}
function loadPluginCategories(pluginId) {
@@ -369,7 +382,11 @@ Item {
return false;
}
function preserveSelectionAfterUpdate() {
function preserveSelectionAfterUpdate(forceFirst) {
if (forceFirst)
return function () {
return getFirstItemIndex();
};
var previousSelectedId = selectedItem?.id || "";
return function (newFlatModel) {
if (!previousSelectedId)
@@ -385,7 +402,9 @@ Item {
function performSearch() {
var currentVersion = _searchVersion;
isSearching = true;
var restoreSelection = preserveSelectionAfterUpdate();
var shouldResetSelection = _queryDrivenSearch;
_queryDrivenSearch = false;
var restoreSelection = preserveSelectionAfterUpdate(shouldResetSelection);
var cachedSections = AppSearchService.getCachedDefaultSections();
if (cachedSections && !searchQuery && searchMode === "all" && !pluginFilter) {
@@ -394,15 +413,22 @@ Item {
activePluginCategories = [];
activePluginCategory = "";
clearActivePluginViewPreference();
sections = cachedSections.map(function (s) {
var copy = Object.assign({}, s, {
items: s.items ? s.items.slice() : []
var modeCache = _getCachedModeData("all");
if (modeCache) {
sections = modeCache.sections;
flatModel = modeCache.flatModel;
} else {
sections = cachedSections.map(function (s) {
var copy = Object.assign({}, s, {
items: s.items ? s.items.slice() : []
});
if (collapsedSections[s.id] !== undefined)
copy.collapsed = collapsedSections[s.id];
return copy;
});
if (collapsedSections[s.id] !== undefined)
copy.collapsed = collapsedSections[s.id];
return copy;
});
flatModel = Scorer.flattenSections(sections);
flatModel = Scorer.flattenSections(sections);
_setCachedModeData("all", sections, flatModel);
}
selectedFlatIndex = restoreSelection(flatModel);
updateSelectedItem();
isSearching = false;
@@ -475,18 +501,25 @@ Item {
if (searchMode === "apps") {
var cachedSections = AppSearchService.getCachedDefaultSections();
if (cachedSections && !searchQuery) {
var appSectionIds = ["favorites", "apps"];
sections = cachedSections.filter(function (s) {
return appSectionIds.indexOf(s.id) !== -1;
}).map(function (s) {
var copy = Object.assign({}, s, {
items: s.items ? s.items.slice() : []
var modeCache = _getCachedModeData("apps");
if (modeCache) {
sections = modeCache.sections;
flatModel = modeCache.flatModel;
} else {
var appSectionIds = ["favorites", "apps"];
sections = cachedSections.filter(function (s) {
return appSectionIds.indexOf(s.id) !== -1;
}).map(function (s) {
var copy = Object.assign({}, s, {
items: s.items ? s.items.slice() : []
});
if (collapsedSections[s.id] !== undefined)
copy.collapsed = collapsedSections[s.id];
return copy;
});
if (collapsedSections[s.id] !== undefined)
copy.collapsed = collapsedSections[s.id];
return copy;
});
flatModel = Scorer.flattenSections(sections);
flatModel = Scorer.flattenSections(sections);
_setCachedModeData("apps", sections, flatModel);
}
selectedFlatIndex = restoreSelection(flatModel);
updateSelectedItem();
isSearching = false;
@@ -1055,6 +1088,23 @@ Item {
return Nav.getFirstItemIndex(flatModel);
}
function _getCachedModeData(mode) {
return _modeSectionsCache[mode] || null;
}
function _setCachedModeData(mode, sectionsData, flatModelData) {
var cache = Object.assign({}, _modeSectionsCache);
cache[mode] = {
sections: sectionsData,
flatModel: flatModelData
};
_modeSectionsCache = cache;
}
function _clearModeCache() {
_modeSectionsCache = {};
}
function updateSelectedItem() {
if (selectedFlatIndex >= 0 && selectedFlatIndex < flatModel.length) {
var entry = flatModel[selectedFlatIndex];
@@ -1158,6 +1208,7 @@ Item {
}
function toggleSection(sectionId) {
_clearModeCache();
var newCollapsed = Object.assign({}, collapsedSections);
var currentState = newCollapsed[sectionId];

View File

@@ -90,6 +90,8 @@ Item {
spotlightContent.controller.activePluginName = "";
spotlightContent.controller.pluginFilter = "";
spotlightContent.controller.collapsedSections = {};
spotlightContent.controller.selectedFlatIndex = 0;
spotlightContent.controller.selectedItem = null;
if (query) {
spotlightContent.controller.setSearchQuery(query);
} else {

View File

@@ -35,6 +35,21 @@ Rectangle {
readonly property int computedIconSize: Math.min(48, Math.max(32, width * 0.45))
function highlightText(text, query, baseColor) {
if (!text || !query || query.length === 0)
return text;
var lowerText = text.toLowerCase();
var lowerQuery = query.toLowerCase();
var idx = lowerText.indexOf(lowerQuery);
if (idx === -1)
return text;
var before = text.substring(0, idx);
var match = text.substring(idx, idx + query.length);
var after = text.substring(idx + query.length);
var highlightColor = Theme.primary;
return '<span style="color:' + baseColor + '">' + before + '</span>' + '<span style="color:' + highlightColor + '; font-weight:600">' + match + '</span>' + '<span style="color:' + baseColor + '">' + after + '</span>';
}
radius: Theme.cornerRadius
color: isSelected ? Theme.primaryPressed : isHovered ? Theme.primaryHoverLight : "transparent"
@@ -55,11 +70,20 @@ Rectangle {
materialIconSizeAdjustment: root.computedIconSize * 0.3
}
StyledText {
Text {
width: parent.width
text: root.item?.name ?? ""
text: {
var query = root.controller?.searchQuery ?? "";
var name = root.item?.name ?? "";
var baseColor = root.isSelected ? Theme.primary : Theme.surfaceText;
if (!query)
return name;
return root.highlightText(name, query, baseColor);
}
textFormat: root.controller?.searchQuery ? Text.RichText : Text.PlainText
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
font.family: Theme.fontFamily
color: root.isSelected ? Theme.primary : Theme.surfaceText
elide: Text.ElideRight
horizontalAlignment: Text.AlignHCenter

View File

@@ -33,6 +33,21 @@ Rectangle {
}
}
function highlightText(text, query, baseColor) {
if (!text || !query || query.length === 0)
return text;
var lowerText = text.toLowerCase();
var lowerQuery = query.toLowerCase();
var idx = lowerText.indexOf(lowerQuery);
if (idx === -1)
return text;
var before = text.substring(0, idx);
var match = text.substring(idx, idx + query.length);
var after = text.substring(idx + query.length);
var highlightColor = Theme.primary;
return '<span style="color:' + baseColor + '">' + before + '</span>' + '<span style="color:' + highlightColor + '; font-weight:600">' + match + '</span>' + '<span style="color:' + baseColor + '">' + after + '</span>';
}
width: parent?.width ?? 200
height: 52
color: isSelected ? Theme.primaryPressed : isHovered ? Theme.primaryHoverLight : "transparent"
@@ -82,23 +97,41 @@ Rectangle {
width: parent.width - 36 - Theme.spacingM * 3 - rightContent.width
spacing: 2
StyledText {
Text {
width: parent.width
text: root.item?.name ?? ""
text: {
var query = root.controller?.searchQuery ?? "";
var name = root.item?.name ?? "";
if (!query)
return name;
return root.highlightText(name, query, Theme.surfaceText);
}
textFormat: root.controller?.searchQuery ? Text.RichText : Text.PlainText
font.pixelSize: Theme.fontSizeMedium
font.weight: Font.Medium
font.family: Theme.fontFamily
color: Theme.surfaceText
elide: Text.ElideRight
horizontalAlignment: Text.AlignLeft
}
StyledText {
Text {
width: parent.width
text: root.item?.subtitle ?? ""
text: {
var query = root.controller?.searchQuery ?? "";
var subtitle = root.item?.subtitle ?? "";
if (!subtitle)
return "";
if (!query)
return subtitle;
return root.highlightText(subtitle, query, Theme.surfaceVariantText);
}
textFormat: root.controller?.searchQuery ? Text.RichText : Text.PlainText
font.pixelSize: Theme.fontSizeSmall
font.family: Theme.fontFamily
color: Theme.surfaceVariantText
elide: Text.ElideRight
visible: text.length > 0
visible: (root.item?.subtitle ?? "").length > 0
horizontalAlignment: Text.AlignLeft
}
}

View File

@@ -23,6 +23,21 @@ Rectangle {
border.width: isSelected ? 2 : 0
border.color: Theme.primary
function highlightText(text, query, baseColor) {
if (!text || !query || query.length === 0)
return text;
var lowerText = text.toLowerCase();
var lowerQuery = query.toLowerCase();
var idx = lowerText.indexOf(lowerQuery);
if (idx === -1)
return text;
var before = text.substring(0, idx);
var match = text.substring(idx, idx + query.length);
var after = text.substring(idx + query.length);
var highlightColor = Theme.primary;
return '<span style="color:' + baseColor + '">' + before + '</span>' + '<span style="color:' + highlightColor + '; font-weight:600">' + match + '</span>' + '<span style="color:' + baseColor + '">' + after + '</span>';
}
readonly property string toplevelId: item?.data?.toplevelId ?? ""
readonly property var waylandToplevel: {
if (!toplevelId || !item?.pluginId)
@@ -108,12 +123,20 @@ Rectangle {
color: Theme.withAlpha(Theme.surfaceContainer, 0.85)
visible: root.item?.name?.length > 0
StyledText {
Text {
id: labelText
anchors.fill: parent
anchors.margins: Theme.spacingXS
text: root.item?.name ?? ""
text: {
var query = root.controller?.searchQuery ?? "";
var name = root.item?.name ?? "";
if (!query)
return name;
return root.highlightText(name, query, Theme.surfaceText);
}
textFormat: root.controller?.searchQuery ? Text.RichText : Text.PlainText
font.pixelSize: Theme.fontSizeSmall
font.family: Theme.fontFamily
color: Theme.surfaceText
elide: Text.ElideRight
horizontalAlignment: Text.AlignHCenter