From a78546f14537801f496a1e3b6d59f4e6b2bbf560 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 25 Oct 2022 20:20:41 -0700
Subject: [PATCH] feat: :sparkles: Star button
---
CALCKEY.md | 2 +-
package.json | 2 +-
packages/client/src/components/MkNote.vue | 3 ++
.../client/src/components/MkNoteDetailed.vue | 3 ++
.../client/src/components/MkStarButton.vue | 32 +++++++++++++++++++
5 files changed, 40 insertions(+), 2 deletions(-)
create mode 100644 packages/client/src/components/MkStarButton.vue
diff --git a/CALCKEY.md b/CALCKEY.md
index 99bf045a6..1bb016dbf 100644
--- a/CALCKEY.md
+++ b/CALCKEY.md
@@ -4,7 +4,6 @@
- MFM button
- Classic mode make instance icon bring up new context menu
-- Like/star button
- Backfill remote users
- User "choices" (recommended users) like Mastodon and Soapbox
- Option to publicize instance blocks
@@ -46,6 +45,7 @@
- Redesigned mobile bottom nav bar
- Post button on TL
- Star as default reaction
+- Like/star button
- Rosé Pine by default (+ non-themable elements made Rosé Pine)
- Better sidebar/navbar
- Add back groups
diff --git a/package.json b/package.json
index 8e8271b25..857b2a76a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "calckey",
- "version": "12.119.0-calc.3",
+ "version": "12.119.0-calc.4",
"codename": "aqua",
"repository": {
"type": "git",
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 908f6cb80..75546c90a 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -71,6 +71,7 @@
</div>
<footer class="footer">
<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+ <XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
<i class="fas fa-face-laugh"></i>
</button>
@@ -113,6 +114,7 @@ import XReactionsViewer from '@/components/MkReactionsViewer.vue';
import XMediaList from '@/components/MkMediaList.vue';
import XCwButton from '@/components/MkCwButton.vue';
import XPoll from '@/components/MkPoll.vue';
+import XStarButton from '@/components/MkStarButton.vue';
import XRenoteButton from '@/components/MkRenoteButton.vue';
import XQuoteButton from '@/components/MkQuoteButton.vue';
import MkUrlPreview from '@/components/MkUrlPreview.vue';
@@ -164,6 +166,7 @@ const isRenote = (
const el = ref<HTMLElement>();
const menuButton = ref<HTMLElement>();
+const starButton = ref<InstanceType<typeof XStarButton>>();
const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
const renoteTime = ref<HTMLElement>();
const reactButton = ref<HTMLElement>();
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 66db8f79a..cbd9d9492 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -81,6 +81,7 @@
</MkA>
</div>
<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+ <XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
<i class="fas fa-face-laugh"></i>
</button>
@@ -123,6 +124,7 @@ import XReactionsViewer from '@/components/MkReactionsViewer.vue';
import XMediaList from '@/components/MkMediaList.vue';
import XCwButton from '@/components/MkCwButton.vue';
import XPoll from '@/components/MkPoll.vue';
+import XStarButton from '@/components/MkStarButton.vue';
import XRenoteButton from '@/components/MkRenoteButton.vue';
import XQuoteButton from '@/components/MkQuoteButton.vue';
import MkUrlPreview from '@/components/MkUrlPreview.vue';
@@ -173,6 +175,7 @@ const isRenote = (
const el = ref<HTMLElement>();
const menuButton = ref<HTMLElement>();
+const starButton = ref<InstanceType<typeof XStarButton>>();
const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
const renoteTime = ref<HTMLElement>();
const reactButton = ref<HTMLElement>();
diff --git a/packages/client/src/components/MkStarButton.vue b/packages/client/src/components/MkStarButton.vue
new file mode 100644
index 000000000..f0a95ab42
--- /dev/null
+++ b/packages/client/src/components/MkStarButton.vue
@@ -0,0 +1,32 @@
+<template>
+<button class="skdfgljsdkf _button" @click="star()">
+ <i class="fas fa-star"></i>
+</button>
+</template>
+
+<script lang="ts" setup>
+import type { Note } from 'misskey-js/built/entities';
+import { pleaseLogin } from '@/scripts/please-login';
+import * as os from '@/os';
+
+const props = defineProps<{
+ note: Note;
+}>();
+
+function star(): void {
+ pleaseLogin();
+ os.api('notes/reactions/create', {
+ noteId: props.note.id,
+ reaction: '⭐',
+ });
+}
+</script>
+
+<style lang="scss" scoped>
+.skdfgljsdkf {
+ display: inline-block;
+ height: 32px;
+ margin: 2px;
+ padding: 0 6px;
+}
+</style>