Minor UI improvements

akopachov · akopachov · commit de0de8c26e28 · 2023-08-31T09:48:57.000+02:00
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "flipper-authenticator-companion",
   "version": "1.1.1",
   "private": true,
-  "description": "Flipper Authenticator Companion App",
+  "description": "Companion application for Flipper Authenticator software-based TOTP authenticator for Flipper Zero device",
   "main": "src/electron.cjs",
   "type": "module",
   "author": "Alexander Kopachov (@akopachov)",
@@ -37,7 +37,7 @@
     "@tailwindcss/typography": "^0.5.9",
     "@types/node": "^20.5.7",
     "@types/papaparse": "^5.3.8",
-    "@types/uuid": "^9.0.2",
+    "@types/uuid": "^9.0.3",
     "@typescript-eslint/eslint-plugin": "^6.5.0",
     "@typescript-eslint/parser": "^6.5.0",
     "async-sema": "^3.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/lightswitch/lightswitch-daemon.svelte b/src/components/lightswitch/lightswitch-daemon.svelte
diff --git a/src/components/totp-list/totp-list.svelte b/src/components/totp-list/totp-list.svelte
@@ -101,99 +101,117 @@
   }
 </script>
 
-<ul
-  class="list p-4 pt-3 pb-3"
-  use:dndzone={{
-    items: internalList,
-    dragDisabled,
-    flipDurationMs: flipAnimationMs,
-    dropTargetStyle: {},
-    transformDraggedElement,
-  }}
-  on:consider={handleConsider}
-  on:finalize={handleFinalize}>
-  {#each internalList as item (item.id)}
-    {@const totp = item.item}
-    <div animate:flip={{ duration: flipAnimationMs }}>
-      <li class="h-14 p-1">
-        <i
-          class="material-icons drag-handle cursor-move"
-          on:mousedown={startDrag}
-          on:touchstart={startDrag}
-          on:keydown={handleKeyDown}
-          role="none">
-          <svg
-            viewBox="0 0 16 16"
-            stroke-width="1.5"
-            fill="currentColor"
-            class="w-6 h-6"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-              fill-rule="evenodd"
-              d="M7.375 3.67c0-.645-.56-1.17-1.25-1.17s-1.25.525-1.25 1.17c0 .646.56 1.17 1.25 1.17s1.25-.524 1.25-1.17zm0 8.66c0-.646-.56-1.17-1.25-1.17s-1.25.524-1.25 1.17c0 .645.56 1.17 1.25 1.17s1.25-.525 1.25-1.17zm-1.25-5.5c.69 0 1.25.525 1.25 1.17 0 .645-.56 1.17-1.25 1.17S4.875 8.645 4.875 8c0-.645.56-1.17 1.25-1.17zm5-3.16c0-.645-.56-1.17-1.25-1.17s-1.25.525-1.25 1.17c0 .646.56 1.17 1.25 1.17s1.25-.524 1.25-1.17zm-1.25 7.49c.69 0 1.25.524 1.25 1.17 0 .645-.56 1.17-1.25 1.17s-1.25-.525-1.25-1.17c0-.646.56-1.17 1.25-1.17zM11.125 8c0-.645-.56-1.17-1.25-1.17s-1.25.525-1.25 1.17c0 .645.56 1.17 1.25 1.17s1.25-.525 1.25-1.17z" />
-          </svg>
-        </i>
-        <img class="avatar-image h-full w-auto object-cover" src={getIcon(totp.name)} alt="icon" />
-        <p class="flex-auto block min-w-0">
-          <span class="block text-base truncate">{totp.name}</span>
-          <span class="block text-sm uppercase">{totp.hashingAlgo}</span>
-        </p>
-        <button type="button" use:popup={getTotpItemMenuSettings(item.id)}>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="w-6 h-6">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
-          </svg>
-        </button>
-        <div class="card p-4 w-48 shadow-md !transition-none !duration-0" data-popup="totpItemMenu_{item.id}">
-          <nav class="list-nav">
-            <ul>
-              <li>
-                <a class="flex-auto" href="/update/{item.item.id}">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke-width="1.5"
-                    stroke="currentColor"
-                    class="w-6 h-6">
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
-                  </svg>
-                  <span class="flex-auto">Edit</span>
-                </a>
-              </li>
-              <li>
-                <button class="flex-auto" type="button" on:click={e => handleDeleteToken(e, item.item)}>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke-width="1.5"
-                    stroke="currentColor"
-                    class="w-6 h-6">
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
-                  </svg>
-                  <span class="flex-auto text-left">Delete</span>
-                </button>
-              </li>
-            </ul>
-          </nav>
-          <div class="arrow bg-surface-100-800-token !left-[10.333rem]" />
-        </div>
-      </li>
-    </div>
-  {/each}
-</ul>
+{#if internalList?.length > 0}
+  <ul
+    class="list p-4 pt-3 pb-3"
+    use:dndzone={{
+      items: internalList,
+      dragDisabled,
+      flipDurationMs: flipAnimationMs,
+      dropTargetStyle: {},
+      transformDraggedElement,
+    }}
+    on:consider={handleConsider}
+    on:finalize={handleFinalize}>
+    {#each internalList as item (item.id)}
+      {@const totp = item.item}
+      <div animate:flip={{ duration: flipAnimationMs }}>
+        <li class="h-14 p-1">
+          <i
+            class="material-icons drag-handle cursor-move"
+            on:mousedown={startDrag}
+            on:touchstart={startDrag}
+            on:keydown={handleKeyDown}
+            role="none">
+            <svg
+              viewBox="0 0 16 16"
+              stroke-width="1.5"
+              fill="currentColor"
+              class="w-6 h-6"
+              xmlns="http://www.w3.org/2000/svg">
+              <path
+                fill-rule="evenodd"
+                d="M7.375 3.67c0-.645-.56-1.17-1.25-1.17s-1.25.525-1.25 1.17c0 .646.56 1.17 1.25 1.17s1.25-.524 1.25-1.17zm0 8.66c0-.646-.56-1.17-1.25-1.17s-1.25.524-1.25 1.17c0 .645.56 1.17 1.25 1.17s1.25-.525 1.25-1.17zm-1.25-5.5c.69 0 1.25.525 1.25 1.17 0 .645-.56 1.17-1.25 1.17S4.875 8.645 4.875 8c0-.645.56-1.17 1.25-1.17zm5-3.16c0-.645-.56-1.17-1.25-1.17s-1.25.525-1.25 1.17c0 .646.56 1.17 1.25 1.17s1.25-.524 1.25-1.17zm-1.25 7.49c.69 0 1.25.524 1.25 1.17 0 .645-.56 1.17-1.25 1.17s-1.25-.525-1.25-1.17c0-.646.56-1.17 1.25-1.17zM11.125 8c0-.645-.56-1.17-1.25-1.17s-1.25.525-1.25 1.17c0 .645.56 1.17 1.25 1.17s1.25-.525 1.25-1.17z" />
+            </svg>
+          </i>
+          <img class="avatar-image h-full w-auto object-cover" src={getIcon(totp.name)} alt="icon" />
+          <p class="flex-auto block min-w-0">
+            <span class="block text-base truncate">{totp.name}</span>
+            <span class="block text-sm uppercase">{totp.hashingAlgo}</span>
+          </p>
+          <button type="button" use:popup={getTotpItemMenuSettings(item.id)}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="w-6 h-6">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
+            </svg>
+          </button>
+          <div class="card p-4 w-48 shadow-md !transition-none !duration-0" data-popup="totpItemMenu_{item.id}">
+            <nav class="list-nav">
+              <ul>
+                <li>
+                  <a class="flex-auto" href="/update/{item.item.id}">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor"
+                      class="w-6 h-6">
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+                    </svg>
+                    <span class="flex-auto">Edit</span>
+                  </a>
+                </li>
+                <li>
+                  <button class="flex-auto" type="button" on:click={e => handleDeleteToken(e, item.item)}>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor"
+                      class="w-6 h-6">
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                    </svg>
+                    <span class="flex-auto text-left">Delete</span>
+                  </button>
+                </li>
+              </ul>
+            </nav>
+            <div class="arrow bg-surface-100-800-token !left-[10.333rem]" />
+          </div>
+        </li>
+      </div>
+    {/each}
+  </ul>
+{:else}
+  <div class="flex justify-center flex-col w-full h-full items-center">
+    <h3 class="h3 block mb-5">Token list is empty</h3>
+    <a class="btn variant-filled-primary btn-lg max-w-[15rem]" href="/update">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="w-6 h-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+      </svg>
+      <span>Add new token</span>
+    </a>
+  </div>
+{/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -14,7 +14,7 @@
   import { AvailableTimezoneProviders } from '$lib/timezone-providers';
   import CommonPreloader from '$components/common-preloader/common-preloader.svelte';
   import Lightswitch from '$components/lightswitch/lightswitch.svelte';
-  import LightswitchDemon from '$components/lightswitch/lightswitch-demon.svelte';
+  import LightswitchDaemon from '$components/lightswitch/lightswitch-daemon.svelte';
 
   initializeStores();
 
@@ -29,7 +29,8 @@
 
   $: $navigating && drawerStore.close();
 
-  $: classesActivePage = (href: string) => (href === $page.url.pathname ? '!bg-primary-500' : '');
+  $: classesActivePage = (href: string) =>
+    href === $page.url.pathname ? '!bg-primary-500 focus:!bg-primary-500' : 'focus:!bg-inherit';
 
   async function closeTotpAppClient() {
     await SharedTotpAppClient.close();
@@ -87,7 +88,7 @@
 </script>
 
 <svelte:window on:beforeunload={closeTotpAppClient} />
-<LightswitchDemon />
+<LightswitchDaemon />
 
 {#if ready}
   <Modal />
@@ -97,7 +98,7 @@
     <nav class="list-nav p-2 h-full">
       <ul class="h-full flex flex-col">
         <li>
-          <a href="/update" class="{classesActivePage('/update')} focus:!bg-inherit focus:!text-inherit">
+          <a href="/update" class="{classesActivePage('/update')} focus:!text-inherit">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
diff --git a/src/routes/update/[[id]]/+page.svelte b/src/routes/update/[[id]]/+page.svelte
@@ -38,7 +38,7 @@
   }
 
   async function onScanQrCodeClicked() {
-    GlobalPreloader.show('Looking for QR code');
+    GlobalPreloader.show('Looking for QR code on a screen');
     // https://gist.github.com/kcramer/c6148fb906e116d84e4bde7b2ab56992
     scannedData = null;
     tokenInfo = null;

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`async function onScanQrCodeClicked() {`
`41`		`- GlobalPreloader.show('Looking for QR code');`
	`41`	`+ GlobalPreloader.show('Looking for QR code on a screen');`
`42`	`42`	`// https://gist.github.com/kcramer/c6148fb906e116d84e4bde7b2ab56992`
`43`	`43`	`scannedData = null;`
`44`	`44`	`tokenInfo = null;`