vite-vue用URL調整

main/windows/mainWindow.ts

@@ -29,7 +29,7 @@ export function createMainWindow() {
   });
 
   if (process.env.NODE_ENV === "development") {
-    win.loadURL(join(pageRoot.development, pageName));
+    win.loadURL(pageRoot.development + "#" + pageName);
     win.webContents.openDevTools();
   } else {
     win.loadFile(join(pageRoot.production), { hash: pageName });

main/windows/mediaViewerWindow.ts

@@ -23,7 +23,7 @@ export function createMediaViewerWindow() {
   });
 
   if (process.env.NODE_ENV === "development") {
-    win.loadURL(join(pageRoot.development, pageName));
+    win.loadURL(pageRoot.development + "#" + pageName);
     // win.webContents.openDevTools();
   } else {
     win.loadFile(join(pageRoot.production), { hash: pageName });

main/windows/postWindow.ts

@@ -27,7 +27,7 @@ export function createPostWindow() {
   });
 
   if (process.env.NODE_ENV === "development") {
-    win.loadURL(join(pageRoot.development, pageName));
+    win.loadURL(pageRoot.development + "#" + pageName);
     // win.webContents.openDevTools();
   } else {
     win.loadFile(join(pageRoot.production), { hash: pageName });

src/components/Settings/ApplicationInformation.vue

@@ -34,6 +34,7 @@ const gotoTutorial = () => {
 <style lang="scss" scoped>
 .information {
   width: 100%;
+  margin-top: 16px;
 }
 
 .content {

src/components/Settings/ApplicationSettings.vue

@@ -161,6 +161,7 @@ const onChangeHideCw = async (e: Event) => {
 <style lang="scss" scoped>
 .account-settings {
   width: 100%;
+  margin-top: 16px;
 }
 
 .content {

src/components/Settings/TimelineForm.vue

@@ -185,7 +185,10 @@ onMounted(async () => {
 </template>
 
 <style lang="scss" scoped>
-.account-settings {
+.accounts-container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
   width: 100%;
 }
 .account {

src/components/Settings/TimelineSettings.vue

@@ -31,5 +31,6 @@ const onUpdateTimeline = async (timeline: Timeline) => {
 <style lang="scss" scoped>
 .account-settings {
   width: 100%;
+  margin-top: 16px;
 }
 </style>

src/pages/main.vue

@@ -30,9 +30,10 @@ const misskeyStream = useMisskeyStream({
     console.info("onNoteUpdated", data);
     switch (event) {
       case "reacted":
+        console.info("reacted", data);
         timelineStore.addReaction({
           postId: data.body.id,
-          reaction: data.body.body.reaction,
+          reaction: data.body.reaction,
         });
         break;
       default:

src/pages/main/timeline.vue

@@ -3,13 +3,15 @@ import HazyLoading from "@/components/common/HazyLoading.vue";
 import MisskeyNote from "@/components/MisskeyNote.vue";
 import WindowHeader from "@/components/WindowHeader.vue";
 import ErrorPost from "@/components/ErrorPost.vue";
+import { Icon } from "@iconify/vue";
 import { useTimelineStore } from "@/store/timeline";
 import { computed, nextTick, reactive, ref } from "vue";
 import { useStore } from "@/store";
 
 const store = useStore();
 const timelineStore = useTimelineStore();
 const timelineContainer = ref<HTMLDivElement | null>(null);
+const scrollPosition = ref(0);
 
 const hazeOpacity = computed(() => {
   return (store.settings.hazyMode === "haze" ? store.settings.opacity || 0 : 100) / 100;
@@ -19,6 +21,21 @@ const state = reactive({
   isAdding: false,
 });
 
+const onScroll = () => {
+  scrollPosition.value = timelineContainer.value?.scrollTop || 0;
+};
+
+const canScrollToTop = computed(() => {
+  return store.settings.hazyMode === "show" && scrollPosition.value > 0;
+});
+
+const scrollToTop = () => {
+  timelineContainer.value?.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+};
+
 timelineStore.$onAction((action) => {
   if (action.name === "addPost") {
     nextTick(() => {
@@ -36,7 +53,7 @@ timelineStore.$onAction((action) => {
 
 <template>
   <div class="page-container" :class="{ haze: store.settings.hazyMode === 'haze' }" :style="{ opacity: hazeOpacity }">
-    <WindowHeader windowType="main" v-show="store.settings.hazyMode !== 'haze'" />
+    <WindowHeader windowType="main" v-show="store.settings.hazyMode !== 'haze'" class="header" />
     <div class="hazy-timeline-container" v-if="store.errors.length">
       <div class="hazy-post-list">
         <ErrorPost class="post-item" v-for="(error, index) in store.errors" :error="{ ...error, index }" />
@@ -45,6 +62,7 @@ timelineStore.$onAction((action) => {
     <div
       class="timeline-container"
       ref="timelineContainer"
+      @scroll="onScroll"
       :class="{
         'is-adding': state.isAdding,
       }"
@@ -54,6 +72,11 @@ timelineStore.$onAction((action) => {
       </div>
       <HazyLoading v-else />
     </div>
+    <div class="scroll-to-top" :class="{ visible: canScrollToTop }">
+      <button @click="scrollToTop" class="nn-button size-small">
+        <Icon icon="mingcute:arrow-to-up-fill" class="nn-icon size-small" />
+      </button>
+    </div>
   </div>
 </template>
 
@@ -63,6 +86,10 @@ body::-webkit-scrollbar {
 }
 </style>
 <style lang="scss" scoped>
+.header {
+  position: relative;
+  z-index: 1;
+}
 .page-container {
   display: flex;
   flex-direction: column;
@@ -101,4 +128,30 @@ body::-webkit-scrollbar {
   color: #fff;
   text-shadow: 1px 0 1px #000;
 }
+.scroll-to-top {
+  position: fixed;
+  top: 32px;
+  right: 0;
+  left: 0;
+  display: inline-flex;
+  width: 80px;
+  margin: 0 auto;
+  color: var(--hazy-color-white-t5);
+  background-color: var(--hazy-color-black-t4);
+  transform: translateY(-56px);
+  opacity: 0.2;
+  transition:
+    transform 0.1s ease-in-out,
+    opacity 0.1s ease-in-out;
+  fill: var(--hazy-color-white-t5);
+
+  &.visible {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  .nn-button {
+    width: 100%;
+  }
+}
 </style>

src/router.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from "vue-router";
+import { createRouter, createWebHashHistory } from "vue-router";
 
 const routes = [
   {
@@ -35,10 +35,15 @@ const routes = [
       },
     ],
   },
+  {
+    path: "/media-viewer",
+    name: "MediaViewer",
+    component: () => import("./pages/media-viewer.vue"),
+  },
 ];
 
 const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHashHistory(),
   routes,
 });