refactor: finish edit page

app/api.imba

@@ -32,23 +32,19 @@ export default new class api
 		p omit(new_link, "icon")
 		return new_link
 
-	def handle_delete link
+	def delete_link link
-		def delete_link
+		def go
 			try
 				await db.links.delete(link.id)
 			catch e
-				err "deleting link", e
+				return err "deleting link", e
 			try
 				await reload_db!
 			catch e
-				err "reloading db after successful delete", e
+				return err "reloading db after successful delete", e
 		state.loading = yes
-		await delete_link!
+		await go!
-		state.query = prior_query
+		state.link_selection_index = Math.min state.link_selection_index, state.sorted_links.length - 1
-		prior_query = ''
-		editing_link = no
-		sort_links!
-		selection_index = Math.min selection_index, state.sorted_links.length - 1
 		state.loading = no
 
 	def pin_link link
@@ -142,6 +138,9 @@ export default new class api
 		sort_links!
 
 	def construct_link_text link
+		link.display_name = link.display_name.trim!
+		link.name = link.name.trim!
+		link.url = link.url.trim!
 		let link_text = ""
 		link_text += "!" if link.is_bang
 		link_text += link.display_name
@@ -163,3 +162,16 @@ export default new class api
 
 	def get_pretty_date
 		Date!.toString!.split(" ").slice(0, 4).join(" ")
+
+	get selected_link
+		state.sorted_links[state.link_selection_index]
+
+	def set_link_selection_index index
+		state.link_selection_index = index
+
+	def increment_link_selection_index
+		set_link_selection_index Math.min(state.sorted_links.length - 1, state.link_selection_index + 1)
+
+	def decrement_link_selection_index
+		set_link_selection_index Math.max(0, state.link_selection_index - 1)
+

app/client.imba

@@ -50,6 +50,7 @@ tag app
 		refs.settings = $as
 		refs.edit = $ae
 		refs.community-links = $acl
+		refs.links = $al
 
 		unless global.localStorage.fuzzyhome_visited
 			await api.add_initial_links!
@@ -92,6 +93,6 @@ tag app
 				<app-edit$ae>
 
 			else
-				<app-links>
+				<app-links$al>
 
 imba.mount <app>

app/components/app-edit.imba

@@ -1,37 +1,106 @@
-tag app-edit < app-prompt
+tag app-edit
+
+	get render? do mounted?
+	active = no
+
+	def open data
+		link = data
+		active = yes
+
+	def close
+		active = no
+
+	def mount
+		setTimeout(&, 40) do
+			$dn.focus!
+		imba.commit!
 
 	def handle_click_set_default_bang
-		if editing_link.is_bang isnt true
+		if link.is_bang isnt true
 			return err "setting default bang", "Link is not a bang."
-		config.default_bang = editing_link
+		config.default_bang = link
 		save_config!
-		editing_link = no
 		state.query = prior_query
 		prior_query = ''
 		sort_links!
 
+	def handle_delete
+		try
+			await api.delete_link link
+			close!
+		catch e
+			err "deleting link", e
+
+	def save
+		try
+			if /\s/.test link.name.trim!
+				throw "Link name may not contain spaces."
+			api.update_link link, api.construct_link_text link
+			close!
+		catch e
+			err "saving link", e
+
+	get new_link_text
+		"wip"
+
+	def cycle_focus
+		if document.activeElement is $dn
+			$n.focus!
+		elif document.activeElement is $n
+			$u.focus!
+		else
+			$dn.focus!
+
 	def render
+
 		<self>
+			css d:flex fld:column gap:20px w:100%
+
 			<.tips>
+
 				<.tip
-					@click=(active = no)
+					@click=close
+					@hotkey('esc').capture.if(!state.loading)=close
 				>
 					<.tip-hotkey> "Esc"
-					<.tip-content> "Cancel Edits"
+					<.tip-content> "Cancel"
-				if editing_link.is_bang
+
 				<.tip
-						@click=handle_click_set_default_bang
+					@click=handle_delete
+					@hotkey('shift+backspace').capture.if(!state.loading)=handle_delete
 				>
+					css fl:2
+					<.tip-hotkey> "Shift + Backspace"
+					<.tip-content> "Delete Link"
+
+				if link.is_bang
+					<.tip @click=handle_click_set_default_bang>
+						css fl:2
 						<.tip-hotkey> "Click"
 						<.tip-content> "Set Default Bang"
+
 				<.tip
-					@click=handle_shift_return
+					@click=save
+					@hotkey('shift+return').capture.if(!state.loading)=save
 				>
-					<.tip-hotkey> "Shift + Return"
+					css fl:2
-					<.tip-content[of:hidden text-overflow:ellipsis white-space:nowrap]>
+					<.tip-hotkey> "Return"
-						"Update Link"
+					<.tip-content> "Update Link"
-				<.tip
+
-					@click=handle_shift_backspace
+				<.tip.noclick
+					@hotkey('tab').capture.if(!state.loading)=cycle_focus
 				>
-					<.tip-hotkey> "Shift + Backspace"
+					<.tip-hotkey> "Tab"
-					<.tip-content> "Delete Link"
+					<.tip-content> "Next"
+
+			<.inputs>
+				css d:flex fld:column gap:20px
+
+				<div>
+					<input$dn bind=link.display_name>
+
+				<div>
+					<input$n bind=link.name>
+
+				<div>
+					<input$u bind=link.url>

app/components/app-link.imba

@@ -2,9 +2,9 @@ tag app-link
 
 	def render
 		<self
-			@pointerover=set_selection_index(index)
+			@pointerover=api.set_link_selection_index(index)
 			@click.prevent=handle_click_link(link)
-			.selected=(index is selection_index)
+			.selected=(index is state.link_selection_index)
 		>
 			css d:flex fld:row jc:space-between ai:center
 				px:16px py:11px rd:5px cursor:pointer c:blue3
@@ -12,19 +12,19 @@ tag app-link
 			<.link-left>
 				css d:flex fl:1
 
-				<img.link-icon src=data.icon>
+				<img.link-icon src=link.icon>
 					css w:20px h:20px mr:10px rd:3px
 
-				<.display-name [c:#FAD4AB]=data.is_bang> data.display_name
+				<.display-name [c:#FAD4AB]=link.is_bang> link.display_name
 					css tt:capitalize fs:20px overflow-wrap:anywhere
 
-				if data.display_name isnt data.name and config.data.enable_effective_names
+				if link.display_name isnt link.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> link.name
 						<span.parens> ")"
 
 			<.link-right>
@@ -45,8 +45,8 @@ tag app-link
 
 					<.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))
+						[visibility:visible c:purple3/50]=(link.is_pinned and (index isnt state.link_selection_index or not config.data.enable_buttons))
 					> <svg src='../assets/star.svg'>
 
-				<.frequency> data.frequency
+				<.frequency> link.frequency
 					css fs:15px ml:7px

app/components/app-links.imba

@@ -2,7 +2,6 @@ import { evaluate as eval_math } from 'mathjs'
 
 tag app-links
 
-	selection_index = 0
 	active_bang = no
 
 	def mount
@@ -31,12 +30,6 @@ tag app-links
 		state.query = ''
 		sort_links!
 
-	def increment_selection_index
-		selection_index = Math.min(state.sorted_links.length - 1, selection_index + 1)
-
-	def decrement_selection_index
-		selection_index = Math.max(0, selection_index - 1)
-
 	def handle_add
 		state.loading = yes
 		try
@@ -57,24 +50,9 @@ tag app-links
 			no
 
 	def handle_input
-		selection_index = 0
+		api.set_link_selection_index 0
 		api.sort_links!
 
-	def handle_edit link
-		prior_query = state.query
-		editing_link = link
-		state.query = api.construct_link_text(link)
-
-	def make_edit link, new_link_text
-		def edit_link
-			try
-				await update_link link, new_link_text
-			catch e
-				return err "editing link", e
-		state.loading = yes
-		await edit_link!
-		state.loading = no
-
 	def handle_click_link link
 		navigate link
 
@@ -83,10 +61,9 @@ tag app-links
 		window.location.href = link.url
 
 	def handle_return
-		return if editing_link
 		if active_bang or state.sorted_links.length < 1
 			return handle_bang!
-		let link = selected_link
+		let link = api.selected_link
 		if link.is_bang
 			state.query = ''
 			active_bang = link
@@ -102,31 +79,20 @@ tag app-links
 		return unless window.confirm "Do you really want to delete {link..display_name}?"
 		handle_delete link
 
-	def handle_click_edit link
-		handle_edit link
-
 	def handle_click_pin link
 		api.pin_link link
 
 	def handle_shift_backspace
-		if editing_link
-			await handle_delete editing_link
-		else
 		return unless state.sorted_links.length > 0
-			handle_edit selected_link
+		refs.edit.open api.selected_link
 
 	def handle_shift_return
 		def go
 			if viewing_community_links
 				try
-					await add_community_link selected_link
+					await add_community_link api.selected_link
 				catch e
 					err "adding community link", e
-			elif editing_link
-				try
-					await update_link editing_link, state.query
-				catch e
-					err "updating link", e
 			else
 				handle_add!
 		state.loading = yes
@@ -171,8 +137,8 @@ tag app-links
 						@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)=increment_selection_index
+						@hotkey('down').capture.if(!state.loading)=api.increment_link_selection_index
-						@hotkey('up').capture.if(!state.loading)=decrement_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
@@ -263,9 +229,4 @@ tag app-links
 						<app-bang data=active_bang>
 					else
 						for link, index in state.sorted_links
-							<app-link
+							<app-link link=link index=index>
-								data=link
-								set_selection_index=(do |index| selection_index = index)
-								index=index
-								selection_index=selection_index
-							>

app/components/app-prompt.imba

@@ -1,9 +1,9 @@
-tag app-prompt
+import { cloneDeep } from 'lodash'
 
-	active = no
+tag app-prompt
 
-	def get_input s
+	def get_input d
-		input_text = s
+		data = cloneDeep d
 		active = yes
 		let result = await new Promise! do |resolve|
 			self.addEventListener('end') do |e|
@@ -13,9 +13,4 @@ tag app-prompt
 		result
 
 	def end
-		emit('end', input_text)
+		emit('end', data)
-
-	def render
-		<self>
-			<input bind=input_text>
-			<button@click=end> 'Done.'

app/state.imba

@@ -3,4 +3,5 @@ export default {
 	links: []
 	sorted_links: []
 	loading: no
+	link_selection_index: 0
 }

app/styles.imba

@@ -25,12 +25,16 @@ global css .tips
 	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
+	d:flex fld:column jc:start fl:1
-	@last bd:none
+	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

app/utils.imba

@@ -1,3 +1,5 @@
+let p = console.log
+
 export def err s, e
 	p "error:"
 	p e