automate tips

app/components/app-links.imba

@@ -11,15 +11,10 @@ tag app-links
 		return unless state.sorted_links.length > 0
 		refs.edit.open api.selected_link
 
-	def render
+	get tips
-
+		let tips = []
-		<self>
-			css w:100% d:flex fld:column gap:15px ofy:hidden
-
-			<app-tips>
-
-				<.tip-row>
 
+		tips.push <>
 			<.tip
 				@click=api.handle_click_link
 				@hotkey('return').force.if(!loading)=api.handle_click_link
@@ -27,6 +22,7 @@ tag app-links
 				<.tip-hotkey> "Return"
 				<.tip-content> "Navigate To Link"
 
+		tips.push <>
 			<.tip
 				@click=handle_shift_return
 				@hotkey('shift+return').capture.if(!state.loading)=handle_shift_return
@@ -44,6 +40,7 @@ tag app-links
 					else
 						<span> "\"{sq.join " "}\""
 
+		tips.push <>
 			<.tip
 				@click=handle_edit
 				@hotkey('shift+backspace').capture.if(!state.loading)=handle_edit
@@ -51,10 +48,12 @@ tag app-links
 				<.tip-hotkey> "Shift + Backspace"
 				<.tip-content> "Edit Link"
 
-			<app-tips-more$tips-more>
+		tips
 
-				<.tip-row>
+	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
@@ -62,6 +61,7 @@ tag app-links
 				<.tip-hotkey> "Tab"
 				<.tip-content> "Toggle Effective Names"
 
+		tips_more.push <>
 			<.tip
 				@click.if(!state.loading)=refs.settings.open
 				@hotkey('shift+tab').capture.if(!state.loading)=refs.settings.open
@@ -69,9 +69,8 @@ tag app-links
 				<.tip-hotkey> "Shift + Tab"
 				<.tip-content> "Toggle Settings"
 
-					<.tip
+		tips_more.push <>
-						@click.if(!loading)=api.handle_cut
+			<.tip @click.if(!loading)=api.handle_cut>
-					>
 				if api.math_result
 					<.tip-hotkey> "Cut (Math, If No Selection)"
 					<.tip-content> "Cut Math Result"
@@ -79,8 +78,7 @@ tag app-links
 					<.tip-hotkey> "Cut (If No Selection)"
 					<.tip-content> "Cut All Text"
 
-				<.tip-row>
+		tips_more.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
@@ -88,11 +86,20 @@ tag app-links
 				<.tip-hotkey> "Up/Down Arrow"
 				<.tip-content> "Move Selection"
 
+		tips_more.push <>
 			<.tip.noclick>
 				<.tip-hotkey> "Paste (If Input Empty)"
 				<.tip-content> "Instant Search"
 
-					<.tip.placeholder>
+		tips_more
+
+	def render
+
+		<self>
+			css w:100% d:flex fld:column gap:15px ofy:hidden
+
+			<app-tips tips=tips>
+			<app-tips-more$tips-more tips=tips_more>
 
 			unless $tips-more.active
 				<.links>

app/components/app-tips.imba

@@ -1,3 +1,5 @@
+import { chunk, fill } from 'lodash'
+
 tag app-tips
 
 	css >>> .tip-row
@@ -29,7 +31,9 @@ tag app-tips
 		pt:2px fs:14px c:purple3
 
 	<self[d:none]=!config.data.enable_tips>
-		<slot>
+		<.tip-row>
+			for tip in tips
+				<> tip
 
 tag app-tips-more < app-tips
 
@@ -44,6 +48,22 @@ tag app-tips-more < app-tips
 	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
 
@@ -64,4 +84,8 @@ tag app-tips-more < app-tips
 			css d:flex fld:column gap:15px
 			if hidden
 				css d:none
-			<slot>
+
+			for row in chunks
+				<.tip-row>
+					for tip in row
+						<> tip