From dbe2d36031949a0fdb5b55cd575d2f8da33718e2 Mon Sep 17 00:00:00 2001
From: YarikMix <43493788+YarikMix@users.noreply.github.com>
Date: Wed, 15 May 2024 23:43:10 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D1=83=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B5=D0=B2=D1=8C=D1=8E=D1=88=D0=B5=D0=BA=20=D0=B7=D0=B0=D0=BC?=
 =?UTF-8?q?=D0=B5=D1=82=D0=BE=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/src/components/Note/Note.sass    | 10 ++++++++++
 public/src/components/Note/Note.tsx     |  2 +-
 public/src/modules/stores/NotesStore.ts |  3 ++-
 public/src/pages/Notes/index.tsx        |  4 +++-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/public/src/components/Note/Note.sass b/public/src/components/Note/Note.sass
index 1ada1d47..c53da25b 100644
--- a/public/src/components/Note/Note.sass
+++ b/public/src/components/Note/Note.sass
@@ -18,6 +18,10 @@
 	&:hover
 		background: rgba(27, 39, 53, 0.9)
 
+		.favorite-icon
+			animation: showAnim 0.2s
+			display: flex
+
 	.note-title__container
 		display: flex
 		align-items: center
@@ -53,6 +57,8 @@
 
 	.favorite-icon
 		position: absolute
+		display: none
+		animation: closeAnim 0.2s
 		right: 15px
 		top: 10px
 		filter: invert(70%)
@@ -62,5 +68,9 @@
 		padding: 4px
 		border-radius: 8px
 
+		&.show
+			display: block
+			animation: showAnim 0.2s
+
 		&:hover
 			background: rgba(0, 0, 0, 0.15)
\ No newline at end of file
diff --git a/public/src/components/Note/Note.tsx b/public/src/components/Note/Note.tsx
index 7d0f28f1..f1f556fc 100644
--- a/public/src/components/Note/Note.tsx
+++ b/public/src/components/Note/Note.tsx
@@ -59,7 +59,7 @@ export class Note extends ScReact.Component<NoteProps, any> {
                 <div className="note-tags-container" ref={ref => this.tagsContainerRef = ref}></div>
                 <span className="update-time">{formatDate(this.props.note.update_time)}</span>
 
-                <Img src={this.props.note.favorite ? "star-filled.svg" : "star.svg"} className="favorite-icon" onClick={this.toggleFavorite}/>
+                <Img src={this.props.note.favorite ? "star-filled.svg" : "star.svg"} className={"favorite-icon " + (this.props.note.favorite ? "show" : "") } onClick={this.toggleFavorite}/>
             </div>
         );
     }
diff --git a/public/src/modules/stores/NotesStore.ts b/public/src/modules/stores/NotesStore.ts
index cce2d4d9..6050c740 100644
--- a/public/src/modules/stores/NotesStore.ts
+++ b/public/src/modules/stores/NotesStore.ts
@@ -741,6 +741,7 @@ class NotesStore extends BaseStore<NotesStoreState> {
             }))
 
             AppToasts.info("Заметка добавлена в избранное")
+
         }
     }
 
@@ -750,7 +751,6 @@ class NotesStore extends BaseStore<NotesStoreState> {
         AppDispatcher.dispatch(UserActions.UPDATE_CSRF, csrf);
 
         if (status == 200) {
-
             if (this.state.selectedNote?.id == note_id) {
                 this.SetState(state => ({
                     ...state,
@@ -771,6 +771,7 @@ class NotesStore extends BaseStore<NotesStoreState> {
             }))
 
             AppToasts.info("Заметка удалена из избранного")
+
         }
     }
 
diff --git a/public/src/pages/Notes/index.tsx b/public/src/pages/Notes/index.tsx
index 63258d96..0c7117e2 100644
--- a/public/src/pages/Notes/index.tsx
+++ b/public/src/pages/Notes/index.tsx
@@ -240,7 +240,9 @@ export class NotesPage extends ScReact.Component<any, any> {
                     <div className="notes-container" onclick={this.handleSelectNote} ref={ref => this.notesContainerRef = ref}>
                         <Loader active={this.state.fetching}/>
                         {
-                            this.state.notes.length > 0 ?
+                            this.state.notes.sort(function (note1, note2) {
+                                return (note1.favorite === note2.favorite)? 0 : note1.favorite? -1 : 1
+                            }).length > 0 ?
                                 this.state.notes.map(note => (
                                     <Note selected={this.state.selectedNote?.id == note.id} note={note}/>
                                 ))