automate tips

app/api.imba

@@ -224,3 +224,17 @@ export default new class api
 			state.active_bang = link
 		else
 			navigate link
+
+	get bang
+		state.active_bang or config.data.default_bang
+
+	get encoded_bang_query
+		"{bang.url}{window.encodeURIComponent(state.query)}"
+
+	def handle_bang
+		await increment_link_frequency bang
+		window.location.href = encoded_bang_query
+
+	def unset_active_bang
+		state.active_bang = no
+		api.sort_links!

app/components/app-bang.imba

@@ -1,35 +1,17 @@
 tag app-bang
 
-	def unset_active_bang
+	get tips
-		state.active_bang = no
+		let tips = []
-		api.sort_links!
-
-	get bang
-		state.active_bang or config.data.default_bang
-
-	get encoded_bang_query
-		"{bang.url}{window.encodeURIComponent(state.query)}"
-
-	def handle_bang
-		await api.increment_link_frequency bang
-		window.location.href = encoded_bang_query
-
-	def render
-
-		<self>
-			css w:100% d:flex fld:column gap:15px
-
-			<app-tips>
-
-				<.tip-row>
 
+		tips.push <>
 			<.tip
-						@click=handle_bang
+				@click=api.handle_bang
-						@hotkey('return').capture.if(!state.loading)=handle_bang
+				@hotkey('return').capture.if(!state.loading)=api.handle_bang
 			>
 				<.tip-hotkey> "Return"
 				<.tip-content> "Search"
 
+		tips.push <>
 			<.tip
 				@click=api.handle_add_link
 				@hotkey('shift+return').capture.if(!state.loading)=api.handle_add_link
@@ -47,9 +29,10 @@ tag app-bang
 					else
 						<span> "\"{sq.join " "}\""
 
+		tips.push <>
 			if state.active_bang
 				<.tip
-							@click=unset_active_bang
+					@click=api.unset_active_bang
 					@hotkey('esc').capture.if(!state.loading)=unset_active_bang
 				>
 					<.tip-hotkey> "Esc"
@@ -59,10 +42,7 @@ tag app-bang
 					<.tip-hotkey> "Paste (If Input Empty)"
 					<.tip-content> "Instant Search"
 
-			<app-tips-more$tips-more>
+		tips.push <>
-
-				<.tip-row>
-
 			<.tip
 				@click.if(!state.loading)=api.toggle_effective_names
 				@hotkey('tab').capture.if(!state.loading)=api.toggle_effective_names
@@ -70,10 +50,9 @@ tag app-bang
 				<.tip-hotkey> "Tab"
 				<.tip-content> "Toggle Effective Names"
 
-					<.tip
+		tips.push <>
-						@click.if(!loading)=api.handle_cut
+			<.tip @click.if(!loading)=api.handle_cut>
-					>
+				if api.math_result
-						if math_result
 					<.tip-hotkey> "Cut (Math, If No Selection)"
 					<.tip-content> "Cut Math Result"
 				else
@@ -81,28 +60,36 @@ tag app-bang
 					<.tip-content> "Cut All Text"
 
 		if state.active_bang
+			tips.push <>
 				<.tip.noclick>
 					<.tip-hotkey> "Paste (If Input Empty)"
 					<.tip-content> "Instant Search"
-					else
-						<.tip.placeholder>
 
-			unless $tips-more.active
+		tips
-				<.bang.selected@click=handle_bang>
+
+	def render
+
+		<self>
+			css w:100% d:flex fld:column gap:15px
+
+			<app-tips$tips tips=tips>
+
+			unless $tips.show_more
+				<.bang.selected@click=api.handle_bang>
 					css d:flex fld:row jc:space-between ai:center
 						px:16px py:11px rd:5px cursor:pointer c:#FAD4AB
 
 					<.link-left>
 						css d:flex fl:1
 
-						<img.link-icon src=bang.icon>
+						<img.link-icon src=api.bang.icon>
 							css w:20px h:20px mr:10px rd:3px
 
-						<.display-name> encoded_bang_query
+						<.display-name> api.encoded_bang_query
 							css fs:20px word-break:break-all
 
 					<.link-right>
 						css d:flex fld:row jc:space-between ai:center
 
-						<.frequency> bang.frequency
+						<.frequency> api.bang.frequency
 							css fs:15px ml:7px

app/components/app-edit.imba

@@ -34,18 +34,10 @@ tag app-edit
 		catch e
 			err "saving link", e
 
-	def render
+	get tips
-
+		let tips = []
-		<self>
-			css d:flex fld:column gap:20px w:100%
-
-			<div>
-				<input$dn bind=new_link_text>
-
-			<app-tips>
-
-				<.tip-row>
 
+		tips.push <>
 			<.tip
 				@click=handle_delete
 				@hotkey('shift+backspace').capture.if(!state.loading)=handle_delete
@@ -53,6 +45,7 @@ tag app-edit
 				<.tip-hotkey> "Shift + Backspace"
 				<.tip-content> "Delete Link"
 
+		tips.push <>
 			<.tip
 				@click=save
 				@hotkey('return').capture.if(!state.loading)=save
@@ -61,10 +54,13 @@ tag app-edit
 				<.tip-content> "Update Link"
 
 		if link.is_bang
+			tips.push <>
 				<.tip @click=handle_click_set_default_bang>
 					<.tip-hotkey> "Click"
 					<.tip-content> "Set Default Bang"
+
 		else
+			tips.push <>
 				<.tip
 					@click=close
 					@hotkey('esc').capture.if(!state.loading)=close
@@ -73,11 +69,7 @@ tag app-edit
 					<.tip-content> "Cancel"
 
 		if link.is_bang
-
+			tips.push <>
-				<app-tips-more>
-
-					<.tip-row>
-
 				<.tip
 					@click=close
 					@hotkey('esc').capture.if(!state.loading)=close
@@ -85,6 +77,14 @@ tag app-edit
 					<.tip-hotkey> "Esc"
 					<.tip-content> "Cancel"
 
-						<.tip.placeholder>
+		tips
+
+	def render
+
+		<self>
+			css d:flex fld:column gap:20px w:100%
+
+			<div>
+				<input$dn bind=new_link_text>
 
-						<.tip.placeholder>
+			<app-tips tips=tips>

app/components/app-links.imba

@@ -24,8 +24,8 @@ tag app-links
 
 		tips.push <>
 			<.tip
-				@click=handle_shift_return
+				@click=api.handle_add_link
-				@hotkey('shift+return').capture.if(!state.loading)=handle_shift_return
+				@hotkey('shift+return').capture.if(!state.loading)=api.handle_add_link
 			>
 				<.tip-hotkey> "Shift + Return"
 				<.tip-content.ellipsis>
@@ -48,12 +48,7 @@ tag app-links
 				<.tip-hotkey> "Shift + Backspace"
 				<.tip-content> "Edit Link"
 
-		tips
+		tips.push <>
-
-	get tips_more
-		let tips_more = []
-
-		tips_more.push <>
 			<.tip
 				@click.if(!state.loading)=api.toggle_effective_names
 				@hotkey('tab').capture.if(!state.loading)=api.toggle_effective_names
@@ -61,7 +56,7 @@ tag app-links
 				<.tip-hotkey> "Tab"
 				<.tip-content> "Toggle Effective Names"
 
-		tips_more.push <>
+		tips.push <>
 			<.tip
 				@click.if(!state.loading)=refs.settings.open
 				@hotkey('shift+tab').capture.if(!state.loading)=refs.settings.open
@@ -69,7 +64,7 @@ tag app-links
 				<.tip-hotkey> "Shift + Tab"
 				<.tip-content> "Toggle Settings"
 
-		tips_more.push <>
+		tips.push <>
 			<.tip @click.if(!loading)=api.handle_cut>
 				if api.math_result
 					<.tip-hotkey> "Cut (Math, If No Selection)"
@@ -78,7 +73,7 @@ tag app-links
 					<.tip-hotkey> "Cut (If No Selection)"
 					<.tip-content> "Cut All Text"
 
-		tips_more.push <>
+		tips.push <>
 			<.tip.noclick
 				@hotkey('down').capture.if(!state.loading)=api.increment_link_selection_index
 				@hotkey('up').capture.if(!state.loading)=api.decrement_link_selection_index
@@ -86,22 +81,21 @@ tag app-links
 				<.tip-hotkey> "Up/Down Arrow"
 				<.tip-content> "Move Selection"
 
-		tips_more.push <>
+		tips.push <>
 			<.tip.noclick>
 				<.tip-hotkey> "Paste (If Input Empty)"
 				<.tip-content> "Instant Search"
 
-		tips_more
+		tips
 
 	def render
 
 		<self>
 			css w:100% d:flex fld:column gap:15px ofy:hidden
 
-			<app-tips tips=tips>
+			<app-tips$tips tips=tips>
-			<app-tips-more$tips-more tips=tips_more>
 
-			unless $tips-more.active
+			unless $tips.show_more
 				<.links>
 					css ofy:scroll
 					for link, index in state.sorted_links

app/components/app-tips.imba

@@ -2,10 +2,28 @@ import { chunk, fill } from 'lodash'
 
 tag app-tips
 
+	show_more = no
+
+	def toggle
+		show_more = not show_more
+
+	get placeholder
+		<.tip.placeholder>
+
+	def pad arr
+		let i = arr.length
+		while i < 3
+			arr.push placeholder
+			i += 1
+
+	def get_chunks
+		let chunks = chunk(tips, 3)
+		pad(chunks[-1])
+		chunks
+
 	css >>> .tip-row
 		d:flex fld:row w:100% fl:1
-		fs:20px
+		fs:20px fs:14px
-		fs:14px
 		jc:end ta:center
 		bg:#20222f c:purple4
 
@@ -18,10 +36,7 @@ tag app-tips
 		@last ta:right bd:none rdr:3px
 		@hover bg:purple3/3
 
-	css >>> .tip.placeholder
+	css >>> .tip.noclick, .tip.placeholder
-		visibility:hidden
-
-	css >>> .tip.noclick
 		@hover bg:none cursor:auto
 
 	css >>> .tip-hotkey
@@ -30,62 +45,37 @@ tag app-tips
 	css >>> .tip-content
 		pt:2px fs:14px c:purple3
 
+	def render
+		let chunks = get_chunks!
+
 		<self[d:none]=!config.data.enable_tips>
+			css d:flex fld:column gap:15px
+
 			<.tip-row>
-			for tip in tips
+				for tip in chunks[0]
 					<> tip
 
-tag app-tips-more < app-tips
+			if chunks.length > 1
-
-	get render? do mounted?
-
-	def mount
-		active = no
-		imba.commit!
-
-	get hidden do !active
-	toggle = do active = !active
-	open = do active = yes
-	close = do active = no
-
-	get placeholder
-		<.tip.placeholder>
-
-	def pad arr
-		p arr
-		let i = arr.length
-		while i < 3
-			arr.push placeholder
-			i += 1
-		p arr
-
-	get chunks
-		let chunks = chunk(tips, 3)
-		pad(chunks[-1])
-		chunks
-
-	<self[d:none]=!config.data.enable_tips>
-		css d:flex fld:column gap:15px
 
 				<@click=toggle>
 					css w:100% d:flex ja:center c:purple3 rdb:4px cursor:pointer
 						transition:background 100ms
 						@hover bg:purple3/3
-			if active
+					if show_more
 						css rd:0
 
 					css svg w:15px
-			if active
+					if show_more
 						<svg src="../assets/chevron-down.svg">
 					else
 						<svg src="../assets/chevron-up.svg">
 
 				<.more>
 					css d:flex fld:column gap:15px
-			if hidden
+					unless show_more
 						css d:none
 
-			for row in chunks
+					for row in chunks.slice(1)
 						<.tip-row>
 							for tip in row
 								<> tip