chore(webui): refactored states and versions routes

pkg/webui/html/states.html

@@ -17,10 +17,10 @@
         <tbody>
           {{ range .States }}
           <tr>
-            <td><a href="/state/{{ .Id }}">{{ .Path }}</a></td>
-            <td><a href="/state/{{ .Id }}">{{ .Updated }}</a></td>
+            <td><a href="/states/{{ .Id }}">{{ .Path }}</a></td>
+            <td><a href="/states/{{ .Id }}">{{ .Updated }}</a></td>
             <td>
-              <a href="/state/{{ .Id }}">
+              <a href="/states/{{ .Id }}">
                 {{ if eq .Lock nil }}no{{ else }}
                 <span>yes</span>
                 <div class="tooltip left max">

pkg/webui/html/statesId.html

@@ -20,8 +20,8 @@
     <tbody>
       {{ range .Versions }}
       <tr>
-        <td><a href="/version/{{ .Id }}">{{ index $.Usernames .AccountId }}</a></td>
-        <td><a href="/version/{{ .Id }}">{{ .Created }}</a></td>
+        <td><a href="/versions/{{ .Id }}">{{ index $.Usernames .AccountId }}</a></td>
+        <td><a href="/versions/{{ .Id }}">{{ .Created }}</a></td>
       </tr>
       {{ end }}
     </tbody>

pkg/webui/html/version.html

@@ -1,10 +0,0 @@
-{{ define "main" }}
-<main class="responsive" id="main">
-  <p>
-    Created by
-    <a href="/users/{{ .Account.Id }}">{{ .Account.Username }}</a>
-    at {{ .Version.Created }}
-  </p>
-  <pre>{{ .VersionData }}</pre>
-</main>
-{{ end }}

pkg/webui/html/versions.html

@@ -0,0 +1,23 @@
+{{ define "main" }}
+<main class="responsive" id="main">
+  <p>
+    Created by
+    <a href="/users/{{ .Account.Id }}">{{ .Account.Username }}</a>
+    at {{ .Version.Created }}
+  </p>
+  <div>
+    <div class="tabs">
+      <a data-ui="#explorer" class="active">Explorer</a>
+      <a data-ui="#raw">Raw</a>
+    </div>
+    <div id="explorer" class="page padding active">
+      <article class="border medium no-padding center-align middle-align">
+        <progress class="circle large"></progress>
+      </article>
+    </div>
+    <div id="raw" class="page padding">
+      <pre><code id="raw-state">{{ .VersionData }}</code></pre>
+    </div>
+  </div>
+</main>
+{{ end }}