refactor tips for <app-edit>, abstract tip into <app-tip>

app/components/app-edit.imba

@@ -34,36 +34,42 @@ tag app-edit
 
 	get tips
 		let result = []
-
+		let temp
-		result.push <>
+
-			<.tip
+		temp = {
-				@click=handle_delete
+				click_handler: handle_delete.bind(this)
-				@hotkey('shift+backspace').force=handle_delete
+				hotkey_handler: handle_delete.bind(this)
-			>
+				hotkey: 'shift+backspace'
-				<.tip-hotkey> "Shift + Backspace"
+				hotkey_display_name: "Shift + Backspace"
-				<.tip-content> "Delete Link"
+				content: "Delete Link"
-
+		}
-		result.push <>
+		result.push temp
-			<.tip
+
-				@click=save
+		temp = {
-				@hotkey('return').force=save
+				click_handler: save.bind(this)
-			>
+				hotkey_handler: save.bind(this)
-				<.tip-hotkey> "Return"
+				hotkey: 'return'
-				<.tip-content> "Update Link"
+				hotkey_display_name: "Return"
+				content: "Update Link"
+		}
+		result.push temp
 
 		if link.is_bang
-			result.push <>
+			temp = {
-				<.tip @click=handle_click_set_default_bang>
+					click_handler: handle_click_set_default_bang.bind(this)
-					<.tip-hotkey> "Click"
+					hotkey_display_name: "Click"
-					<.tip-content> "Set Default Bang"
+					content: "Set Default Bang"
-
+			}
-		result.push <>
+			result.push temp
-			<.tip
+
-				@click=close
+		temp = {
-				@hotkey('esc').force=close
+				click_handler: close.bind(this)
-			>
+				hotkey_handler: close.bind(this)
-				<.tip-hotkey> "Esc"
+				hotkey: 'esc'
-				<.tip-content> "Cancel"
+				hotkey_display_name: "Esc"
+				content: "Cancel"
+		}
+		result.push temp
 
 		result
 

app/components/app-links.imba

@@ -95,7 +95,6 @@ tag app-links
 
 			<app-tips$tips tips=tips>
 
-			unless $tips.show_more
 			<.links>
 				css ofy:scroll
 				for link, index in state.sorted_links

app/components/app-tips.imba

@@ -1,5 +1,32 @@
 import { chunk, fill } from 'lodash'
 
+tag app-tip
+
+	<self
+		@click.if(tip.click_handler)=tip.click_handler
+	>
+		css d:flex fld:column jc:start fl:1
+			bdr:1px solid
+			bc:$tip-bc
+			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:$tip-hover-c
+		if tip.placeholder or not tip.click_handler
+			css
+				@hover @important cursor:auto bg:none
+
+		if tip.hotkey_handler and tip.hotkey
+			<@hotkey(tip.hotkey).force=tip.hotkey_handler>
+				css d:none
+
+		<.tip-hotkey> tip.hotkey_display_name
+			css fs:12px c:$tip-hotkey-c
+
+		<.tip-content> tip.content
+			css pt:2px fs:14px c:$tip-content-c
+
 tag app-tips
 
 	def unmount
@@ -19,45 +46,20 @@ tag app-tips
 		pad(chunks[-1])
 		chunks
 
-	css >>> .tip-row
-		d:flex fld:row w:100% fl:1
-		fs:20px fs:14px
-		jc:end ta:center
-
-	css >>> .tip
-		d:flex fld:column jc:start fl:1
-		bdr:1px solid
-		bc:$tip-bc
-		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:$tip-hover-c
-
-	css >>> .tip.noclick, .tip.placeholder
-		@hover bg:none cursor:auto
-
-	css >>> .tip-hotkey
-		fs:12px c:$tip-hotkey-c
-
-	css >>> .tip-content
-		pt:2px fs:14px c:$tip-content-c
-
 	def render
 		let chunks = get_chunks!
 
 		<self[d:none]=!config.data.enable_tips>
 			css d:flex fld:column gap:15px
 
+			css .tip-row
+				d:flex fld:row w:100% fl:1
+				fs:20px fs:14px
+				jc:end ta:center
+
 			<.tip-row>
 				for tip in chunks[0]
-					<.tip
+					<app-tip tip=tip>
-						.noclick=(not tip.click_handler)
-						@click.if(tip.click_handler)=tip.click_handler
-						@hotkey(tip.hotkey).if(tip.hotkey_handler and tip.hotkey).force=tip.hotkey_handler
-					>
-						<.tip-hotkey> tip.hotkey_display_name
-						<.tip-content> tip.content
 
 			if chunks.length > 1
 
@@ -82,10 +84,4 @@ tag app-tips
 					for row in chunks.slice(1)
 						<.tip-row>
 							for tip in row
-								<.tip
+								<app-tip tip=tip>
-									.noclick=(not tip.click_handler)
-									@click.if(tip.click_handler)=tip.click_handler
-									@hotkey(tip.hotkey).if(tip.hotkey_handler and tip.hotkey).force=tip.hotkey_handler
-								>
-									<.tip-hotkey> tip.hotkey_display_name
-									<.tip-content> tip.content