refactor

app/client.imba

@@ -24,6 +24,8 @@ 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 './styles'
 
 p "fuzzyhome version {version}"

app/components/app-bang.imba

@@ -0,0 +1,20 @@
+tag app-bang
+
+	get encoded_bang_query
+		"{active_bang.url}{window.encodeURIComponent(state.query)}"
+
+	def handle_bang
+		await increment_link_frequency state.active_bang
+		window.location.href = encoded_bang_query
+
+	def render
+
+		<self>
+
+			css .bang-text
+				tt:none word-break:break-all
+
+			<.bang @click=handle_bang>
+				css d:flex fld:row jc:space-between ai:center
+					px:16px py:11px rd:5px cursor:pointer c:blue3
+

app/components/app-community-links.imba

@@ -60,7 +60,7 @@ tag app-community-links
 			css .selected
 				bg:blue3/5
 
-			<.middle-button>
+			<.tips>
 				<.tip[jc:start ta:center fl:1]
 					@click=handle_esc
 				>

app/components/app-edit.imba

@@ -12,25 +12,25 @@ tag app-edit < app-prompt
 
 	def render
 		<self>
-			<.middle-button>
-				<.tip[jc:start ta:left fl:1]
+			<.tips>
+				<.tip
 					@click=handle_esc
 				>
 					<.tip-hotkey> "Esc"
 					<.tip-content> "Cancel Edits"
 				if editing_link.is_bang
-					<.tip[jc:end ta:center fl:1]
+					<.tip
 						@click=handle_click_set_default_bang
 					>
 						<.tip-hotkey> "Click"
 						<.tip-content> "Set Default Bang"
-				<.tip[jc:center ta:center fl:1 px:15px]
+				<.tip
 					@click=handle_shift_return
 				>
 					<.tip-hotkey> "Shift + Return"
 					<.tip-content[of:hidden text-overflow:ellipsis white-space:nowrap]>
 						"Update Link"
-				<.tip[jc:end ta:right fl:1]
+				<.tip
 					@click=handle_shift_backspace
 				>
 					<.tip-hotkey> "Shift + Backspace"

app/components/app-link.imba

@@ -0,0 +1,54 @@
+tag app-link
+
+	def render
+		<self>
+			css d:flex fld:row jc:space-between ai:center
+				px:16px py:11px rd:5px cursor:pointer c:blue3
+
+			<.link
+				@pointerover=(selection_index = index)
+				@click.prevent=handle_click_link(link)
+				.selected=(index is selection_index)
+			>
+
+				<.link-left>
+					css d:flex fl:1
+
+					<img.link-icon src=data.icon>
+						css w:20px h:20px mr:10px rd:3px
+
+					<.display-name [c:#FAD4AB]=data.is_bang> data.display_name
+						css tt:capitalize fs:20px overflow-wrap:anywhere
+
+					if data.display_name isnt data.name and config.data.enable_effective_names
+						<.name>
+							css d:flex ja:center c:gray4 ml:10px fs:14px
+							css .parens fs:10px c:gray4/80
+
+							<span.parens> "("
+							<span> data.name
+							<span.parens> ")"
+
+				<.link-right>
+					css d:flex fld:row jc:space-between ai:center
+					css .buttons-disabled .link-button visibility:hidden
+					css .selected .link-button visibility:visible
+
+					<.link-buttons .buttons-disabled=!config.data.enable_buttons>
+						css d:flex fld:row jc:flex-start ai:center pr:25px gap:5px
+						css .link-button visibility:hidden rd:3px c:purple4 fs:15px cursor:pointer px:3px
+						css .link-button svg w:15px
+
+						<.link-button@click.prevent.stop=handle_click_edit(link)>
+							<svg src='../assets/edit-2.svg'>
+
+						<.link-button@click.prevent.stop=handle_click_delete(link)>
+							<svg src='../assets/trash.svg'>
+
+						<.link-button
+							@click.prevent.stop=handle_click_pin(link)
+							[visibility:visible c:purple3/50]=(data.is_pinned and (index isnt selection_index or not config.data.enable_buttons))
+						> <svg src='../assets/star.svg'>
+
+					<.frequency> data.frequency
+						css fs:15px ml:7px

app/components/app-links.imba

@@ -1,7 +1,7 @@
 tag app-links
 
 	selection_index = 0
-	bang = no
+	active_bang = no
 
 	def mount
 		p document
@@ -13,12 +13,6 @@ tag app-links
 	def decrement_selection_index
 		selection_index = Math.max(0, selection_index - 1)
 
-	get active_bang
-		return bang or config.data.default_bang
-
-	get encoded_bang_query
-		"{active_bang.url}{window.encodeURIComponent(state.query)}"
-
 	get math_result
 		try
 			let result = Number(eval_math state.query)
@@ -48,37 +42,26 @@ tag app-links
 		state.loading = no
 
 	def handle_click_link link
-		if link.is_bang
-			state.query = ''
-			bang = link
-		else
 		navigate link
 
-	def handle_bang
-		await increment_link_frequency active_bang
-		window.location.href = encoded_bang_query
-
-	def handle_click_bang
-		handle_bang!
-
 	def navigate link
 		await increment_link_frequency link
 		window.location.href = link.url
 
 	def handle_return
 		return if editing_link
-		if bang or state.sorted_links.length < 1
+		if active_bang or state.sorted_links.length < 1
 			return handle_bang!
 		let link = selected_link
 		if link.is_bang
 			state.query = ''
-			bang = link
+			active_bang = link
 		else
 			navigate link
 
 	def handle_del
 		if state.query.length < 1
-			bang = no
+			active_bang = no
 			api.sort_links!
 
 	def handle_click_delete link
@@ -126,79 +109,22 @@ tag app-links
 
 		<self[w:100%]>
 
-			css .link
-				d:flex fld:row jc:space-between ai:center
-				px:16px py:11px rd:5px cursor:pointer c:blue3
-
-			css .link-left
-				d:flex fl:1
-
-			css .link-icon
-				w:20px h:20px mr:10px rd:3px
-
-			css .display-name
-				tt:capitalize fs:20px
-				overflow-wrap:anywhere
-
-			css .name
-				d:flex ja:center
-				c:gray4 ml:10px fs:14px
-
-			css .parens
-				fs:10px c:gray4/80
-
-			css .bang-text
-				tt:none word-break:break-all
-
-			css .link-right
-				d:flex fld:row jc:space-between ai:center
-
-			css .link-buttons
-				d:flex fld:row jc:flex-start ai:center pr:25px gap:5px
-
-			css .link-button
-				visibility:hidden
-				rd:3px c:purple4 fs:15px cursor:pointer
-				px:3px
-
-			css .link-button svg
-				w:15px
-
-			css .selected .link-button
-				visibility:visible
-
-			css .buttons-disabled .link-button
-				visibility:hidden
-
-			css .frequency
-				fs:15px ml:7px
-
-			css .header
-				d:flex fld:row w:100%
-
-			css .side
-				c:purple3/90 fs:15px
-				d:flex ja:center w:30px
-				cursor:pointer
-
-			css .side svg
-				w:15px
-
-			css .left
-				d:flex jc:left
-
-			css .right
-				d:flex jc:right
-
 			if $as.active
 				<app-settings$as>
 
 			else
+
 				<.header>
+					css d:flex fld:row w:100%
+					css .side c:purple3/90 fs:15px d:flex ja:center w:30px cursor:pointer
+					css .side svg w:15px
+
+					<.side@click=api.toggle_effective_names>
+						css d:flex jc:left
 
-					<.side.left@click=api.toggle_effective_names>
 						if config.data.enable_effective_names
 							<svg src="../assets/eye.svg">
+
 						else
 							<svg src="../assets/eye-off.svg">
 
@@ -221,18 +147,27 @@ tag app-links
 					>
 
 					if (let m = math_result) isnt no
-						<.side.right[c:blue3 fs:20px ml:10px w:unset]
-							@click=handle_click_copy(m)
-						> "= {Math.round(m * 100)/100}"
+						<.side @click=handle_click_copy(m)>
+							"= {Math.round(m * 100)/100}"
+							css d:flex jc:right c:blue3 fs:20px ml:10px w:unset
+
 					else
 						<.side.right @click.if(!state.loading)=toggle_settings>
 							<svg src="../assets/settings.svg">
 
 				if config.data.enable_tips
-					<.middle-button>
-						<.tip[jc:start ta:left fl:1] @click=handle_return>
+					if active_bang
+
+						<.tips>
+
+							<.tip@click=handle_search>
 								<.tip-hotkey> "Return"
-							<.tip-content> "Navigate To Link"
+								<.tip-content> "Search With Query"
+
+							<.tip@click=exit_bang>
+								<.tip-hotkey> "Esc"
+								<.tip-content> "Exit Bang"
+
 							<.tip[jc:center ta:center fl:2 px:15px]
 								@click=handle_shift_return
 							>
@@ -252,52 +187,45 @@ tag app-links
 										<span> '"'
 										<span> sq.join ' '
 										<span> '"'
+
 							<.tip[jc:end ta:right fl:1]
 								@click=handle_shift_backspace
 							>
+								<.tip-hotkey> "Tab"
+								<.tip-content> "Select Next History Item"
+
+					else
+
+						<.tips>
+
+							<.tip @click=handle_return>
+								<.tip-hotkey> "Return"
+								<.tip-content> "Navigate To Link"
+
+							<.tip[fl:2] @click=handle_shift_return>
+								<.tip-hotkey> "Shift + Return"
+								<.tip-content.ellipsis>
+									<span[ws:pre]> "Add New Link "
+									let sq = state.query.trim!.split /\s+/
+									if sq.length >= 2
+										let url = sq.pop!
+										<span> '"'
+										<span> sq.join " "
+										<span[c:blue3 ws:pre]> " {url}"
+										<span> '"'
+									else
+										<span> '"{sq.join " "}"'
+
+							<.tip @click=handle_shift_backspace>
 								<.tip-hotkey> "Shift + Backspace"
 								<.tip-content> "Edit Link"
 
-				<div>
-					css d:flex fld:column jc:flex-start fl:1 w:100% ofy:auto pt:15px
+				<.links>
+					css d:flex fld:column jc:flex-start
+						fl:1 w:100% ofy:auto pt:15px
 
-					if not viewing_community_links and (bang or state.sorted_links.length < 1)
-						<a.link.selected
-							href=encoded_bang_query
-							@click=handle_click_bang
-						>
-							<.link-left>
-								<img.link-icon src=active_bang.icon>
-								<.display-name.bang-text> encoded_bang_query
-							<.link-right[jc:flex-end]>
-								<.frequency> active_bang.frequency
+					if not viewing_community_links and (active_bang or state.sorted_links.length < 1)
+						<app-bang data=active_bang>
 					else
 						for link, index in state.sorted_links
-							<a.link
-								href=link.url
-								@pointerover=(selection_index = index)
-								@click.prevent=handle_click_link(link)
-								.selected=(index is selection_index)
-							>
-								<.link-left>
-									<img.link-icon src=link.icon>
-									<.display-name
-										[c:#FAD4AB]=link.is_bang
-									> link.display_name
-									if link.display_name isnt link.name and config.data.enable_effective_names
-										<.name>
-											<span.parens> "("
-											<span> link.name
-											<span.parens> ")"
-								<.link-right>
-									<.link-buttons .buttons-disabled=!config.data.enable_buttons>
-										<.link-button@click.prevent.stop=handle_click_edit(link)>
-											<svg src='../assets/edit-2.svg'>
-										<.link-button@click.prevent.stop=handle_click_delete(link)>
-											<svg src='../assets/trash.svg'>
-										<.link-button
-											@click.prevent.stop=handle_click_pin(link)
-											[visibility:visible c:purple3/50]=(link.is_pinned and (index isnt selection_index or not config.data.enable_buttons))
-										>
-											<svg src='../assets/star.svg'>
-									<.frequency> link.frequency
+							<app-link data=link index=index>

app/styles.imba

@@ -20,10 +20,13 @@ global css .disabled *
 global css .disabled $main-input
 	@important bg:gray4/10 bc:gray4
 
-global css .middle-button
-	d:flex fld:row w:100%
+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
+	@first jc:start ta:left
+	@last jc:end ta:right
 
 global css .tip
 	d:flex fld:column bdr:1px solid blue3/10 min-width:0 fl:1 p:5px
@@ -38,3 +41,5 @@ global css .tip-content
 global css .selected
 	bg:blue3/5
 
+global css .ellipsis
+	of:hidden text-overflow:ellipsis white-space:nowrap