Cleaning up the UI

pub/index.css

@@ -72,6 +72,7 @@ form {
   background-size: 48px 48px;
   cursor: pointer;
   opacity: 0.3;
+  display: none;
 }
 
 #cls:hover {

pub/index.js

@@ -1,8 +1,14 @@
 (function() {
 
+var $frm = $('form'),
+    $cmp = $('#cmp'),
+    $cls = $('#cls'),
+    $url = $('#url'),
+    lastUrl;
+
 var resize = function() {
-  var rect = form.get(0).getBoundingClientRect();
-  form.css('margin-top', window.innerHeight/3 - rect.height/2);
+  var rect = $frm.get(0).getBoundingClientRect();
+  $frm.css('margin-top', window.innerHeight/3 - rect.height/2);
 };
 
 var nameFrom = function(uri) {
@@ -22,43 +28,66 @@ var load = function() {
     }
 
     var route = data.route,
-        url = route.url || '';
-    $('#url').val(url).focus();
+        url = route && route.url || '';
+    $url.val(url).focus();
+    urlDidChange();
   });
 }
 
 var showLink = function(name) {
-  var cmp = $('#cmp'),
-      lnk = location.origin + '/' + name;
+  var lnk = location.origin + '/' + name;
+
+  $cmp.find('a').remove();
 
   var a = $(document.createElement('a'))
     .attr('href', lnk)
     .text(lnk)
-    .appendTo(cmp.text(''));
+    .appendTo($cmp.text(''));
 
-  cmp.css('transform', 'scaleY(1)');
+  $cmp.css('transform', 'scaleY(1)');
 
   getSelection().setBaseAndExtent(a.get(0), 0, a.get(0), 1);
 };
 
-var form = $('form').on('submit', function(e) {
+var hideLink = function() {
+  $cmp.css('transform', 'scaleY(0)');
+};
+
+var urlDidChange = function() {
+  var url = $url.val().trim();
+  if (url == lastUrl) {
+    return;
+  }
+
+  lastUrl = url;
+
+  if (url) {
+    $cls.fadeIn(200);
+  } else {
+    $cls.fadeOut(200);
+  }
+};
+
+$frm.on('submit', function(e) {
   e.preventDefault();
   var name = nameFrom(location.pathname),
-      url = $('#url').val().trim();
+      url = $url.val().trim();
 
   $.ajax({
     type: 'POST',
     url : '/api/url/' + name,
     data : JSON.stringify({ url : url }),
     dataType : 'json'
-  }).always(function(data, txt, xhr) {
+  }).always(function(data) {
     if (!data.ok) {
+      hideLink();
       return;
     }
 
     var route = data.route;
     if (!route) {
-      // deleted
+      hideLink();
+      return;
     }
 
     var url = route.url || '',
@@ -70,13 +99,19 @@ var form = $('form').on('submit', function(e) {
   });
 });
 
-$('#cls').on('click', function(e) {
-  $('#url').val('');
-  $('form').submit();
+$url.on('keydown', urlDidChange)
+    .on('paste', urlDidChange)
+    .on('change', urlDidChange);
+
+$cls.on('click', function(e) {
+  $url.val('');
+  $frm.submit();
+  urlDidChange();
 });
 
 window.addEventListener('resize', resize);
 resize();
+urlDidChange();
 load();
 
 })();

web/web.go

@@ -157,6 +157,7 @@ func apiPost(ctx *context.Context, w http.ResponseWriter, r *http.Request) {
 			return
 		}
 
+		writeJSONOk(w)
 		return
 	}
 
@@ -192,13 +193,13 @@ func apiGet(ctx *context.Context, w http.ResponseWriter, r *http.Request) {
 	p := parseName("/api/url/", r.URL.Path)
 
 	if p == "" {
-		writeJSON(w, nil, http.StatusNotFound)
+		writeJSONOk(w)
 		return
 	}
 
 	rt, err := ctx.Get(p)
 	if err == leveldb.ErrNotFound {
-		writeJSON(w, nil, http.StatusNotFound)
+		writeJSONOk(w)
 		return
 	} else if err != nil {
 		writeJSONBackendError(w, err)