refactor: abstract tips

app/client.imba

@@ -16,13 +16,14 @@ let refs = {}
 import api from './api'
 import config from './config'
 
-import app-community-links from './components/app-community-links'
-import app-settings from './components/app-settings'
-import app-prompt from './components/app-prompt'
-import app-edit from './components/app-edit'
-import app-links from './components/app-links'
-import app-link from './components/app-link'
-import app-bang from './components/app-bang'
+import './components/app-community-links'
+import './components/app-settings'
+import './components/app-prompt'
+import './components/app-edit'
+import './components/app-links'
+import './components/app-link'
+import './components/app-bang'
+import './components/app-tips'
 import './styles'
 
 extend tag element

app/components/app-links.imba

@@ -26,14 +26,14 @@ tag app-links
 		s ||= state.query
 		await window.navigator.clipboard.writeText(s)
 		state.query = ''
-		sort_links!
+		api.sort_links!
 
 	def handle_add
 		state.loading = yes
 		try
 			await api.add_link state.query
 			state.query = ''
-			sort_links!
+			api.sort_links!
 		catch e
 			err "adding link", e
 		state.loading = no
@@ -61,11 +61,6 @@ tag app-links
 		else
 			api.navigate link
 
-	def handle_del
-		if state.query.length < 1
-			state.active_bang = no
-			api.sort_links!
-
 	def handle_click_delete link
 		return unless window.confirm "Do you really want to delete {link..display_name}?"
 		handle_delete link
@@ -122,15 +117,6 @@ tag app-links
 
 					<input$links-input
 						bind=state.query
-						@hotkey('return').capture.if(!state.loading)=handle_return
-						@hotkey('tab').capture.if(!state.loading)=api.toggle_effective_names
-						@hotkey('esc').capture.if(!state.loading)=toggle_settings
-						@hotkey('shift+return').capture.if(!state.loading)=handle_shift_return
-						@hotkey('esc').capture.if(!state.loading)=handle_esc
-						@hotkey('shift+backspace').capture.if(!state.loading)=handle_shift_backspace
-						@hotkey('down').capture.if(!state.loading)=api.increment_link_selection_index
-						@hotkey('up').capture.if(!state.loading)=api.decrement_link_selection_index
-						@keydown.del.if(!state.loading)=handle_del
 						@input.if(!state.loading)=handle_input
 						@paste.if(!state.loading)=handle_paste
 						@cut=handle_cut
@@ -149,7 +135,7 @@ tag app-links
 				if config.data.enable_tips
 					if state.active_bang
 
-						<.tips>
+						<app-tips>
 
 							<.tip
 								@click=(state.active_bang = no)
@@ -160,7 +146,9 @@ tag app-links
 
 					else
 
-						<.tips>
+						<app-tips>
+
+							<.tip-row>
 
 								<.tip
 									@click=handle_click_link
@@ -169,10 +157,13 @@ tag app-links
 									<.tip-hotkey> "Return"
 									<.tip-content> "Navigate To Link"
 
-							<.tip[fl:2] @click=handle_shift_return>
+								<.tip
+									@click=handle_shift_return
+									@hotkey('shift+return').capture.if(!state.loading)=handle_shift_return
+								>
 									<.tip-hotkey> "Shift + Return"
 									<.tip-content.ellipsis>
-									<span[ws:pre]> "Add New Link "
+										<span[ws:pre]> "Create Link "
 										let sq = state.query.trim!.split /\s+/
 										if sq.length >= 2
 											let url = sq.pop!
@@ -183,13 +174,60 @@ tag app-links
 										else
 											<span> "\"{sq.join " "}\""
 
-							<.tip @click=handle_shift_backspace>
+								<.tip
+									@click=handle_shift_backspace
+									@hotkey('shift+backspace').capture.if(!state.loading)=handle_shift_backspace
+								>
 									<.tip-hotkey> "Shift + Backspace"
 									<.tip-content> "Edit Link"
 
+						<app-tips-more$tips-more>
+
+							<.tip-row>
+
+								<.tip
+									@click.if(!state.loading)=api.toggle_effective_names
+									@hotkey('tab').capture.if(!state.loading)=api.toggle_effective_names
+								>
+									<.tip-hotkey> "Tab"
+									<.tip-content> "Toggle Effective Names"
+
+								<.tip
+									@click.if(!state.loading)=api.toggle_settings
+									@hotkey('esc').capture.if(!state.loading)=toggle_settings
+								>
+									<.tip-hotkey> "Esc"
+									<.tip-content> "Toggle Settings"
+
+								<.tip.noclick
+									@hotkey('down').capture.if(!state.loading)=api.increment_link_selection_index
+									@hotkey('up').capture.if(!state.loading)=api.decrement_link_selection_index
+								>
+									<.tip-hotkey> "Up/Down Arrow"
+									<.tip-content> "Move Selection"
+
+							<.tip-row>
+
+								<.tip
+									@click.if(!loading)=handle_cut
+								>
+									if math_result
+										<.tip-hotkey> "Cut (Math, If No Selection)"
+										<.tip-content> "Cut Math Result"
+									else
+										<.tip-hotkey> "Cut (If No Selection)"
+										<.tip-content> "Cut All Text"
+
+								<.tip.noclick>
+									<.tip-hotkey> "Paste (If Input Empty)"
+									<.tip-content> "Instant Search"
+
+								<.tip.placeholder>
+
+				unless $tips-more.active
 					<.links>
 						css d:flex fld:column jc:flex-start
-						fl:1 w:100% ofy:auto pt:15px
+							fl:1 w:100% ofy:auto
 
 						if not viewing_community_links and (state.active_bang or state.sorted_links.length < 1)
 							<app-bang data=state.active_bang>

app/components/app-tips.imba

@@ -0,0 +1,59 @@
+tag app-tips
+
+	css >>> .tip-row
+		d:flex fld:row w:100% fl:1
+		fs:20px
+		fs:14px pt:15px
+		jc:end ta:center
+		bg:#20222f c:purple4
+
+	css >>> .tip
+		d:flex fld:column jc:start fl:1
+		bdr:1px solid blue3/10
+		min-width:0 ta:center p:10px
+		cursor:pointer transition:background 100ms
+		@first ta:left rdl:3px
+		@last ta:right bd:none rdr:3px
+		@hover bg:purple3/3
+
+	css >>> .tip.placeholder
+		visibility:hidden
+
+	css >>> .tip.noclick
+		@hover bg:none cursor:auto
+
+	css >>> .tip-hotkey
+		fs:12px c:purple3/50
+
+	css >>> .tip-content
+		pt:2px fs:14px c:purple3
+
+	<self>
+			<slot>
+
+tag app-tips-more < app-tips
+
+	active = no
+	get hide do !active
+	def toggle
+		active = !active
+
+	<self>
+
+		<@click=toggle>
+			css w:100% d:flex ja:center c:purple3 rdb:4px cursor:pointer
+				my:7px py:2px transition:background 100ms
+				@hover bg:purple3/3
+			if active
+				css rd:0
+
+			css svg w:15px
+			if active
+				<svg src="../assets/chevron-down.svg">
+			else
+				<svg src="../assets/chevron-up.svg">
+
+		css >>> .hide .tip-row d:none
+		css >>> .more .tip-row @first pt:0
+		<.more .hide=hide>
+			<slot>

app/styles.imba

@@ -20,28 +20,6 @@ global css .disabled *
 global css .disabled $main-input
 	@important bg:gray4/10 bc:gray4
 
-global css .tips
-	d:flex fld:row w:100% fl:1
-	c:purple4 fs:20px cursor:pointer
-	fs:14px pt:15px
-	jc:end ta:center
-
-global css .tip
-	d:flex fld:column jc:start fl:1
-	bdr:1px solid blue3/10
-	min-width:0 p:5px ta:center
-	@first ta:left
-	@last ta:right bd:none
-
-global css .tip.noclick
-	cursor:auto
-
-global css .tip-hotkey
-	fs:12px c:purple3/50
-
-global css .tip-content
-	pt:2px fs:14px c:purple3
-
 global css .selected
 	bg:blue3/5