add pin button as a search shortcut

slatinsky · Nov 4, 2023 · 5edbd71 · 5edbd71
1 parent 9377ecc
commit 5edbd71
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 9 deletions.
diff --git a/frontend/src/components/icons/IconPin.svelte b/frontend/src/components/icons/IconPin.svelte
@@ -0,0 +1,14 @@
+<svg
+	x="0"
+	y="0"
+	class="pinned-messages-icon"
+	aria-hidden="true"
+	role="img"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	><path
+		fill="currentColor"
+		d="M22 12L12.101 2.10101L10.686 3.51401L12.101 4.92901L7.15096 9.87801V9.88001L5.73596 8.46501L4.32196 9.88001L8.56496 14.122L2.90796 19.778L4.32196 21.192L9.97896 15.536L14.222 19.778L15.636 18.364L14.222 16.95L19.171 12H19.172L20.586 13.414L22 12Z"
+	/></svg
+>
diff --git a/frontend/src/components/search/SearchResults.svelte b/frontend/src/components/search/SearchResults.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import MesssageSpoilerHandler from '../messages/MesssageSpoilerHandler.svelte';
 	import Scroller from '../containers/Scroller3.svelte';
-	import { isSearching, searchPrompt, searchResultsMessageIds, searchShown, submitSearch } from './searchStores';
+	import { doSearch, isSearching, searchPrompt, searchResultsMessageIds, searchShown, submitSearch } from './searchStores';
 	import MessageLoader from '../messages/MessageLoader.svelte';
 	let searchResults
 	export let guildId: string
@@ -18,14 +18,11 @@
 	}
 
 	function showAllResults() {
-		// check if $searchPrompt includes limit:
 		if ($searchPrompt.includes('limit:')) {
-			$searchPrompt = $searchPrompt.replace(/limit:\d+/, 'limit:0')
+			doSearch($searchPrompt.replace(/limit:\d+/, 'limit:0'), guildId)
 		} else {
-			$searchPrompt = 'limit:0 ' + $searchPrompt 
+			doSearch('limit:0 ' + $searchPrompt, guildId)
 		}
-		console.log($searchPrompt)
-		submitSearch(guildId)
 	}
 </script>
 

diff --git a/frontend/src/components/search/searchStores.ts b/frontend/src/components/search/searchStores.ts
@@ -17,4 +17,13 @@ export async function submitSearch(guildId: string) {
     searchResultsMessageIds.set(json);
     searchShown.set(true);
     isSearching.set(false);
+}
+
+export function doSearch(prompt: string, guildId: string) {
+    if (prompt == "") {
+        searchPrompt.set("");
+        return;
+    }
+    searchPrompt.set(prompt);
+    submitSearch(guildId);
 }
diff --git a/frontend/src/routes/channels/[guildId]/Header.svelte b/frontend/src/routes/channels/[guildId]/Header.svelte
@@ -1,13 +1,28 @@
 <script lang="ts">
 	import type { Channel } from 'src/js/interfaces';
-	import IconChannel from '../../../components/icons/IconChannel.svelte';
-	import SearchFilter from '../../../components/search/SearchFilter.svelte';
+	import IconChannel from 'src/components/icons/IconChannel.svelte';
+	import SearchFilter from 'src/components/search/SearchFilter.svelte';
 	import HamburgerBtn from 'src/components/menu/HamburgerBtn.svelte';
-	import { searchPromptLarge } from 'src/components/search/searchStores';
+	import { doSearch, searchPrompt, searchPromptLarge } from 'src/components/search/searchStores';
+	import IconPin from 'src/components/icons/IconPin.svelte';
 
 	export let channel: Channel | null = null;
 	export let thread: Channel | null = null;
 	export let guildId: string;
+
+	function pinnedSearch() {
+		if (channel === null)
+			return;
+
+		let newPrompt = `pinned:true in:"${channel.name}"`
+
+		if ($searchPrompt == newPrompt) {
+			doSearch('', guildId);
+		}
+		else {
+			doSearch(newPrompt, guildId);
+		}
+	}
 </script>
 
 <section class="header-container">
@@ -39,6 +54,11 @@
 				{/if}
 			</div>
 			<div class="spacer" />
+			{#if channel !== null}
+				<div class="pin" on:click={pinnedSearch}>
+					<IconPin />
+				</div>
+			{/if}
 			<SearchFilter {guildId} />
 		</div>
 	</div>
@@ -114,4 +134,13 @@
 			display: none;
 		}
 	}
+
+	.pin {
+		color: #B5BAC1;
+		display: grid;
+		place-items: center;
+	}
+	.pin:hover {
+		color: #DBDEE1;
+	}
 </style>