Merge pull request #89 from janrito/show-decay

Show decay
janrito · Dec 9, 2022 · e3938c1 · e3938c1
2 parents 2d72dc6 + feae7aa
commit e3938c1
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 26 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,12 +4,16 @@
   "eslint.validate": ["javascript", "svelte"],
   "cSpell.words": [
     "cssnano",
+    "dndzone",
     "esac",
     "fontpath",
     "fontsource",
+    "heroicon",
     "htmlnano",
     "Iosevka",
+    "janrito",
     "lightningcss",
+    "newtab",
     "parens",
     "pcss",
     "quipu",

diff --git a/source/components/Bookmark.svelte b/source/components/Bookmark.svelte
@@ -27,14 +27,18 @@ export let favIcon = null;
 export let decay = 0;
 export let closeEnabled = true;
 
-let hover = false;
-
 const dispatch = createEventDispatcher();
 const parsedUrl = new URL(url);
 const openBookmark = () => dispatch("open");
 const closeBookmark = () => dispatch("close");
 const highlightBookmark = () => key && dispatch("highlight", key);
 
+const darkBackground = decay <= 0.7 ? "bg-blue-500" : decay <= 0.9 ? "bg-orange-500" : "bg-red-500";
+const lightBackground =
+  decay <= 0.7 ? "bg-blue-200" : decay <= 0.9 ? "bg-orange-200" : "bg-red-200";
+const darkForeground =
+  decay <= 0.7 ? "text-blue-400" : decay <= 0.9 ? "text-orange-400" : "text-red-400";
+
 $: tagsToDraw = tags
   .map(tag => ({
     name: tag,
@@ -44,13 +48,11 @@ $: tagsToDraw = tags
 </script>
 
 <div
-  class="p-1 m-1.5 flex flex-col bg-gray-50 cursor-pointer"
+  class="group/bookmark p-1 m-1.5 flex flex-col bg-gray-50 cursor-pointer relative"
   on:keydown="{e => e.key === 'Enter' && openBookmark()}"
-  on:click|preventDefault="{openBookmark}"
-  on:mouseenter="{() => (hover = true)}"
-  on:mouseleave="{() => (hover = false)}">
-  {#if hover && closeEnabled}
-    <div class="flex flex-row h-5 pl-1 ml-5 -mb-5 z-50 justify-end">
+  on:click|preventDefault="{openBookmark}">
+  {#if closeEnabled}
+    <div class="hidden group-hover/bookmark:flex flex-row h-5 pl-1 ml-5 -mb-5 z-50 justify-end">
       <div
         on:keydown="{e => e.key === 'Enter' && closeBookmark()}"
         on:click|preventDefault|stopPropagation|once="{closeBookmark}"
@@ -68,9 +70,8 @@ $: tagsToDraw = tags
           <span
             on:keydown="{e => e.key === 'Enter' && highlightBookmark()}"
             on:click|preventDefault|stopPropagation="{highlightBookmark}"
-            class="block align-top text-sm {hover
-              ? 'text-blue-800'
-              : 'text-gray-200'} cursor-pointer">¶</span>
+            class="block align-top text-sm text-gray-200 group-hover/bookmark:text-blue-800 cursor-pointer"
+            >¶</span>
         </div>
       {/if}
     </div>
@@ -94,11 +95,23 @@ $: tagsToDraw = tags
       {/if}
     </div>
   </div>
-  <div class="shrink-0 h-px -m-1 mt-2 ">
+  <div class="group/decay shrink-0 h-px -m-1 mt-2 ">
     <div class="w-full bg-gray-200">
-      <div
-        class="{decay <= 0.7 ? 'bg-blue-500' : decay <= 0.9 ? 'bg-orange-500' : 'bg-red-500'} h-px"
-        style="width: {decay * 100}%">
+      <div class="{darkBackground} h-px" style="width: {decay * 100}%">
+        {#if decay}
+          <!-- tooltip -->
+          <div
+            class="hidden group-hover/decay:flex absolute z-10 -bottom-12 {decay <= 0.7
+              ? 'left-1'
+              : decay <= 0.9
+              ? 'left-10'
+              : '-right-2'} mt-6 flex-col items-center">
+            <div class="w-3 h-3 -mb-2 rotate-45 {lightBackground}"></div>
+            <span
+              class="relative p-2 text-xs leading-none whitespace-no-wrap shadow-lg {lightBackground} {darkForeground}"
+              >Decay: {Math.round(decay * 100)}%</span>
+          </div>
+        {/if}
       </div>
     </div>
   </div>

diff --git a/source/components/Settings.svelte b/source/components/Settings.svelte
@@ -29,7 +29,7 @@ const goToTab = event => {
   currentTabId = Number(event.detail.id);
 };
 let allSettingsEditMode = false;
-const enableallSettingsEditMode = () => {
+const enableAllSettingsEditMode = () => {
   allSettingsEditMode = true;
 };
 
@@ -102,12 +102,12 @@ $: tabsMatchingLiveExceptions = $browserTabs
   <div class="h-full flex flex-col overflow-y-auto overflow-x-hidden pr-3">
     <div class="flex flex-row flex-wrap">
       {#if currentTab.name === "pinboard"}
-        <label id="pinboard-api-token" for="pinboardAPITtoken" class="w-1/2 p-1 pl-7 mt-5">
+        <label id="pinboard-api-token" for="pinboardAPIToken" class="w-1/2 p-1 pl-7 mt-5">
           <span>Pinboard API Token</span>
           <input
             class="w-full bg-gray-100 border-b-2 border-gray-300"
             type="text"
-            name="pinboardAPITtoken"
+            name="pinboardAPIToken"
             bind:value="{$settings.pinboardAPIToken}" />
 
           <p class="text-xs">
@@ -185,8 +185,8 @@ $: tabsMatchingLiveExceptions = $browserTabs
           {:else}
             <pre
               class="w-full h-min-content p-3 bg-gray-50 text-gray-400 border-b-2 border-gray-300 text-xs "
-              on:click="{enableallSettingsEditMode}"
-              on:keydown="{e => e.key === 'Enter' && enableallSettingsEditMode()}"
+              on:click="{enableAllSettingsEditMode}"
+              on:keydown="{e => e.key === 'Enter' && enableAllSettingsEditMode()}"
               name="allSettings">{JSON.stringify($settings, null, "  ")}</pre>
           {/if}
         </label>

diff --git a/source/components/Tabs.svelte b/source/components/Tabs.svelte
@@ -53,14 +53,14 @@ const handleDragDecayedTab = () => {
   tempDecayedTabs = null;
 };
 
-const calculateDecay = (tab, tabLifetimeMeta) => {
-  if (tabLifetimeMeta === undefined) {
-    return 0;
-  }
+const getTabLifetime = (tab, updatedLifetimes) => {
+  const tabLifetimeMeta = updatedLifetimes[tabIdToLifetimeId(tab._id)] || { lifetime: undefined };
   const { lifetime } = tabLifetimeMeta;
+  return lifetime;
+};
 
+const calculateDecay = (tab, lifetime) => {
   const delay = calculateDelay(lifetime, tab.lastAccessed);
-
   return 1 - delay / lifetime;
 };
 
@@ -138,12 +138,13 @@ $: updatedLifetimes = $tabLifetimes;
       on:consider="{handleDragTabConsider(windowIndex)}"
       on:finalize="{handleDragTab}">
       {#each tabs as tab (tab.id)}
+        {@const lifetime = getTabLifetime(tab, updatedLifetimes)}
         <Bookmark
           key="{tab.id}"
           title="{tab.title}"
           url="{tab.url}"
           favIcon="{tab.favIconUrl}"
-          decay="{calculateDecay(tab, updatedLifetimes[tabIdToLifetimeId(tab._id)])}"
+          decay="{calculateDecay(tab, lifetime)}"
           on:open="{switchToTabDispatcher(tab.windowId, tab._id)}"
           on:close="{removeTabDispatcher(tab._id)}" />
       {/each}