From 18a466b30ed70207e298a11ed6c4d0409be2dd43 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 01:16:41 +0900
Subject: [PATCH 01/43] change docker prop

---
 .github/workflows/docker-develop.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/docker-develop.yml b/.github/workflows/docker-develop.yml
index ac2b1b4d358a..acb04bd26e03 100644
--- a/.github/workflows/docker-develop.yml
+++ b/.github/workflows/docker-develop.yml
@@ -7,7 +7,7 @@ on:
   workflow_dispatch:
 
 env:
-  REGISTRY_IMAGE: misskey/misskey
+  REGISTRY_IMAGE: pernucia/pern-custom-misskey
 
 jobs:
   # see https://docs.docker.com/build/ci/github-actions/multi-platform/#distribute-build-across-multiple-runners
@@ -20,7 +20,7 @@ jobs:
         platform:
           - linux/amd64
           - linux/arm64
-    if: github.repository == 'misskey-dev/misskey'
+    if: github.repository == 'pernucia/pern-custom-misskey'
     steps:
       - name: Prepare
         run: |

From 7e2909e944e703e16ee336e693808000713189f5 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 03:25:23 +0900
Subject: [PATCH 02/43] publicity minify

---
 .../src/components/MkVisitorDashboard.vue     |  4 +--
 packages/frontend/src/pages/about.vue         | 20 +++++++------
 .../frontend/src/pages/welcome.entrance.a.vue |  2 +-
 packages/frontend/src/ui/_common_/common.ts   | 28 +++++++++++--------
 4 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/packages/frontend/src/components/MkVisitorDashboard.vue b/packages/frontend/src/components/MkVisitorDashboard.vue
index 97c765d81c73..86dbc01f5726 100644
--- a/packages/frontend/src/components/MkVisitorDashboard.vue
+++ b/packages/frontend/src/components/MkVisitorDashboard.vue
@@ -38,12 +38,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div :class="$style.statsItemCount"><MkNumber :value="stats.originalNotesCount"/></div>
 		</div>
 	</div>
-	<div v-if="instance.policies.ltlAvailable" :class="[$style.tl, $style.panel]">
+	<!-- <div v-if="instance.policies.ltlAvailable" :class="[$style.tl, $style.panel]">
 		<div :class="$style.tlHeader">{{ i18n.ts.letsLookAtTimeline }}</div>
 		<div :class="$style.tlBody">
 			<MkTimeline src="local"/>
 		</div>
-	</div>
+	</div> -->
 	<div :class="$style.panel">
 		<XActiveUsersChart/>
 	</div>
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index 8dfeb6d2a73e..67068c878c79 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -5,14 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<!-- <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> -->
 	<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 		<MkSpacer v-if="tab === 'overview'" :contentMax="600" :marginMin="20">
 			<XOverview/>
 		</MkSpacer>
-		<MkSpacer v-else-if="tab === 'emojis'" :contentMax="1000" :marginMin="20">
+		<!-- <MkSpacer v-else-if="tab === 'emojis'" :contentMax="1000" :marginMin="20">
 			<XEmojis/>
-		</MkSpacer>
+		</MkSpacer> -->
 		<MkSpacer v-else-if="tab === 'federation'" :contentMax="1000" :marginMin="20">
 			<XFederation/>
 		</MkSpacer>
@@ -31,7 +31,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 
 const XOverview = defineAsyncComponent(() => import('@/pages/about.overview.vue'));
-const XEmojis = defineAsyncComponent(() => import('@/pages/about.emojis.vue'));
+// const XEmojis = defineAsyncComponent(() => import('@/pages/about.emojis.vue'));
 const XFederation = defineAsyncComponent(() => import('@/pages/about.federation.vue'));
 const MkInstanceStats = defineAsyncComponent(() => import('@/components/MkInstanceStats.vue'));
 
@@ -54,11 +54,13 @@ const headerActions = computed(() => []);
 const headerTabs = computed(() => [{
 	key: 'overview',
 	title: i18n.ts.overview,
-}, {
-	key: 'emojis',
-	title: i18n.ts.customEmojis,
-	icon: 'ti ti-icons',
-}, {
+}, 
+// {
+// 	key: 'emojis',
+// 	title: i18n.ts.customEmojis,
+// 	icon: 'ti ti-icons',
+// },
+{
 	key: 'federation',
 	title: i18n.ts.federation,
 	icon: 'ti ti-whirl',
diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index f0e4a852c971..f6823b875e8a 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -38,7 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import XTimeline from './welcome.timeline.vue';
+// import XTimeline from './welcome.timeline.vue';
 import MarqueeText from '@/components/MkMarquee.vue';
 import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
 import misskeysvg from '/client-assets/misskey.svg';
diff --git a/packages/frontend/src/ui/_common_/common.ts b/packages/frontend/src/ui/_common_/common.ts
index f908803f0116..4a51a9ce08ef 100644
--- a/packages/frontend/src/ui/_common_/common.ts
+++ b/packages/frontend/src/ui/_common_/common.ts
@@ -51,12 +51,14 @@ export function openInstanceMenu(ev: MouseEvent) {
 		text: i18n.ts.instanceInfo,
 		icon: 'ti ti-info-circle',
 		to: '/about',
-	}, {
-		type: 'link',
-		text: i18n.ts.customEmojis,
-		icon: 'ti ti-icons',
-		to: '/about#emojis',
-	}, {
+	}, 
+	// {
+	// 	type: 'link',
+	// 	text: i18n.ts.customEmojis,
+	// 	icon: 'ti ti-icons',
+	// 	to: '/about#emojis',
+	// }, 
+	{
 		type: 'link',
 		text: i18n.ts.federation,
 		icon: 'ti ti-whirl',
@@ -66,12 +68,14 @@ export function openInstanceMenu(ev: MouseEvent) {
 		text: i18n.ts.charts,
 		icon: 'ti ti-chart-line',
 		to: '/about#charts',
-	}, { type: 'divider' }, {
-		type: 'link',
-		text: i18n.ts.ads,
-		icon: 'ti ti-ad',
-		to: '/ads',
-	});
+	}, { type: 'divider' }, 
+	// {
+	// 	type: 'link',
+	// 	text: i18n.ts.ads,
+	// 	icon: 'ti ti-ad',
+	// 	to: '/ads',
+	// }
+);
 
 	if ($i && ($i.isAdmin || $i.policies.canInvite) && instance.disableRegistration) {
 		menuItems.push({

From eed40d9d16495b7f53f69f74a1019c5932867797 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 04:09:29 +0900
Subject: [PATCH 03/43] publicity minfy 2

---
 packages/frontend/src/pages/about.vue | 2 +-
 packages/frontend/src/ui/visitor.vue  | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index 67068c878c79..352599904940 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkStickyContainer>
-	<!-- <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> -->
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 		<MkSpacer v-if="tab === 'overview'" :contentMax="600" :marginMin="20">
 			<XOverview/>
diff --git a/packages/frontend/src/ui/visitor.vue b/packages/frontend/src/ui/visitor.vue
index 7d8677e3be78..9a191991f779 100644
--- a/packages/frontend/src/ui/visitor.vue
+++ b/packages/frontend/src/ui/visitor.vue
@@ -16,12 +16,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div class="main">
 		<div v-if="!isRoot" class="header">
-			<div v-if="narrow === false" class="wide">
+			<!-- <div v-if="narrow === false" class="wide">
 				<MkA to="/" class="link" activeClass="active"><i class="ti ti-home icon"></i> {{ i18n.ts.home }}</MkA>
 				<MkA v-if="isTimelineAvailable" to="/timeline" class="link" activeClass="active"><i class="ti ti-message icon"></i> {{ i18n.ts.timeline }}</MkA>
 				<MkA to="/explore" class="link" activeClass="active"><i class="ti ti-hash icon"></i> {{ i18n.ts.explore }}</MkA>
 				<MkA to="/channels" class="link" activeClass="active"><i class="ti ti-device-tv icon"></i> {{ i18n.ts.channel }}</MkA>
-			</div>
+			</div> -->
 			<div v-else-if="narrow === true" class="narrow">
 				<button class="menu _button" @click="showMenu = true">
 					<i class="ti ti-menu-2 icon"></i>
@@ -50,14 +50,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<Transition :name="'tray'">
 		<div v-if="showMenu" class="menu">
 			<MkA to="/" class="link" activeClass="active"><i class="ti ti-home icon"></i>{{ i18n.ts.home }}</MkA>
-			<MkA v-if="isTimelineAvailable" to="/timeline" class="link" activeClass="active"><i class="ti ti-message icon"></i>{{ i18n.ts.timeline }}</MkA>
+			<!-- <MkA v-if="isTimelineAvailable" to="/timeline" class="link" activeClass="active"><i class="ti ti-message icon"></i>{{ i18n.ts.timeline }}</MkA>
 			<MkA to="/explore" class="link" activeClass="active"><i class="ti ti-hash icon"></i>{{ i18n.ts.explore }}</MkA>
 			<MkA to="/announcements" class="link" activeClass="active"><i class="ti ti-speakerphone icon"></i>{{ i18n.ts.announcements }}</MkA>
 			<MkA to="/channels" class="link" activeClass="active"><i class="ti ti-device-tv icon"></i>{{ i18n.ts.channel }}</MkA>
 			<div class="divider"></div>
 			<MkA to="/pages" class="link" activeClass="active"><i class="ti ti-news icon"></i>{{ i18n.ts.pages }}</MkA>
 			<MkA to="/play" class="link" activeClass="active"><i class="ti ti-player-play icon"></i>Play</MkA>
-			<MkA to="/gallery" class="link" activeClass="active"><i class="ti ti-icons icon"></i>{{ i18n.ts.gallery }}</MkA>
+			<MkA to="/gallery" class="link" activeClass="active"><i class="ti ti-icons icon"></i>{{ i18n.ts.gallery }}</MkA> -->
 			<div class="action">
 				<button class="_buttonPrimary" @click="signup()">{{ i18n.ts.signup }}</button>
 				<button class="_button" @click="signin()">{{ i18n.ts.login }}</button>

From d1be05c2ea6a8df294e103dd8069f0d429b2631e Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 04:14:05 +0900
Subject: [PATCH 04/43] adjustments

---
 packages/frontend/src/ui/visitor.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/ui/visitor.vue b/packages/frontend/src/ui/visitor.vue
index 9a191991f779..eb1fa0dd1f61 100644
--- a/packages/frontend/src/ui/visitor.vue
+++ b/packages/frontend/src/ui/visitor.vue
@@ -16,12 +16,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div class="main">
 		<div v-if="!isRoot" class="header">
-			<!-- <div v-if="narrow === false" class="wide">
-				<MkA to="/" class="link" activeClass="active"><i class="ti ti-home icon"></i> {{ i18n.ts.home }}</MkA>
+			<div v-if="narrow === false" class="wide">
+				<!-- <MkA to="/" class="link" activeClass="active"><i class="ti ti-home icon"></i> {{ i18n.ts.home }}</MkA>
 				<MkA v-if="isTimelineAvailable" to="/timeline" class="link" activeClass="active"><i class="ti ti-message icon"></i> {{ i18n.ts.timeline }}</MkA>
 				<MkA to="/explore" class="link" activeClass="active"><i class="ti ti-hash icon"></i> {{ i18n.ts.explore }}</MkA>
-				<MkA to="/channels" class="link" activeClass="active"><i class="ti ti-device-tv icon"></i> {{ i18n.ts.channel }}</MkA>
-			</div> -->
+				<MkA to="/channels" class="link" activeClass="active"><i class="ti ti-device-tv icon"></i> {{ i18n.ts.channel }}</MkA> -->
+			</div>
 			<div v-else-if="narrow === true" class="narrow">
 				<button class="menu _button" @click="showMenu = true">
 					<i class="ti ti-menu-2 icon"></i>

From 73fc11a05b9ee559d3c3ed2badbd2932354781a1 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 04:37:19 +0900
Subject: [PATCH 05/43] update reg name

---
 .github/workflows/docker.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
index db899ba386be..9900540379ad 100644
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -6,7 +6,7 @@ on:
   workflow_dispatch:
 
 env:
-  REGISTRY_IMAGE: misskey/misskey
+  REGISTRY_IMAGE: pernucia/pern-custom-misskey
   TAGS: |
     type=edge
     type=ref,event=pr

From 78f97fc9576b03c85e30a6c20a7e604bd0028f8c Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 14:15:13 +0900
Subject: [PATCH 06/43] add widget

---
 packages/frontend/src/pages/about.vue         |  2 +-
 .../frontend/src/pages/welcome.entrance.a.vue |  8 +--
 packages/frontend/src/ui/_common_/common.ts   |  3 +-
 .../frontend/src/widgets/WidgetPaplin.vue     | 64 +++++++++++++++++++
 packages/frontend/src/widgets/index.ts        |  2 +
 5 files changed, 73 insertions(+), 6 deletions(-)
 create mode 100644 packages/frontend/src/widgets/WidgetPaplin.vue

diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index 352599904940..e136196e66d1 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -31,7 +31,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 
 const XOverview = defineAsyncComponent(() => import('@/pages/about.overview.vue'));
-// const XEmojis = defineAsyncComponent(() => import('@/pages/about.emojis.vue'));
+const XEmojis = defineAsyncComponent(() => import('@/pages/about.emojis.vue'));
 const XFederation = defineAsyncComponent(() => import('@/pages/about.federation.vue'));
 const MkInstanceStats = defineAsyncComponent(() => import('@/components/MkInstanceStats.vue'));
 
diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index f6823b875e8a..e18a25ad9fa1 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -20,13 +20,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkEmoji :normal="true" :noStyle="true" emoji="🎉"/>
 		<MkEmoji :normal="true" :noStyle="true" emoji="🍮"/>
 	</div>
-	<div class="contents">
+	<!-- <div class="contents">
 		<MkVisitorDashboard/>
-	</div>
+	</div> -->
 	<div v-if="instances && instances.length > 0" class="federation">
 		<MarqueeText :duration="40">
 			<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
-				<!--<MkInstanceCardMini :instance="instance"/>-->
+				<MkInstanceCardMini :instance="instance"/>
 				<img v-if="instance.iconUrl" class="icon" :src="getInstanceIcon(instance)" alt=""/>
 				<span class="name _monospace">{{ instance.host }}</span>
 			</MkA>
@@ -38,7 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
-// import XTimeline from './welcome.timeline.vue';
+import XTimeline from './welcome.timeline.vue';
 import MarqueeText from '@/components/MkMarquee.vue';
 import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
 import misskeysvg from '/client-assets/misskey.svg';
diff --git a/packages/frontend/src/ui/_common_/common.ts b/packages/frontend/src/ui/_common_/common.ts
index 4a51a9ce08ef..9b0425eafb0d 100644
--- a/packages/frontend/src/ui/_common_/common.ts
+++ b/packages/frontend/src/ui/_common_/common.ts
@@ -68,7 +68,8 @@ export function openInstanceMenu(ev: MouseEvent) {
 		text: i18n.ts.charts,
 		icon: 'ti ti-chart-line',
 		to: '/about#charts',
-	}, { type: 'divider' }, 
+	}, { type: 'divider' }
+	// , 
 	// {
 	// 	type: 'link',
 	// 	text: i18n.ts.ads,
diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
new file mode 100644
index 000000000000..f7b166749b90
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -0,0 +1,64 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkContainer :naked="widgetProps.transparent" :showHeader="false" class="mkw-paplin">
+	<img :class="transition" src="https://pub-61d9927ea6b24ad7b33e1db00f6950bf.r2.dev/misskey/files/thumbnail-fa9d86ac-a94b-4226-9712-f2c687c49f74.webp" @click="OnClick" v-bind:style="{transform: `rotate(${deg}deg)`}" alt="refresh-icon-btn" />
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, shallowRef } from 'vue';
+import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
+import { GetFormResultType } from '@/scripts/form.js';
+
+const name = 'paplin';
+
+const deg = 0;
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+const props = defineProps<WidgetComponentProps<WidgetProps>>();
+const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const OnClick = () => {
+	this.deg += 360;
+	//if (this.live2d) this.live2d.changeExpression('gurugurume');
+};
+
+onMounted(() => {
+	window.addEventListener('mousemove', onMousemove, { passive: true });
+});
+
+onUnmounted(() => {
+	window.removeEventListener('mousemove', onMousemove);
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	width: 100%;
+	height: 350px;
+	border: none;
+	pointer-events: none;
+	color-scheme: light;
+}
+.transition {
+	transition: transform 1s ease-in-out;
+}
+</style>
diff --git a/packages/frontend/src/widgets/index.ts b/packages/frontend/src/widgets/index.ts
index e269fcf9eb89..8250f666b612 100644
--- a/packages/frontend/src/widgets/index.ts
+++ b/packages/frontend/src/widgets/index.ts
@@ -34,6 +34,7 @@ export default function(app: App) {
 	app.component('WidgetUserList', defineAsyncComponent(() => import('./WidgetUserList.vue')));
 	app.component('WidgetClicker', defineAsyncComponent(() => import('./WidgetClicker.vue')));
 	app.component('WidgetBirthdayFollowings', defineAsyncComponent(() => import('./WidgetBirthdayFollowings.vue')));
+	app.component('WidgetPaplin', defineAsyncComponent(() => import('./WidgetPaplin.vue')));
 }
 
 export const widgets = [
@@ -65,4 +66,5 @@ export const widgets = [
 	'userList',
 	'clicker',
 	'birthdayFollowings',
+	'WidgetPaplin',
 ];

From 35a2cde0422238834d026ef9ef86a6bd6d2a87da Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 14:39:07 +0900
Subject: [PATCH 07/43] update widget name

why does it not appear??
---
 locales/ko-KR.yml                      | 1 +
 packages/frontend/src/widgets/index.ts | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/locales/ko-KR.yml b/locales/ko-KR.yml
index 5d07ebe24466..c4299f452aee 100644
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@@ -2222,6 +2222,7 @@ _widgets:
   aiscriptApp: "AiScript 앱"
   aichan: "아이"
   userList: "유저 리스트"
+  paplin: "페이프린"
   _userList:
     chooseList: "리스트 선택"
   clicker: "클리커"
diff --git a/packages/frontend/src/widgets/index.ts b/packages/frontend/src/widgets/index.ts
index 8250f666b612..9ac00465dbb7 100644
--- a/packages/frontend/src/widgets/index.ts
+++ b/packages/frontend/src/widgets/index.ts
@@ -66,5 +66,5 @@ export const widgets = [
 	'userList',
 	'clicker',
 	'birthdayFollowings',
-	'WidgetPaplin',
+	'paplin',
 ];

From bb8aabbaf5f6acf07344d5954386354ecdd97ea6 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 15:43:15 +0900
Subject: [PATCH 08/43] edit on widget

try again
---
 .../frontend/src/widgets/WidgetPaplin.vue     | 42 +++++++++++--------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
index f7b166749b90..ece0e9dfd136 100644
--- a/packages/frontend/src/widgets/WidgetPaplin.vue
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -4,8 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkContainer :naked="widgetProps.transparent" :showHeader="false" class="mkw-paplin">
-	<img :class="transition" src="https://pub-61d9927ea6b24ad7b33e1db00f6950bf.r2.dev/misskey/files/thumbnail-fa9d86ac-a94b-4226-9712-f2c687c49f74.webp" @click="OnClick" v-bind:style="{transform: `rotate(${deg}deg)`}" alt="refresh-icon-btn" />
+<MkContainer :naked="widgetProps.transparent" :showHeader="false" class="root">
+	<div ref="paplin" class="paplin" @click="rotation" v-bind:style="{transform: `rotate(${deg}deg)`}"></div>
 </MkContainer>
 </template>
 
@@ -13,10 +13,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { onMounted, onUnmounted, shallowRef } from 'vue';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
+import { i18n } from '@/i18n.js';
 
-const name = 'paplin';
-
-const deg = 0;
+const name = i18n.ts._widgets.paplin;
 
 const widgetPropsDef = {
 	transparent: {
@@ -26,28 +25,27 @@ const widgetPropsDef = {
 };
 
 type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
+	
 const props = defineProps<WidgetComponentProps<WidgetProps>>();
 const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-
+	
 const { widgetProps, configure } = useWidgetPropsManager(name,
 	widgetPropsDef,
 	props,
 	emit,
 );
+		
+const paplin = shallowRef<HTMLElement>();
+const img = `url(https://pub-61d9927ea6b24ad7b33e1db00f6950bf.r2.dev/misskey/files/thumbnail-fa9d86ac-a94b-4226-9712-f2c687c49f74.webp)`;
+let deg = 0;
 
-const OnClick = () => {
-	this.deg += 360;
-	//if (this.live2d) this.live2d.changeExpression('gurugurume');
+const onMounted = () => {
+	paplin.style.backgroundImage = img;
 };
 
-onMounted(() => {
-	window.addEventListener('mousemove', onMousemove, { passive: true });
-});
-
-onUnmounted(() => {
-	window.removeEventListener('mousemove', onMousemove);
-});
+const rotation = () => {
+	deg += 360;
+};
 </script>
 
 <style lang="scss" module>
@@ -57,6 +55,16 @@ onUnmounted(() => {
 	border: none;
 	pointer-events: none;
 	color-scheme: light;
+
+	> paplin {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-size: cover;
+		background-position: center;
+	};
 }
 .transition {
 	transition: transform 1s ease-in-out;

From e73edc49c65496bfd04a26563d281ed7485bc886 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 17:28:11 +0900
Subject: [PATCH 09/43] redo welcome page

---
 packages/frontend/src/pages/welcome.entrance.a.vue |  6 +++---
 packages/frontend/src/widgets/WidgetPaplin.vue     | 10 ++++------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index e18a25ad9fa1..e112324683f6 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -20,13 +20,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkEmoji :normal="true" :noStyle="true" emoji="🎉"/>
 		<MkEmoji :normal="true" :noStyle="true" emoji="🍮"/>
 	</div>
-	<!-- <div class="contents">
+	<div class="contents">
 		<MkVisitorDashboard/>
-	</div> -->
+	</div>
 	<div v-if="instances && instances.length > 0" class="federation">
 		<MarqueeText :duration="40">
 			<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
-				<MkInstanceCardMini :instance="instance"/>
+				<!-- <MkInstanceCardMini :instance="instance"/> -->
 				<img v-if="instance.iconUrl" class="icon" :src="getInstanceIcon(instance)" alt=""/>
 				<span class="name _monospace">{{ instance.host }}</span>
 			</MkA>
diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
index ece0e9dfd136..52b2371e9266 100644
--- a/packages/frontend/src/widgets/WidgetPaplin.vue
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -4,13 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkContainer :naked="widgetProps.transparent" :showHeader="false" class="root">
+<MkContainer :class="[$style.root, { _panel: !widgetProps.transparent, [$style.pad]: !widgetProps.transparent }]">
 	<div ref="paplin" class="paplin" @click="rotation" v-bind:style="{transform: `rotate(${deg}deg)`}"></div>
 </MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, shallowRef } from 'vue';
+import { ref, shallowRef } from 'vue';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import { i18n } from '@/i18n.js';
@@ -37,11 +37,9 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 		
 const paplin = shallowRef<HTMLElement>();
 const img = `url(https://pub-61d9927ea6b24ad7b33e1db00f6950bf.r2.dev/misskey/files/thumbnail-fa9d86ac-a94b-4226-9712-f2c687c49f74.webp)`;
-let deg = 0;
+const deg = ref(0)
 
-const onMounted = () => {
-	paplin.style.backgroundImage = img;
-};
+paplin.style.backgroundImage = img;
 
 const rotation = () => {
 	deg += 360;

From f04cbfd3104c879eeebcd01e0a12c1ebbd1f2844 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 19:18:12 +0900
Subject: [PATCH 10/43] revert

---
 .../frontend/src/widgets/WidgetPaplin.vue     | 70 -------------------
 packages/frontend/src/widgets/index.ts        |  2 -
 2 files changed, 72 deletions(-)
 delete mode 100644 packages/frontend/src/widgets/WidgetPaplin.vue

diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
deleted file mode 100644
index 52b2371e9266..000000000000
--- a/packages/frontend/src/widgets/WidgetPaplin.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<MkContainer :class="[$style.root, { _panel: !widgetProps.transparent, [$style.pad]: !widgetProps.transparent }]">
-	<div ref="paplin" class="paplin" @click="rotation" v-bind:style="{transform: `rotate(${deg}deg)`}"></div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { ref, shallowRef } from 'vue';
-import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
-import { GetFormResultType } from '@/scripts/form.js';
-import { i18n } from '@/i18n.js';
-
-const name = i18n.ts._widgets.paplin;
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-	
-const props = defineProps<WidgetComponentProps<WidgetProps>>();
-const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-	
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-		
-const paplin = shallowRef<HTMLElement>();
-const img = `url(https://pub-61d9927ea6b24ad7b33e1db00f6950bf.r2.dev/misskey/files/thumbnail-fa9d86ac-a94b-4226-9712-f2c687c49f74.webp)`;
-const deg = ref(0)
-
-paplin.style.backgroundImage = img;
-
-const rotation = () => {
-	deg += 360;
-};
-</script>
-
-<style lang="scss" module>
-.root {
-	width: 100%;
-	height: 350px;
-	border: none;
-	pointer-events: none;
-	color-scheme: light;
-
-	> paplin {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-size: cover;
-		background-position: center;
-	};
-}
-.transition {
-	transition: transform 1s ease-in-out;
-}
-</style>
diff --git a/packages/frontend/src/widgets/index.ts b/packages/frontend/src/widgets/index.ts
index 9ac00465dbb7..e269fcf9eb89 100644
--- a/packages/frontend/src/widgets/index.ts
+++ b/packages/frontend/src/widgets/index.ts
@@ -34,7 +34,6 @@ export default function(app: App) {
 	app.component('WidgetUserList', defineAsyncComponent(() => import('./WidgetUserList.vue')));
 	app.component('WidgetClicker', defineAsyncComponent(() => import('./WidgetClicker.vue')));
 	app.component('WidgetBirthdayFollowings', defineAsyncComponent(() => import('./WidgetBirthdayFollowings.vue')));
-	app.component('WidgetPaplin', defineAsyncComponent(() => import('./WidgetPaplin.vue')));
 }
 
 export const widgets = [
@@ -66,5 +65,4 @@ export const widgets = [
 	'userList',
 	'clicker',
 	'birthdayFollowings',
-	'paplin',
 ];

From beca8920846887db4510730347bb5ba523985b14 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 19:23:37 +0900
Subject: [PATCH 11/43] Revert "revert"

This reverts commit f04cbfd3104c879eeebcd01e0a12c1ebbd1f2844.
---
 .../frontend/src/widgets/WidgetPaplin.vue     | 70 +++++++++++++++++++
 packages/frontend/src/widgets/index.ts        |  2 +
 2 files changed, 72 insertions(+)
 create mode 100644 packages/frontend/src/widgets/WidgetPaplin.vue

diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
new file mode 100644
index 000000000000..52b2371e9266
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -0,0 +1,70 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkContainer :class="[$style.root, { _panel: !widgetProps.transparent, [$style.pad]: !widgetProps.transparent }]">
+	<div ref="paplin" class="paplin" @click="rotation" v-bind:style="{transform: `rotate(${deg}deg)`}"></div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, shallowRef } from 'vue';
+import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
+import { GetFormResultType } from '@/scripts/form.js';
+import { i18n } from '@/i18n.js';
+
+const name = i18n.ts._widgets.paplin;
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+	
+const props = defineProps<WidgetComponentProps<WidgetProps>>();
+const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+	
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+		
+const paplin = shallowRef<HTMLElement>();
+const img = `url(https://pub-61d9927ea6b24ad7b33e1db00f6950bf.r2.dev/misskey/files/thumbnail-fa9d86ac-a94b-4226-9712-f2c687c49f74.webp)`;
+const deg = ref(0)
+
+paplin.style.backgroundImage = img;
+
+const rotation = () => {
+	deg += 360;
+};
+</script>
+
+<style lang="scss" module>
+.root {
+	width: 100%;
+	height: 350px;
+	border: none;
+	pointer-events: none;
+	color-scheme: light;
+
+	> paplin {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-size: cover;
+		background-position: center;
+	};
+}
+.transition {
+	transition: transform 1s ease-in-out;
+}
+</style>
diff --git a/packages/frontend/src/widgets/index.ts b/packages/frontend/src/widgets/index.ts
index e269fcf9eb89..9ac00465dbb7 100644
--- a/packages/frontend/src/widgets/index.ts
+++ b/packages/frontend/src/widgets/index.ts
@@ -34,6 +34,7 @@ export default function(app: App) {
 	app.component('WidgetUserList', defineAsyncComponent(() => import('./WidgetUserList.vue')));
 	app.component('WidgetClicker', defineAsyncComponent(() => import('./WidgetClicker.vue')));
 	app.component('WidgetBirthdayFollowings', defineAsyncComponent(() => import('./WidgetBirthdayFollowings.vue')));
+	app.component('WidgetPaplin', defineAsyncComponent(() => import('./WidgetPaplin.vue')));
 }
 
 export const widgets = [
@@ -65,4 +66,5 @@ export const widgets = [
 	'userList',
 	'clicker',
 	'birthdayFollowings',
+	'paplin',
 ];

From 5df9c45fcc8bd9c43c9a8a32bc0caec7952f8db9 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 21:04:50 +0900
Subject: [PATCH 12/43] Update WidgetPaplin.vue

---
 .../frontend/src/widgets/WidgetPaplin.vue     | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
index 52b2371e9266..7f98d50c703b 100644
--- a/packages/frontend/src/widgets/WidgetPaplin.vue
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -4,13 +4,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkContainer :class="[$style.root, { _panel: !widgetProps.transparent, [$style.pad]: !widgetProps.transparent }]">
-	<div ref="paplin" class="paplin" @click="rotation" v-bind:style="{transform: `rotate(${deg}deg)`}"></div>
+<MkContainer :showHeader="widgetProps.showHeader" data-cy-mkw-paplin class="mkw-paplin">
+	<template #header>{{ i18n.ts._widgets.paplin }}</template>
+
+	<div ref="paplin" class="paplin" @click="rotation" :style="style">
+		<img src="https://pub-61d9927ea6b24ad7b33e1db00f6950bf.r2.dev/misskey/files/thumbnail-516fe5e1-88e2-4cc7-9b43-e1a3cbd7ced9.webp" />
+	</div>
 </MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, shallowRef } from 'vue';
+import { ref, reactive } from 'vue';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import { i18n } from '@/i18n.js';
@@ -34,16 +38,18 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 	props,
 	emit,
 );
-		
-const paplin = shallowRef<HTMLElement>();
-const img = `url(https://pub-61d9927ea6b24ad7b33e1db00f6950bf.r2.dev/misskey/files/thumbnail-fa9d86ac-a94b-4226-9712-f2c687c49f74.webp)`;
-const deg = ref(0)
 
-paplin.style.backgroundImage = img;
+const style = reactive({});
 
 const rotation = () => {
-	deg += 360;
+	style.transform = `rotate(360deg)`
 };
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
 </script>
 
 <style lang="scss" module>

From 4de4b6e75007f4333eea1e615a653c145a2dc00d Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 21:21:54 +0900
Subject: [PATCH 13/43] Update WidgetPaplin.vue

---
 packages/frontend/src/widgets/WidgetPaplin.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
index 7f98d50c703b..02ac7d065fec 100644
--- a/packages/frontend/src/widgets/WidgetPaplin.vue
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -22,9 +22,13 @@ import { i18n } from '@/i18n.js';
 const name = i18n.ts._widgets.paplin;
 
 const widgetPropsDef = {
-	transparent: {
+	showHeader: {
 		type: 'boolean' as const,
-		default: false,
+		default: true,
+	},
+	height: {
+		type: 'number' as const,
+		default: 100,
 	},
 };
 
@@ -40,9 +44,11 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 );
 
 const style = reactive({});
+const deg = ref(0);
 
 const rotation = () => {
-	style.transform = `rotate(360deg)`
+	deg.deg += 360;
+	style.transform = `rotate(${deg.deg}deg)`
 };
 
 defineExpose<WidgetComponentExpose>({

From 98403967e7e710240e9ec6b5c2e7cbf437af1b78 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 21:48:20 +0900
Subject: [PATCH 14/43] Update WidgetPaplin.vue

---
 packages/frontend/src/widgets/WidgetPaplin.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
index 02ac7d065fec..51359e37ff0e 100644
--- a/packages/frontend/src/widgets/WidgetPaplin.vue
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -47,6 +47,9 @@ const style = reactive({});
 const deg = ref(0);
 
 const rotation = () => {
+	if (isNaN(deg.deg)) {
+		deg.deg = 0
+	}
 	deg.deg += 360;
 	style.transform = `rotate(${deg.deg}deg)`
 };

From 52136a98b6c6326b3629f8272f35f6d8116908f5 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 21:56:37 +0900
Subject: [PATCH 15/43] go spin go

---
 packages/frontend/src/widgets/WidgetPaplin.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
index 51359e37ff0e..a2c8fd32f9d9 100644
--- a/packages/frontend/src/widgets/WidgetPaplin.vue
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkContainer :showHeader="widgetProps.showHeader" data-cy-mkw-paplin class="mkw-paplin">
 	<template #header>{{ i18n.ts._widgets.paplin }}</template>
 
-	<div ref="paplin" class="paplin" @click="rotation" :style="style">
+	<div ref="paplin" class="paplin transition" @click="rotation" :style="style">
 		<img src="https://pub-61d9927ea6b24ad7b33e1db00f6950bf.r2.dev/misskey/files/thumbnail-516fe5e1-88e2-4cc7-9b43-e1a3cbd7ced9.webp" />
 	</div>
 </MkContainer>
@@ -78,8 +78,9 @@ defineExpose<WidgetComponentExpose>({
 		background-size: cover;
 		background-position: center;
 	};
-}
-.transition {
-	transition: transform 1s ease-in-out;
+	
+	> transition {
+		transition: transform 1s ease-in-out;
+	};
 }
 </style>

From 3d89bd2af7e902635c22c72e4cf29d7c3373d0a9 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 22:12:00 +0900
Subject: [PATCH 16/43] update css

---
 packages/frontend/src/widgets/WidgetPaplin.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
index a2c8fd32f9d9..d9db6f79d4f4 100644
--- a/packages/frontend/src/widgets/WidgetPaplin.vue
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -69,7 +69,7 @@ defineExpose<WidgetComponentExpose>({
 	pointer-events: none;
 	color-scheme: light;
 
-	> paplin {
+	> .paplin {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -78,8 +78,8 @@ defineExpose<WidgetComponentExpose>({
 		background-size: cover;
 		background-position: center;
 	};
-	
-	> transition {
+
+	> .transition {
 		transition: transform 1s ease-in-out;
 	};
 }

From 223bbce546d5d065eaa7a79ddcba68ece1a85d06 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 22:22:13 +0900
Subject: [PATCH 17/43] surly spin

---
 packages/frontend/src/widgets/WidgetPaplin.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
index d9db6f79d4f4..1062794897fb 100644
--- a/packages/frontend/src/widgets/WidgetPaplin.vue
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -48,7 +48,8 @@ const deg = ref(0);
 
 const rotation = () => {
 	if (isNaN(deg.deg)) {
-		deg.deg = 0
+		deg.deg = 0;
+		style.transition = 'transform 0.8s ease-in-out';
 	}
 	deg.deg += 360;
 	style.transform = `rotate(${deg.deg}deg)`
@@ -78,9 +79,5 @@ defineExpose<WidgetComponentExpose>({
 		background-size: cover;
 		background-position: center;
 	};
-
-	> .transition {
-		transition: transform 1s ease-in-out;
-	};
 }
 </style>

From 56e3272612022441b09a8d241d45f57b5011fc3e Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 22:38:07 +0900
Subject: [PATCH 18/43] translation added

---
 locales/ja-JP.yml | 1 +
 locales/ko-KR.yml | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 9f32969a79c3..c6b55ef3de05 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2274,6 +2274,7 @@ _widgets:
     chooseList: "リストを選択"
   clicker: "クリッカー"
   birthdayFollowings: "今日誕生日のユーザー"
+  paplin: "paplin"
 
 _cw:
   hide: "隠す"
diff --git a/locales/ko-KR.yml b/locales/ko-KR.yml
index c4299f452aee..ac9dda43b9e9 100644
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@@ -2222,11 +2222,11 @@ _widgets:
   aiscriptApp: "AiScript 앱"
   aichan: "아이"
   userList: "유저 리스트"
-  paplin: "페이프린"
   _userList:
     chooseList: "리스트 선택"
   clicker: "클리커"
   birthdayFollowings: "오늘이 생일인 사용자"
+  paplin: "페이프린"
 _cw:
   hide: "숨기기"
   show: "더 보기"

From cc920d9bd6cdca63703c82ba59fc7fb031798708 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Sun, 17 Nov 2024 22:56:16 +0900
Subject: [PATCH 19/43] finding how to add widget name

---
 locales/index.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 24613419ce8b..5abbcbd08164 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -8656,6 +8656,7 @@ export interface Locale extends ILocale {
          * 今日誕生日のユーザー
          */
         "birthdayFollowings": string;
+        "paplin": string;
     };
     "_cw": {
         /**

From a6b0c79875f71f346c3c5982bef19abfdf2b2335 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Mon, 18 Nov 2024 18:03:58 +0900
Subject: [PATCH 20/43] edit localization

---
 locales/index.d.ts | 1 -
 locales/ja-JP.yml  | 2 +-
 locales/ko-KR.yml  | 1 -
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 5abbcbd08164..24613419ce8b 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -8656,7 +8656,6 @@ export interface Locale extends ILocale {
          * 今日誕生日のユーザー
          */
         "birthdayFollowings": string;
-        "paplin": string;
     };
     "_cw": {
         /**
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c6b55ef3de05..b58832ee3aff 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2274,7 +2274,7 @@ _widgets:
     chooseList: "リストを選択"
   clicker: "クリッカー"
   birthdayFollowings: "今日誕生日のユーザー"
-  paplin: "paplin"
+  paplin: "Papline"
 
 _cw:
   hide: "隠す"
diff --git a/locales/ko-KR.yml b/locales/ko-KR.yml
index ac9dda43b9e9..5d07ebe24466 100644
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@@ -2226,7 +2226,6 @@ _widgets:
     chooseList: "리스트 선택"
   clicker: "클리커"
   birthdayFollowings: "오늘이 생일인 사용자"
-  paplin: "페이프린"
 _cw:
   hide: "숨기기"
   show: "더 보기"

From 194e76695af3ede1a4aec60e451b12409c55b9c5 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Mon, 18 Nov 2024 19:52:40 +0900
Subject: [PATCH 21/43] disable time line

---
 packages/frontend/src/pages/welcome.entrance.a.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index e112324683f6..38d6b1aa0a95 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div v-if="meta" class="rsqzvsbo">
 	<MkFeaturedPhotos class="bg"/>
-	<XTimeline class="tl"/>
+	<!-- <XTimeline class="tl"/> -->
 	<div class="shape1"></div>
 	<div class="shape2"></div>
 	<div class="logo-wrapper">

From 75d7e7ae428c30b1d1e9aaed94b1c1cbaf8a2510 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Tue, 19 Nov 2024 00:58:21 +0900
Subject: [PATCH 22/43] replace img link

---
 packages/frontend/src/pages/welcome.entrance.a.vue | 2 +-
 packages/frontend/src/widgets/WidgetPaplin.vue     | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index 38d6b1aa0a95..5a8283b828da 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div v-if="instances && instances.length > 0" class="federation">
 		<MarqueeText :duration="40">
 			<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
-				<!-- <MkInstanceCardMini :instance="instance"/> -->
+				<MkInstanceCardMini :instance="instance"/>
 				<img v-if="instance.iconUrl" class="icon" :src="getInstanceIcon(instance)" alt=""/>
 				<span class="name _monospace">{{ instance.host }}</span>
 			</MkA>
diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
index 1062794897fb..44b51cda4d5e 100644
--- a/packages/frontend/src/widgets/WidgetPaplin.vue
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkContainer :showHeader="widgetProps.showHeader" data-cy-mkw-paplin class="mkw-paplin">
-	<template #header>{{ i18n.ts._widgets.paplin }}</template>
+	<template #header>paplin</template>
 
 	<div ref="paplin" class="paplin transition" @click="rotation" :style="style">
-		<img src="https://pub-61d9927ea6b24ad7b33e1db00f6950bf.r2.dev/misskey/files/thumbnail-516fe5e1-88e2-4cc7-9b43-e1a3cbd7ced9.webp" />
+		<img src="https://pub-61d9927ea6b24ad7b33e1db00f6950bf.r2.dev/misskey/files/thumbnail-60fd8592-2cad-4306-8ad9-c36243278e5f.webp" />
 	</div>
 </MkContainer>
 </template>
@@ -17,9 +17,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref, reactive } from 'vue';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
-import { i18n } from '@/i18n.js';
 
-const name = i18n.ts._widgets.paplin;
+const name = 'paplin';
 
 const widgetPropsDef = {
 	showHeader: {
@@ -28,7 +27,7 @@ const widgetPropsDef = {
 	},
 	height: {
 		type: 'number' as const,
-		default: 100,
+		default: 350,
 	},
 };
 

From fa359b56d0fd6e53ae450690c152c97c3ffe831b Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Tue, 19 Nov 2024 03:30:00 +0900
Subject: [PATCH 23/43] Update MkWidgets.vue

---
 packages/frontend/src/components/MkWidgets.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkWidgets.vue b/packages/frontend/src/components/MkWidgets.vue
index ba619f606314..ecd598f06576 100644
--- a/packages/frontend/src/components/MkWidgets.vue
+++ b/packages/frontend/src/components/MkWidgets.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<header :class="$style.editHeader">
 			<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--MI-margin)" data-cy-widget-select>
 				<template #label>{{ i18n.ts.selectWidget }}</template>
-				<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.ts._widgets[widget] }}</option>
+				<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.ts._widgets[widget] || widget }}</option>
 			</MkSelect>
 			<MkButton inline primary data-cy-widget-add @click="addWidget"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 			<MkButton inline @click="emit('exit')">{{ i18n.ts.close }}</MkButton>

From 4db5725d39f24ec7b93547f8d5ecb5d45920f0f6 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Tue, 19 Nov 2024 04:40:09 +0900
Subject: [PATCH 24/43] re-edit following lint

---
 packages/frontend/src/widgets/WidgetPaplin.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
index 44b51cda4d5e..ad30d18c9352 100644
--- a/packages/frontend/src/widgets/WidgetPaplin.vue
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkContainer :showHeader="widgetProps.showHeader" data-cy-mkw-paplin class="mkw-paplin">
 	<template #header>paplin</template>
 
-	<div ref="paplin" class="paplin transition" @click="rotation" :style="style">
+	<div ref="paplin" class="paplin transition" :style="style" @click="rotation">
 		<img src="https://pub-61d9927ea6b24ad7b33e1db00f6950bf.r2.dev/misskey/files/thumbnail-60fd8592-2cad-4306-8ad9-c36243278e5f.webp" />
 	</div>
 </MkContainer>
@@ -46,12 +46,12 @@ const style = reactive({});
 const deg = ref(0);
 
 const rotation = () => {
-	if (isNaN(deg.deg)) {
-		deg.deg = 0;
+	if (isNaN(deg.value)) {
+		deg.value = 0;
 		style.transition = 'transform 0.8s ease-in-out';
 	}
-	deg.deg += 360;
-	style.transform = `rotate(${deg.deg}deg)`
+	deg.value += 360;
+	style.transform = `rotate(${deg.value}deg)`
 };
 
 defineExpose<WidgetComponentExpose>({

From 1f2d6777c04513149b8d9da58e18f12b02c923c1 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Tue, 19 Nov 2024 04:45:30 +0900
Subject: [PATCH 25/43] it wasn't saved

---
 packages/frontend/src/widgets/WidgetPaplin.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
index ad30d18c9352..a9f6ecae8784 100644
--- a/packages/frontend/src/widgets/WidgetPaplin.vue
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -51,7 +51,7 @@ const rotation = () => {
 		style.transition = 'transform 0.8s ease-in-out';
 	}
 	deg.value += 360;
-	style.transform = `rotate(${deg.value}deg)`
+	style.transform = `rotate(${deg.value}deg)`;
 };
 
 defineExpose<WidgetComponentExpose>({

From 915ebaa86beacd6c3dc5231bc50b147789792d4e Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Tue, 19 Nov 2024 04:57:45 +0900
Subject: [PATCH 26/43] correct style input

---
 packages/frontend/src/widgets/WidgetPaplin.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
index a9f6ecae8784..d7bbbb121d56 100644
--- a/packages/frontend/src/widgets/WidgetPaplin.vue
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -42,13 +42,14 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 	emit,
 );
 
-const style = reactive({});
+const style = reactive({
+	transition = 'transform 0.8s ease-in-out';
+});
 const deg = ref(0);
 
 const rotation = () => {
 	if (isNaN(deg.value)) {
 		deg.value = 0;
-		style.transition = 'transform 0.8s ease-in-out';
 	}
 	deg.value += 360;
 	style.transform = `rotate(${deg.value}deg)`;

From b484380e14d37986893c6f86b3e17bb4ccd63b68 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Tue, 19 Nov 2024 04:59:31 +0900
Subject: [PATCH 27/43] Update WidgetPaplin.vue

---
 packages/frontend/src/widgets/WidgetPaplin.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
index d7bbbb121d56..6ac2ee2faed3 100644
--- a/packages/frontend/src/widgets/WidgetPaplin.vue
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -43,7 +43,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 );
 
 const style = reactive({
-	transition = 'transform 0.8s ease-in-out';
+	transition = 'transform 0.8s ease-in-out',
 });
 const deg = ref(0);
 

From 8830ba80ba90d87e443b7dbc585fcb54f2e2fabf Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Tue, 19 Nov 2024 05:01:47 +0900
Subject: [PATCH 28/43] Update WidgetPaplin.vue

---
 packages/frontend/src/widgets/WidgetPaplin.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
index 6ac2ee2faed3..4607ae56c951 100644
--- a/packages/frontend/src/widgets/WidgetPaplin.vue
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -43,7 +43,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 );
 
 const style = reactive({
-	transition = 'transform 0.8s ease-in-out',
+	transition: 'transform 0.8s ease-in-out',
 });
 const deg = ref(0);
 

From ea41de693da025a40c563c3b6f8063f753d1b5ea Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Wed, 20 Nov 2024 14:31:04 +0900
Subject: [PATCH 29/43] added widgets

---
 .../frontend/src/widgets/WidgetKordle.vue     | 52 +++++++++++
 .../frontend/src/widgets/WidgetSpinner.vue    | 86 +++++++++++++++++++
 packages/frontend/src/widgets/index.ts        |  4 +
 3 files changed, 142 insertions(+)
 create mode 100644 packages/frontend/src/widgets/WidgetKordle.vue
 create mode 100644 packages/frontend/src/widgets/WidgetSpinner.vue

diff --git a/packages/frontend/src/widgets/WidgetKordle.vue b/packages/frontend/src/widgets/WidgetKordle.vue
new file mode 100644
index 000000000000..ece658d8099b
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetKordle.vue
@@ -0,0 +1,52 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkContainer data-cy-mkw-kordle class="mkw-kordle" :style="{ height: widgetProps.height + 'px' }">\
+	<iframe :class="$style.root" src="https://kordle.kr/" ></iframe>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
+import { GetFormResultType } from '@/scripts/form.js';
+
+const name = '꼬들';
+
+const widgetPropsDef = {
+	height: {
+		type: 'number' as const,
+		default: 350,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+	
+const props = defineProps<WidgetComponentProps<WidgetProps>>();
+const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+	
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const style = reactive({});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	border: none;
+	pointer-events: none;
+	color-scheme: light;
+}
+</style>
diff --git a/packages/frontend/src/widgets/WidgetSpinner.vue b/packages/frontend/src/widgets/WidgetSpinner.vue
new file mode 100644
index 000000000000..ea456cbd8325
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetSpinner.vue
@@ -0,0 +1,86 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkContainer data-cy-mkw-spinner class="mkw-spinner" :style="{ height: widgetProps.height + 'px' }">
+	<div ref="spinner" class="spinner transition" :style="style" @click="rotation">
+		<img :src="url(widgetProps.imgURL)" />
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
+import { GetFormResultType } from '@/scripts/form.js';
+import { url } from '@@/js/config.js';
+import { random } from 'lodash';
+
+const name = '스피너';
+
+const widgetPropsDef = {
+	imgURL: {
+		type: 'string' as const,
+		default: '',
+	},
+	height: {
+		type: 'number' as const,
+		default: 350,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+	
+const props = defineProps<WidgetComponentProps<WidgetProps>>();
+const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+	
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const style = reactive({
+	transition: 'transform 0.8s ease-in-out',
+});
+const deg = ref(0);
+
+const rotation = () => {
+	if (isNaN(deg.value)) {
+		deg.value = 0;
+	}
+	let index = random(0,1);
+	if (index == 0) {
+		deg.value += random(1,12)*30;
+	} else {
+		deg.value -= random(1,12)*30;
+	}
+	style.transform = `rotate(${deg.value}deg)`;
+};
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	border: none;
+	pointer-events: none;
+	color-scheme: light;
+
+	> .paplin {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-size: cover;
+		background-position: center;
+	};
+}
+</style>
diff --git a/packages/frontend/src/widgets/index.ts b/packages/frontend/src/widgets/index.ts
index 9ac00465dbb7..9f7de8bf3a69 100644
--- a/packages/frontend/src/widgets/index.ts
+++ b/packages/frontend/src/widgets/index.ts
@@ -35,6 +35,8 @@ export default function(app: App) {
 	app.component('WidgetClicker', defineAsyncComponent(() => import('./WidgetClicker.vue')));
 	app.component('WidgetBirthdayFollowings', defineAsyncComponent(() => import('./WidgetBirthdayFollowings.vue')));
 	app.component('WidgetPaplin', defineAsyncComponent(() => import('./WidgetPaplin.vue')));
+	app.component('WidgetKordle', defineAsyncComponent(() => import('./WidgetKordle.vue')));
+	app.component('WidgetSpinner', defineAsyncComponent(() => import('./WidgetSpinner.vue')));
 }
 
 export const widgets = [
@@ -67,4 +69,6 @@ export const widgets = [
 	'clicker',
 	'birthdayFollowings',
 	'paplin',
+	'kordle',
+	'spinner',
 ];

From 011b6ca4f8b1c124b05a0c2b5e63191b9a8c734c Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Wed, 20 Nov 2024 14:38:19 +0900
Subject: [PATCH 30/43] replace random func

---
 packages/frontend/src/widgets/WidgetSpinner.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetSpinner.vue b/packages/frontend/src/widgets/WidgetSpinner.vue
index ea456cbd8325..5ced039c14fb 100644
--- a/packages/frontend/src/widgets/WidgetSpinner.vue
+++ b/packages/frontend/src/widgets/WidgetSpinner.vue
@@ -16,7 +16,6 @@ import { ref, reactive } from 'vue';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import { url } from '@@/js/config.js';
-import { random } from 'lodash';
 
 const name = '스피너';
 
@@ -51,11 +50,11 @@ const rotation = () => {
 	if (isNaN(deg.value)) {
 		deg.value = 0;
 	}
-	let index = random(0,1);
+	let index = Math.round(Math.random());
 	if (index == 0) {
-		deg.value += random(1,12)*30;
+		deg.value += (Math.floor(Math.random()*12)+1)*30;
 	} else {
-		deg.value -= random(1,12)*30;
+		deg.value -= (Math.floor(Math.random()*12)+1)*30;
 	}
 	style.transform = `rotate(${deg.value}deg)`;
 };

From a720d53c467a3c037a04dd276d5d8e6fef51527b Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Wed, 20 Nov 2024 15:12:18 +0900
Subject: [PATCH 31/43] apply height option

---
 packages/frontend/src/widgets/WidgetKordle.vue    |  6 +++---
 packages/frontend/src/widgets/WidgetSlideshow.vue | 12 ++++++++++--
 packages/frontend/src/widgets/WidgetSpinner.vue   |  2 +-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetKordle.vue b/packages/frontend/src/widgets/WidgetKordle.vue
index ece658d8099b..5ddeea0e2294 100644
--- a/packages/frontend/src/widgets/WidgetKordle.vue
+++ b/packages/frontend/src/widgets/WidgetKordle.vue
@@ -4,9 +4,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkContainer data-cy-mkw-kordle class="mkw-kordle" :style="{ height: widgetProps.height + 'px' }">\
+<div data-cy-mkw-kordle class="mkw-kordle" :style="{ height: widgetProps.height + 'px' }">
 	<iframe :class="$style.root" src="https://kordle.kr/" ></iframe>
-</MkContainer>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -19,7 +19,7 @@ const name = '꼬들';
 const widgetPropsDef = {
 	height: {
 		type: 'number' as const,
-		default: 350,
+		default: 600,
 	},
 };
 
diff --git a/packages/frontend/src/widgets/WidgetSlideshow.vue b/packages/frontend/src/widgets/WidgetSlideshow.vue
index 3fea1d705344..47541ebd1bf1 100644
--- a/packages/frontend/src/widgets/WidgetSlideshow.vue
+++ b/packages/frontend/src/widgets/WidgetSlideshow.vue
@@ -10,8 +10,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			{{ i18n.ts.folder }}
 		</p>
 		<p v-if="widgetProps.folderId != null && images.length === 0 && !fetching">{{ i18n.ts['no-image'] }}</p>
-		<div ref="slideA" class="slide a"></div>
-		<div ref="slideB" class="slide b"></div>
+		<div ref="slideA" class="slide a" :class="{'full-image': widgetProps.fullImageMode}"></div>
+		<div ref="slideB" class="slide b" :class="{'full-image': widgetProps.fullImageMode}"></div>
 	</div>
 </div>
 </template>
@@ -33,6 +33,10 @@ const widgetPropsDef = {
 		type: 'number' as const,
 		default: 300,
 	},
+	fullImageMode: {
+		type: 'boolean' as const,
+		default: false,
+	},
 	folderId: {
 		type: 'string' as const,
 		default: null,
@@ -158,6 +162,10 @@ defineExpose<WidgetComponentExpose>({
 				opacity: 1;
 			}
 		}
+		> .full-image {
+			background-size: contain;
+			background-repeat: no-repeat;
+		}
 	}
 }
 </style>
diff --git a/packages/frontend/src/widgets/WidgetSpinner.vue b/packages/frontend/src/widgets/WidgetSpinner.vue
index 5ced039c14fb..386215f1b358 100644
--- a/packages/frontend/src/widgets/WidgetSpinner.vue
+++ b/packages/frontend/src/widgets/WidgetSpinner.vue
@@ -22,7 +22,7 @@ const name = '스피너';
 const widgetPropsDef = {
 	imgURL: {
 		type: 'string' as const,
-		default: '',
+		default: 'https://i.imgur.com/PnzFrT3.png',
 	},
 	height: {
 		type: 'number' as const,

From bddb104d6fbfef640e76f644819f15c7e361bed4 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Wed, 20 Nov 2024 15:31:06 +0900
Subject: [PATCH 32/43] change default source of spinner

---
 packages/frontend/src/widgets/WidgetKordle.vue    | 5 ++++-
 packages/frontend/src/widgets/WidgetSlideshow.vue | 1 +
 packages/frontend/src/widgets/WidgetSpinner.vue   | 3 +--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetKordle.vue b/packages/frontend/src/widgets/WidgetKordle.vue
index 5ddeea0e2294..dccab417e029 100644
--- a/packages/frontend/src/widgets/WidgetKordle.vue
+++ b/packages/frontend/src/widgets/WidgetKordle.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div data-cy-mkw-kordle class="mkw-kordle" :style="{ height: widgetProps.height + 'px' }">
-	<iframe :class="$style.root" src="https://kordle.kr/" ></iframe>
+	<iframe :class="kordle" src="https://kordle.kr/" ></iframe>
 </div>
 </template>
 
@@ -49,4 +49,7 @@ defineExpose<WidgetComponentExpose>({
 	pointer-events: none;
 	color-scheme: light;
 }
+.kordle {
+	height: 100%;
+}
 </style>
diff --git a/packages/frontend/src/widgets/WidgetSlideshow.vue b/packages/frontend/src/widgets/WidgetSlideshow.vue
index 47541ebd1bf1..6adc19a3ffa2 100644
--- a/packages/frontend/src/widgets/WidgetSlideshow.vue
+++ b/packages/frontend/src/widgets/WidgetSlideshow.vue
@@ -165,6 +165,7 @@ defineExpose<WidgetComponentExpose>({
 		> .full-image {
 			background-size: contain;
 			background-repeat: no-repeat;
+			background-color: transparent;
 		}
 	}
 }
diff --git a/packages/frontend/src/widgets/WidgetSpinner.vue b/packages/frontend/src/widgets/WidgetSpinner.vue
index 386215f1b358..122f0623cccd 100644
--- a/packages/frontend/src/widgets/WidgetSpinner.vue
+++ b/packages/frontend/src/widgets/WidgetSpinner.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkContainer data-cy-mkw-spinner class="mkw-spinner" :style="{ height: widgetProps.height + 'px' }">
 	<div ref="spinner" class="spinner transition" :style="style" @click="rotation">
-		<img :src="url(widgetProps.imgURL)" />
+		<img :src="widgetProps.imgURL" />
 	</div>
 </MkContainer>
 </template>
@@ -15,7 +15,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref, reactive } from 'vue';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
-import { url } from '@@/js/config.js';
 
 const name = '스피너';
 

From 9c6ae0c409903c7b9bbaabe8f6aa9b4a98eb0821 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Wed, 20 Nov 2024 15:47:24 +0900
Subject: [PATCH 33/43] added new mode on spinner

---
 packages/frontend/src/widgets/WidgetPaplin.vue  |  4 ----
 packages/frontend/src/widgets/WidgetSpinner.vue | 13 +++++++------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetPaplin.vue b/packages/frontend/src/widgets/WidgetPaplin.vue
index 4607ae56c951..e396980294ef 100644
--- a/packages/frontend/src/widgets/WidgetPaplin.vue
+++ b/packages/frontend/src/widgets/WidgetPaplin.vue
@@ -21,10 +21,6 @@ import { GetFormResultType } from '@/scripts/form.js';
 const name = 'paplin';
 
 const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
 	height: {
 		type: 'number' as const,
 		default: 350,
diff --git a/packages/frontend/src/widgets/WidgetSpinner.vue b/packages/frontend/src/widgets/WidgetSpinner.vue
index 122f0623cccd..feeca74753dc 100644
--- a/packages/frontend/src/widgets/WidgetSpinner.vue
+++ b/packages/frontend/src/widgets/WidgetSpinner.vue
@@ -27,6 +27,10 @@ const widgetPropsDef = {
 		type: 'number' as const,
 		default: 350,
 	},
+	fullThrottle: {
+		type: 'boolean' as const,
+		default: false,
+	},
 };
 
 type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
@@ -50,11 +54,8 @@ const rotation = () => {
 		deg.value = 0;
 	}
 	let index = Math.round(Math.random());
-	if (index == 0) {
-		deg.value += (Math.floor(Math.random()*12)+1)*30;
-	} else {
-		deg.value -= (Math.floor(Math.random()*12)+1)*30;
-	}
+	let value = widgetProps.fullThrottle ? 360 : (Math.floor(Math.random()*12)+1)*30
+	deg.value = index == 0 ? deg.value + value : deg.value - value
 	style.transform = `rotate(${deg.value}deg)`;
 };
 
@@ -71,7 +72,7 @@ defineExpose<WidgetComponentExpose>({
 	pointer-events: none;
 	color-scheme: light;
 
-	> .paplin {
+	> .spinner {
 		position: absolute;
 		top: 0;
 		left: 0;

From d0908758c05de1ad1786d6d563aafa0e73975251 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:21:02 +0900
Subject: [PATCH 34/43] update css

align image center
---
 .../frontend/src/widgets/WidgetSpinner.vue    | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetSpinner.vue b/packages/frontend/src/widgets/WidgetSpinner.vue
index feeca74753dc..717db9195641 100644
--- a/packages/frontend/src/widgets/WidgetSpinner.vue
+++ b/packages/frontend/src/widgets/WidgetSpinner.vue
@@ -4,9 +4,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkContainer data-cy-mkw-spinner class="mkw-spinner" :style="{ height: widgetProps.height + 'px' }">
-	<div ref="spinner" class="spinner transition" :style="style" @click="rotation">
-		<img :src="widgetProps.imgURL" />
+<MkContainer data-cy-mkw-spinner class="mkw-spinner" >
+	<div ref="spinner" class="spinner-box transition" style="transform: 0.8s ease-in-out" :style="{ height: widgetProps.height + 'px' }" @click="rotation">
+		<img class="spinner" :src="widgetProps.imgURL" />
 	</div>
 </MkContainer>
 </template>
@@ -44,9 +44,6 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 	emit,
 );
 
-const style = reactive({
-	transition: 'transform 0.8s ease-in-out',
-});
 const deg = ref(0);
 
 const rotation = () => {
@@ -72,14 +69,16 @@ defineExpose<WidgetComponentExpose>({
 	pointer-events: none;
 	color-scheme: light;
 
-	> .spinner {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-size: cover;
-		background-position: center;
+	> .spinner-box {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		> .spinner {
+			position: absolute;
+			width: 90%;
+			height: 90%;
+		};
 	};
 }
 </style>

From 8e43f07da7dba333b33876950eeedf1fbecb2a05 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:28:52 +0900
Subject: [PATCH 35/43] Update WidgetKordle.vue

disable scroll, border
change default height
---
 packages/frontend/src/widgets/WidgetKordle.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetKordle.vue b/packages/frontend/src/widgets/WidgetKordle.vue
index dccab417e029..f01bca4b8295 100644
--- a/packages/frontend/src/widgets/WidgetKordle.vue
+++ b/packages/frontend/src/widgets/WidgetKordle.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div data-cy-mkw-kordle class="mkw-kordle" :style="{ height: widgetProps.height + 'px' }">
-	<iframe :class="kordle" src="https://kordle.kr/" ></iframe>
+	<iframe :class="kordle" src="https://kordle.kr/" frameborder="0" scrolling="no"></iframe>
 </div>
 </template>
 
@@ -19,7 +19,7 @@ const name = '꼬들';
 const widgetPropsDef = {
 	height: {
 		type: 'number' as const,
-		default: 600,
+		default: 750,
 	},
 };
 
@@ -51,5 +51,6 @@ defineExpose<WidgetComponentExpose>({
 }
 .kordle {
 	height: 100%;
+
 }
 </style>

From 9903b04962cd7ff2744fdc098c5fb34b4085fd03 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:41:00 +0900
Subject: [PATCH 36/43] Update WidgetSpinner.vue

edit style
---
 packages/frontend/src/widgets/WidgetSpinner.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetSpinner.vue b/packages/frontend/src/widgets/WidgetSpinner.vue
index 717db9195641..3547ce61b13e 100644
--- a/packages/frontend/src/widgets/WidgetSpinner.vue
+++ b/packages/frontend/src/widgets/WidgetSpinner.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkContainer data-cy-mkw-spinner class="mkw-spinner" >
-	<div ref="spinner" class="spinner-box transition" style="transform: 0.8s ease-in-out" :style="{ height: widgetProps.height + 'px' }" @click="rotation">
+	<div ref="spinner" class="spinner-box transition" :style="{ height: widgetProps.height + 'px', transform: `rotate(${widgetProps.degree}deg)`}" @click="rotation">
 		<img class="spinner" :src="widgetProps.imgURL" />
 	</div>
 </MkContainer>
@@ -31,6 +31,11 @@ const widgetPropsDef = {
 		type: 'boolean' as const,
 		default: false,
 	},
+	degree: {
+		type: 'number' as const,
+		default: 0,
+		hidden: true,
+	},
 };
 
 type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
@@ -53,7 +58,7 @@ const rotation = () => {
 	let index = Math.round(Math.random());
 	let value = widgetProps.fullThrottle ? 360 : (Math.floor(Math.random()*12)+1)*30
 	deg.value = index == 0 ? deg.value + value : deg.value - value
-	style.transform = `rotate(${deg.value}deg)`;
+	widgetProps.degree = deg.value;
 };
 
 defineExpose<WidgetComponentExpose>({
@@ -73,6 +78,7 @@ defineExpose<WidgetComponentExpose>({
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		transition: transform 0.8s ease-in-out;
 
 		> .spinner {
 			position: absolute;

From aad582baff384f490aeaa015a07b46446fea1b2e Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:48:59 +0900
Subject: [PATCH 37/43] Update WidgetSpinner.vue

edit css
---
 .../frontend/src/widgets/WidgetSpinner.vue    | 26 +++++++------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetSpinner.vue b/packages/frontend/src/widgets/WidgetSpinner.vue
index 3547ce61b13e..79930545d50b 100644
--- a/packages/frontend/src/widgets/WidgetSpinner.vue
+++ b/packages/frontend/src/widgets/WidgetSpinner.vue
@@ -69,22 +69,16 @@ defineExpose<WidgetComponentExpose>({
 </script>
 
 <style lang="scss" module>
-.root {
-	border: none;
-	pointer-events: none;
-	color-scheme: light;
+.spinner-box {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	transition: transform 0.8s ease-in-out;
 
-	> .spinner-box {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		transition: transform 0.8s ease-in-out;
-
-		> .spinner {
-			position: absolute;
-			width: 90%;
-			height: 90%;
-		};
+	> .spinner {
+		position: absolute;
+		width: 90%;
+		height: 90%;
 	};
-}
+};
 </style>

From 046560508e9c74263f5ad01b552b1853a90debc0 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:49:59 +0900
Subject: [PATCH 38/43] Update WidgetKordle.vue

convert from v-bind to static
---
 packages/frontend/src/widgets/WidgetKordle.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetKordle.vue b/packages/frontend/src/widgets/WidgetKordle.vue
index f01bca4b8295..55178d4df95e 100644
--- a/packages/frontend/src/widgets/WidgetKordle.vue
+++ b/packages/frontend/src/widgets/WidgetKordle.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div data-cy-mkw-kordle class="mkw-kordle" :style="{ height: widgetProps.height + 'px' }">
-	<iframe :class="kordle" src="https://kordle.kr/" frameborder="0" scrolling="no"></iframe>
+	<iframe class="kordle" src="https://kordle.kr/" frameborder="0" scrolling="no"></iframe>
 </div>
 </template>
 
@@ -51,6 +51,5 @@ defineExpose<WidgetComponentExpose>({
 }
 .kordle {
 	height: 100%;
-
 }
 </style>

From 878e964668632d3f928d431e5af6684695c43d17 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:07:39 +0900
Subject: [PATCH 39/43] update css

dunno scss
---
 .../frontend/src/widgets/WidgetKordle.vue     | 13 +++++-------
 .../frontend/src/widgets/WidgetSpinner.vue    | 20 ++++++++++---------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetKordle.vue b/packages/frontend/src/widgets/WidgetKordle.vue
index 55178d4df95e..5c4a3c58f1e5 100644
--- a/packages/frontend/src/widgets/WidgetKordle.vue
+++ b/packages/frontend/src/widgets/WidgetKordle.vue
@@ -44,12 +44,9 @@ defineExpose<WidgetComponentExpose>({
 </script>
 
 <style lang="scss" module>
-.root {
-	border: none;
-	pointer-events: none;
-	color-scheme: light;
-}
-.kordle {
-	height: 100%;
-}
+.mkw-kordle {
+	.kordle {
+		height: 100%;
+	};
+};
 </style>
diff --git a/packages/frontend/src/widgets/WidgetSpinner.vue b/packages/frontend/src/widgets/WidgetSpinner.vue
index 79930545d50b..35611d951836 100644
--- a/packages/frontend/src/widgets/WidgetSpinner.vue
+++ b/packages/frontend/src/widgets/WidgetSpinner.vue
@@ -69,16 +69,18 @@ defineExpose<WidgetComponentExpose>({
 </script>
 
 <style lang="scss" module>
-.spinner-box {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	transition: transform 0.8s ease-in-out;
+.mkw-spinner {
+	> .spinner-box {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		transition: transform 0.8s ease-in-out;
 
-	> .spinner {
-		position: absolute;
-		width: 90%;
-		height: 90%;
+		> .spinner {
+			position: absolute;
+			width: 90%;
+			height: 90%;
+		};
 	};
 };
 </style>

From 78554edfdc7d8d036b010ceda8430322d49bf553 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:19:08 +0900
Subject: [PATCH 40/43] change style

scss not working hard code go brrrrrrrrrrrr
---
 packages/frontend/src/widgets/WidgetKordle.vue  | 2 +-
 packages/frontend/src/widgets/WidgetSpinner.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetKordle.vue b/packages/frontend/src/widgets/WidgetKordle.vue
index 5c4a3c58f1e5..db764f9e11dd 100644
--- a/packages/frontend/src/widgets/WidgetKordle.vue
+++ b/packages/frontend/src/widgets/WidgetKordle.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div data-cy-mkw-kordle class="mkw-kordle" :style="{ height: widgetProps.height + 'px' }">
-	<iframe class="kordle" src="https://kordle.kr/" frameborder="0" scrolling="no"></iframe>
+	<iframe class="kordle" src="https://kordle.kr/" frameborder="0" scrolling="no" style="height: 100%"></iframe>
 </div>
 </template>
 
diff --git a/packages/frontend/src/widgets/WidgetSpinner.vue b/packages/frontend/src/widgets/WidgetSpinner.vue
index 35611d951836..4a221ad0e145 100644
--- a/packages/frontend/src/widgets/WidgetSpinner.vue
+++ b/packages/frontend/src/widgets/WidgetSpinner.vue
@@ -5,8 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkContainer data-cy-mkw-spinner class="mkw-spinner" >
-	<div ref="spinner" class="spinner-box transition" :style="{ height: widgetProps.height + 'px', transform: `rotate(${widgetProps.degree}deg)`}" @click="rotation">
-		<img class="spinner" :src="widgetProps.imgURL" />
+	<div ref="spinner" class="spinner-box transition" style="display: flex; justify-content: center; align-items: center; transition: transform 0.8s ease-in-out;" :style="{ height: widgetProps.height + 'px', transform: `rotate(${widgetProps.degree}deg)`}" @click="rotation">
+		<img class="spinner" :src="widgetProps.imgURL" style="position: absolute; width: 90%; height: 90%;"/>
 	</div>
 </MkContainer>
 </template>

From 7c7f3aabe52cf2c1105bee3c37d6886c2f76d910 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:56:18 +0900
Subject: [PATCH 41/43] Update WidgetSpinner.vue

reduce img size
---
 packages/frontend/src/widgets/WidgetSpinner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/widgets/WidgetSpinner.vue b/packages/frontend/src/widgets/WidgetSpinner.vue
index 4a221ad0e145..33061f46a7d0 100644
--- a/packages/frontend/src/widgets/WidgetSpinner.vue
+++ b/packages/frontend/src/widgets/WidgetSpinner.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkContainer data-cy-mkw-spinner class="mkw-spinner" >
 	<div ref="spinner" class="spinner-box transition" style="display: flex; justify-content: center; align-items: center; transition: transform 0.8s ease-in-out;" :style="{ height: widgetProps.height + 'px', transform: `rotate(${widgetProps.degree}deg)`}" @click="rotation">
-		<img class="spinner" :src="widgetProps.imgURL" style="position: absolute; width: 90%; height: 90%;"/>
+		<img class="spinner" :src="widgetProps.imgURL" style="position: absolute; width: 80%; height: 80%;"/>
 	</div>
 </MkContainer>
 </template>

From 36256a0bf4d76bbbb4c78c468389ca6911920981 Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Wed, 20 Nov 2024 18:32:47 +0900
Subject: [PATCH 42/43] Update WidgetSpinner.vue

edit following lint
---
 packages/frontend/src/widgets/WidgetSpinner.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetSpinner.vue b/packages/frontend/src/widgets/WidgetSpinner.vue
index 33061f46a7d0..aa11e7439a97 100644
--- a/packages/frontend/src/widgets/WidgetSpinner.vue
+++ b/packages/frontend/src/widgets/WidgetSpinner.vue
@@ -56,8 +56,8 @@ const rotation = () => {
 		deg.value = 0;
 	}
 	let index = Math.round(Math.random());
-	let value = widgetProps.fullThrottle ? 360 : (Math.floor(Math.random()*12)+1)*30
-	deg.value = index == 0 ? deg.value + value : deg.value - value
+	let value = widgetProps.fullThrottle ? 360 : (Math.floor(Math.random() * 12) + 1) * 30;
+	deg.value = index === 0 ? deg.value + value : deg.value - value;
 	widgetProps.degree = deg.value;
 };
 

From 954f14baef3a5c002b3bedd40a4ebb4353acd0ca Mon Sep 17 00:00:00 2001
From: pernucia <82934114+pernucia@users.noreply.github.com>
Date: Wed, 20 Nov 2024 19:04:17 +0900
Subject: [PATCH 43/43] Update WidgetSpinner.vue

fix image fit
---
 packages/frontend/src/widgets/WidgetSpinner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/widgets/WidgetSpinner.vue b/packages/frontend/src/widgets/WidgetSpinner.vue
index aa11e7439a97..5d5da8c611da 100644
--- a/packages/frontend/src/widgets/WidgetSpinner.vue
+++ b/packages/frontend/src/widgets/WidgetSpinner.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkContainer data-cy-mkw-spinner class="mkw-spinner" >
 	<div ref="spinner" class="spinner-box transition" style="display: flex; justify-content: center; align-items: center; transition: transform 0.8s ease-in-out;" :style="{ height: widgetProps.height + 'px', transform: `rotate(${widgetProps.degree}deg)`}" @click="rotation">
-		<img class="spinner" :src="widgetProps.imgURL" style="position: absolute; width: 80%; height: 80%;"/>
+		<img class="spinner" :src="widgetProps.imgURL" style="position: absolute; width: 80%; height: 80%; object-fit: contain;"/>
 	</div>
 </MkContainer>
 </template>