chore: add heat map to sidebar (#1255)

web/src/components/Header.tsx

@@ -64,7 +64,7 @@ const Header = () => {
                 className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
                 onClick={() => showArchivedMemoDialog()}
               >
-                <Icon.Archive className="mr-4 w-6 h-auto opacity-80" /> {t("common.archive")}
+                <Icon.Archive className="mr-4 w-6 h-auto opacity-80" /> {t("common.archived")}
               </button>
               <button
                 className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"

web/src/components/HomeSidebar.tsx

@@ -4,6 +4,7 @@ import { useLocationStore } from "../store/module";
 import ShortcutList from "./ShortcutList";
 import TagList from "./TagList";
 import SearchBar from "./SearchBar";
+import UsageHeatMap from "./UsageHeatMap";
 import "../less/home-sidebar.less";
 
 const HomeSidebar = () => {
@@ -17,10 +18,11 @@ const HomeSidebar = () => {
   return (
     <>
       <div className="mask" onClick={() => toggleHomeSidebar(false)}></div>
-      <aside className="sidebar-wrapper">
+      <aside className="home-sidebar-wrapper">
-        <div className="pl-6 pr-2 mb-4 w-full">
+        <div className="pl-6 pr-4 mb-4 w-full">
           <SearchBar />
         </div>
+        <UsageHeatMap />
         <ShortcutList />
         <TagList />
       </aside>
@@ -29,7 +31,7 @@ const HomeSidebar = () => {
 };
 
 export const toggleHomeSidebar = (show?: boolean) => {
-  const sidebarEl = document.body.querySelector(".sidebar-wrapper") as HTMLDivElement;
+  const sidebarEl = document.body.querySelector(".home-sidebar-wrapper") as HTMLDivElement;
   const maskEl = sidebarEl.previousSibling as HTMLDivElement;
 
   if (isUndefined(show)) {

web/src/components/UsageHeatMap.tsx

@@ -7,7 +7,7 @@ import * as utils from "../helpers/utils";
 import "../less/usage-heat-map.less";
 
 const tableConfig = {
-  width: 12,
+  width: 11,
   height: 7,
 };
 

web/src/less/home-sidebar.less

@@ -1,5 +1,5 @@
-.sidebar-wrapper {
+.home-sidebar-wrapper {
-  @apply flex-shrink-0 fixed sm:sticky top-0 z-30 sm:z-0 translate-x-56 sm:translate-x-0 hidden md:flex flex-col justify-start items-start w-56 h-full py-4 bg-white dark:bg-zinc-800 sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain hide-scrollbar;
+  @apply flex-shrink-0 fixed sm:sticky top-0 z-30 sm:z-0 translate-x-56 sm:translate-x-0 hidden md:flex flex-col justify-start items-start w-56 md:mr-2 h-full py-4 bg-white dark:bg-zinc-800 sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain hide-scrollbar;
 
   &.show {
     @apply flex translate-x-0 right-0 shadow-2xl sm:shadow-none;

web/src/less/memo.less

@@ -13,7 +13,7 @@
     @apply absolute top-0 right-0 z-1;
 
     &::after {
-      @apply absolute top-0 right-0 border-transparent border-t-green-600 border-r-green-600 rounded-tr;
+      @apply absolute top-0 right-0 border-transparent border-t-green-600 border-r-green-600 rounded-tr-md;
       content: "";
       border-width: 6px;
     }

web/src/less/search-bar.less

@@ -15,7 +15,7 @@
   }
 
   > .search-bar-inputer {
-    @apply h-9 flex flex-row justify-start items-center w-full py-2 px-3 sm:px-4 rounded-full sm:rounded-lg bg-zinc-200 dark:bg-zinc-700;
+    @apply h-9 flex flex-row justify-start items-center w-full py-2 px-3 sm:px-4 rounded-md bg-gray-200 dark:bg-zinc-700;
 
     > .icon-img {
       @apply w-4 h-auto opacity-30 dark:text-gray-200;

web/src/less/usage-heat-map.less

@@ -1,8 +1,14 @@
 .usage-heat-map-wrapper {
-  @apply flex flex-row justify-start items-center w-full h-32 flex-wrap pr-6 pb-3 shrink-0;
+  @apply flex flex-row justify-start items-center flex-nowrap w-full h-32 pr-2 pb-3 shrink-0;
+
+  &:hover {
+    > .day-tip-text-container {
+      @apply visible;
+    }
+  }
 
   > .day-tip-text-container {
-    @apply w-6 h-full grid grid-rows-7;
+    @apply w-6 h-full grid grid-rows-7 invisible;
 
     > .tip-text {
       @apply pr-1 w-full h-full text-right font-mono text-gray-400;
@@ -12,13 +18,13 @@
 
   > .usage-heat-map {
     @apply h-full grid grid-rows-7;
-    width: 200px;
+    width: 186px;
-    grid-template-columns: repeat(12, 1fr);
+    grid-template-columns: repeat(11, 1fr);
     grid-auto-flow: column;
 
     > .stat-wrapper {
       > .stat-container {
-        @apply block rounded-sm bg-gray-200 dark:bg-zinc-700;
+        @apply block rounded bg-gray-200 dark:bg-zinc-700;
         width: 14px;
         height: 14px;
 

web/src/locales/en.json

@@ -5,6 +5,7 @@
     "resources": "Resources",
     "settings": "Settings",
     "daily-review": "Daily Review",
+    "archived": "Archived",
     "email": "Email",
     "password": "Password",
     "avatar": "Avatar",

web/src/locales/zh.json

@@ -5,6 +5,7 @@
     "resources": "资源库",
     "settings": "设置",
     "daily-review": "每日回顾",
+    "archived": "归档",
     "email": "邮箱",
     "password": "密码",
     "username": "用户名",