Addresses #1066 by moving the search results into a dropdown.

The dropdown can be summoned by clicking on the search field. It will
only appear if the search field is not empty. When the search field is
not empty the dropdown can be also be summoned by clicking on the arrow
or search result count.

There are still some wrinkles where the dropdown doesn’t appear when
expected; I’d appreciate feedback to help reproduce those cases.

This change should still work with custom search result tabs.

core/ui/DefaultSearchResultList.tid

@@ -3,12 +3,6 @@ tags: $:/tags/SearchResults
 caption: {{$:/language/Search/DefaultResults/Caption}}
 
 \define searchResultList()
-<$set name="resultCount" value="""<$count filter="[!is[system]search{$(searchTiddler)$}]"/>""">
-
-{{$:/language/Search/Matches}}
-
-</$set>
-
 //<small>Title matches:</small>//
 
 <$list filter="[!is[system]search:title{$(searchTiddler)$}sort[title]limit[250]]" template="$:/core/ui/ListItemTemplate"/>
@@ -16,5 +10,6 @@ caption: {{$:/language/Search/DefaultResults/Caption}}
 //<small>All matches:</small>//
 
 <$list filter="[!is[system]search{$(searchTiddler)$}sort[title]limit[250]]" template="$:/core/ui/ListItemTemplate"/>
+
 \end
 <<searchResultList>>

core/ui/SearchResults.tid

@@ -7,7 +7,9 @@ title: $:/core/ui/SearchResults
 <$transclude mode="block"/>
 </$list>
 """>
+
 <$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/SearchResults]!has[draft.of]]" default={{$:/config/SearchResults/Default}}/>
+
 </$list>
 
 </div>

core/ui/SideBarLists.tid

@@ -2,8 +2,9 @@ title: $:/core/ui/SideBarLists
 
 <div class="tc-sidebar-lists">
 
+<$set name="searchTiddler" value="$:/temp/search">
 <div class="tc-search">
-<$edit-text tiddler="$:/temp/search" type="search" tag="input" focus={{$:/config/Search/AutoFocus}}/>
+<$edit-text tiddler="$:/temp/search" type="search" tag="input" focus={{$:/config/Search/AutoFocus}} focusPopup=<<qualify "$:/state/popup/search-dropdown">> class="tc-popup-handle"/>
 <$reveal state="$:/temp/search" type="nomatch" text="">
 <$button tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} class="tc-btn-invisible">
 <$action-setfield $tiddler="$:/temp/advancedsearch" text={{$:/temp/search}}/>
@@ -15,6 +16,11 @@ title: $:/core/ui/SideBarLists
 <$action-setfield $tiddler="$:/temp/search" text="" />
 {{$:/core/images/close-button}}
 </$button>
+<$button popup=<<qualify "$:/state/popup/search-dropdown">> class="tc-btn-invisible">
+<$set name="resultCount" value="""<$count filter="[!is[system]search{$(searchTiddler)$}]"/>""">
+{{$:/core/images/down-arrow}} {{$:/language/Search/Matches}}
+</$set>
+</$button>
 </$reveal>
 <$reveal state="$:/temp/search" type="match" text="">
 <$button to="$:/AdvancedSearch" tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} class="tc-btn-invisible">
@@ -25,16 +31,20 @@ title: $:/core/ui/SideBarLists
 
 <$reveal state="$:/temp/search" type="nomatch" text="">
 
-<$set name="searchTiddler" value="$:/temp/search">
+<$reveal state=<<qualify "$:/state/popup/search-dropdown">> type="nomatch" text="" default="">
+
+<div class="tc-drop-down tc-search-drop-down tc-popup-handle">
+
 {{$:/core/ui/SearchResults}}
-</$set>
+
+</div>
 
 </$reveal>
 
-<$reveal state="$:/temp/search" type="match" text="">
+</$reveal>
+
+</$set>
 
 <$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/SideBar]!has[draft.of]]" default={{$:/config/DefaultSidebarTab}} state="$:/state/tab/sidebar" />
 
-</$reveal>
-
 </div>

themes/tiddlywiki/vanilla/base.tid

@@ -617,10 +617,6 @@ button.tc-untagged-label {
 	vertical-align: middle;
 }
 
-.tc-search-results {
-	padding-top: 14px;
-}
-
 .tc-page-controls {
 	margin-top: 14px;
 	font-size: 1.5em;
@@ -1195,6 +1191,8 @@ html body.tc-body.tc-single-tiddler-window {
 }
 
 .tc-drop-down {
+	position: absolute;
+	z-index: 1000;
 	min-width: 380px;
 	border: 1px solid <<colour dropdown-border>>;
 	background-color: <<colour dropdown-background>>;
@@ -1205,6 +1203,10 @@ html body.tc-body.tc-single-tiddler-window {
 	line-height: 1.4;
 }
 
+.tc-search-drop-down {
+	margin-left: -12px;
+}
+
 .tc-drop-down .tc-drop-down {
 	margin-left: 14px;
 }
@@ -1526,6 +1528,8 @@ html body.tc-body.tc-single-tiddler-window {
 }
 
 .tc-sidebar-lists .tc-tab-buttons button {
+	display: inline;
+	width: auto;
 	background-color: <<colour sidebar-tab-background>>;
 	color: <<colour sidebar-tab-foreground>>;
 	border-left: 1px solid <<colour sidebar-tab-border>>;
@@ -1538,6 +1542,8 @@ html body.tc-body.tc-single-tiddler-window {
 }
 
 .tc-more-sidebar .tc-tab-buttons button {
+	display: block;
+	width: 100%;
 	background-color: <<colour sidebar-tab-background>>;
 	border-top: none;
 	border-left: none;