Feat(ToolRepository): Add favorite tool list

Add favorite tool list to user tool repository

src/assets/css/pages/tools/index.scss

@@ -5,66 +5,104 @@
   .root-content {
     padding: 20px;
     gap: 20px;
-    flex-wrap: wrap;
-    justify-content: flex-start;
 
-    > .card-box {
-      width: 180px;
-      height: 290px;
-      flex: 0 0 auto;
-    }
+    .own-content {
+      gap: 20px;
+      flex-wrap: wrap;
+      justify-content: flex-start;
 
-
-    & > :first-child {
-      cursor: pointer;
-
-      .info {
-        padding-top: 50px;
-      }
-    }
-
-    & > :not(:first-child) {
-      .info {
-        transform: translateY(40px);
-        transition: all 0.1s ease;
+      > .card-box {
+        width: 180px;
+        height: 290px;
+        flex: 0 0 auto;
       }
 
-      .operation {
-        display: flex;
-        flex: 1;
-        justify-content: center;
-        padding-bottom: 20px;
-        gap: 4px;
-        width: 70%;
-        flex-direction: column;
-        align-items: center;
-        visibility: hidden;
-        opacity: 0;
 
-        > *, .edit > * {
-          width: 100%;
+      & > :first-child {
+        cursor: pointer;
+
+        .info {
+          padding-top: 50px;
+        }
+      }
+
+      & > :not(:first-child) {
+        .info {
+          transform: translateY(40px);
+          transition: all 0.1s ease;
         }
 
-        .edit {
-          > * {
-            > :first-child {
-              flex: 1;
+        .operation {
+          display: flex;
+          flex: 1;
+          justify-content: center;
+          padding-bottom: 20px;
+          gap: 4px;
+          width: 70%;
+          flex-direction: column;
+          align-items: center;
+          visibility: hidden;
+          opacity: 0;
+
+          > *, .edit > * {
+            width: 100%;
+          }
+
+          .edit {
+            > * {
+              > :first-child {
+                flex: 1;
+              }
             }
           }
         }
       }
+
+      & > :not(:first-child):hover {
+        .info {
+          transform: translateY(-10px);
+          transition: all 0.2s ease;
+        }
+
+        .operation {
+          visibility: visible;
+          opacity: 1;
+          transition: all 0.4s ease;
+        }
+      }
     }
 
-    & > :not(:first-child):hover {
-      .info {
-        transform: translateY(-10px);
-        transition: all 0.2s ease;
+    .favorite-divider {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 20px;
+
+      :first-child, :last-child {
+        height: 0;
+        border: {
+          width: 1px;
+          color: constants.$divide-color;
+          style: dashed;
+        };
       }
 
-      .operation {
-        visibility: visible;
-        opacity: 1;
-        transition: all 0.4s ease;
+      .divider-text {
+        flex: 0 0 auto;
+        font-size: 1.2em;
+        color: constants.$font-secondary-color;
+      }
+    }
+
+    .star-content {
+      gap: 20px;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+
+      > .card-box {
+        width: 180px;
+        height: 290px;
+        flex: 0 0 auto;
       }
     }
   }