From dbf1f032401391f07997c9922f93725d9964f63e Mon Sep 17 00:00:00 2001
From: nekobato <nekobato@gmail.com>
Date: Sun, 20 Aug 2023 18:05:20 +0900
Subject: [PATCH] =?UTF-8?q?settings=E3=81=8B=E3=82=89=E3=82=BF=E3=82=A4?=
 =?UTF-8?q?=E3=83=A0=E3=83=A9=E3=82=A4=E3=83=B3=E5=A4=89=E6=9B=B4=20?=
 =?UTF-8?q?=E5=BE=A9=E6=B4=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/main/db.ts                           |  12 +-
 packages/renderer/src/components/Post.vue     |   2 -
 .../Settings/ApplicationSettings.vue          |  30 +++--
 .../components/Settings/TimelineSettings.vue  |  54 +++------
 .../src/pages/MainWindow/Settings.vue         |   5 +-
 .../src/pages/MainWindow/Timeline.vue         | 111 +----------------
 .../renderer/src/pages/MainWindow/index.vue   | 112 +++++++++++++++++-
 packages/renderer/src/store/index.ts          |   3 +-
 packages/renderer/src/store/settings.ts       |   4 +-
 packages/renderer/src/store/timeline.ts       |   5 +-
 10 files changed, 158 insertions(+), 180 deletions(-)

diff --git a/packages/main/db.ts b/packages/main/db.ts
index b8aac1e..1008147 100644
--- a/packages/main/db.ts
+++ b/packages/main/db.ts
@@ -23,8 +23,6 @@ export const upsertUser = async (user: User) => {
   if (!user.name) throw new Error("name is required");
   if (!user.username) throw new Error("username is required");
 
-  console.log("upsertUser", user);
-
   const existingUser = await prisma.user.findFirst({
     where: {
       name: user.name,
@@ -60,8 +58,6 @@ export const upsertUser = async (user: User) => {
 export const deleteUser = async (userId: number) => {
   if (!userId) throw new Error("userId is required");
 
-  console.log("deleteUser", userId);
-
   return await prisma.user.delete({
     where: {
       id: Number(userId),
@@ -73,8 +69,6 @@ export const setSetting = async (key: string, value: string) => {
   if (!key) throw new Error("key is required");
   if (!value) throw new Error("value is required");
 
-  console.log("setSetting", key, value);
-
   return await prisma.settings.upsert({
     where: {
       key: key,
@@ -108,14 +102,14 @@ export function setTimeline(data: { id?: number; userId: number; channel: string
   if (!channel) throw new Error("channel is required");
   if (!options) throw new Error("options is required");
 
-  console.log("setTimeline", data);
-
   if (id) {
     return prisma.timeline.update({
       where: {
         id: id,
       },
       data: {
+        userId: userId,
+        channel: channel,
         options: options,
       },
     });
@@ -152,8 +146,6 @@ export const upsertInstance = async (instance: {
   if (!url) throw new Error("url is required");
   if (!iconUrl) throw new Error("iconUrl is required");
 
-  console.log("upsertInstance", instance);
-
   if (id) {
     return await prisma.instance.update({
       where: {
diff --git a/packages/renderer/src/components/Post.vue b/packages/renderer/src/components/Post.vue
index 82e16b2..be09c75 100644
--- a/packages/renderer/src/components/Post.vue
+++ b/packages/renderer/src/components/Post.vue
@@ -15,8 +15,6 @@ const props = defineProps({
   },
 });
 
-console.log(props.post.reactions);
-
 const postType = computed(() => {
   if (props.post.repost) {
     if (props.post.text) {
diff --git a/packages/renderer/src/components/Settings/ApplicationSettings.vue b/packages/renderer/src/components/Settings/ApplicationSettings.vue
index f877a0a..e5ea27a 100644
--- a/packages/renderer/src/components/Settings/ApplicationSettings.vue
+++ b/packages/renderer/src/components/Settings/ApplicationSettings.vue
@@ -8,15 +8,9 @@ import { useStore } from "@/store";
 const store = useStore();
 const settingsStore = useSettingsStore();
 
-const opacity = ref();
-
-const onChangeOpacity = async () => {
-  settingsStore.setOpacity(opacity.value);
+const onChangeOpacity = async (e: Event) => {
+  await settingsStore.setOpacity(Number((e.target as HTMLInputElement)?.value));
 };
-
-onMounted(() => {
-  opacity.value = store.settings.opacity || 50;
-});
 </script>
 
 <template>
@@ -26,9 +20,23 @@ onMounted(() => {
       <div class="content">
         <span class="title"><Icon icon="ion:eye-outline" class="nn-icon size-small" /><span>の透明度</span></span>
       </div>
-      <div class="form-actions" :class="{ 'hazy-unvisible': !opacity }">
-        <input type="range" min="0" max="100" class="nn-range" v-model="opacity" @change="onChangeOpacity" />
-        <input type="number" min="0" max="100" class="nn-text-field" v-model="opacity" @change="onChangeOpacity" />
+      <div class="form-actions" v-if="store.settings.opacity">
+        <input
+          type="range"
+          min="0"
+          max="100"
+          class="nn-range"
+          :value="store.settings.opacity"
+          @change="onChangeOpacity"
+        />
+        <input
+          type="number"
+          min="0"
+          max="100"
+          class="nn-text-field"
+          :value="store.settings.opacity"
+          @change="onChangeOpacity"
+        />
       </div>
     </div>
   </div>
diff --git a/packages/renderer/src/components/Settings/TimelineSettings.vue b/packages/renderer/src/components/Settings/TimelineSettings.vue
index 5c7e737..0b1f95b 100644
--- a/packages/renderer/src/components/Settings/TimelineSettings.vue
+++ b/packages/renderer/src/components/Settings/TimelineSettings.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
-import SectionTitle from "../Post/SectionTitle.vue";
-import { ElSelect, ElOption } from "element-plus";
-import { useUsersStore } from "@/store/users";
+import { TimelineSetting, useStore } from "@/store";
 import { useTimelineStore } from "@/store/timeline";
-import { ChannelName, TimelineSetting } from "@/store";
+import { useUsersStore } from "@/store/users";
+import { ElOption, ElSelect } from "element-plus";
+import SectionTitle from "../Post/SectionTitle.vue";
 
 const channelList = [
   {
@@ -37,22 +36,21 @@ const channelList = [
   },
 ] as const;
 
+const store = useStore();
 const usersStore = useUsersStore();
 const timelineStore = useTimelineStore();
 
-const timelineSettings = ref<TimelineSetting[]>([]);
-
-const onChangeUser = async (userId: number, timelineId: number) => {
-  const newTimeline = timelineStore.timelines.find((timeline) => timeline.id === timelineId);
+const onChangeUser = async (timelineId: number) => {
+  const newTimeline = store.timelines.find((timeline) => timeline.id === timelineId);
   if (newTimeline) {
-    updateTimeline({ ...newTimeline, userId });
+    await updateTimeline(newTimeline);
   }
 };
 
-const onChangeChannel = async (channel: ChannelName, timelineId: number) => {
-  const newTimeline = timelineStore.timelines.find((timeline) => timeline.id === timelineId);
+const onChangeChannel = async (timelineId: number) => {
+  const newTimeline = store.timelines.find((timeline) => timeline.id === timelineId);
   if (newTimeline) {
-    updateTimeline({ ...newTimeline, channel });
+    await updateTimeline(newTimeline);
   }
 };
 
@@ -60,42 +58,27 @@ const updateTimeline = async (timeline: TimelineSetting) => {
   await timelineStore.updateTimeline({
     id: timeline.id,
     userId: timeline.userId,
-    channel: timeline?.channel || "misskey:homeTimeline",
-    options: timeline?.options || {},
+    channel: timeline?.channel,
+    options: timeline?.options,
   });
 };
-
-onMounted(async () => {
-  timelineSettings.value.push(
-    ...timelineStore.timelines.map((timeline) => {
-      console.log(timeline);
-      return {
-        id: timeline.id,
-        userId: timeline.userId,
-        channel: timeline.channel,
-        options: timeline.options,
-      };
-    }),
-  );
-});
 </script>
 
 <template>
-  <div class="account-settings hazy-post-list" v-if="timelineStore.timelines.length !== 0">
+  <div class="account-settings hazy-post-list" v-if="store.timelines.length > 0">
     <SectionTitle title="タイムライン" />
-    <div class="accounts-container" v-for="timeline in timelineSettings" :key="timeline.id">
+    <div class="accounts-container" v-for="timeline in store.timelines" :key="timeline.id">
       <div class="hazy-post account indent-1">
         <div class="content">
           <span class="label">アカウント</span>
         </div>
         <div class="attachments form-actions">
-          <ElSelect v-model="timeline.userId" size="small">
+          <ElSelect v-model="timeline.userId" size="small" @change="onChangeUser(timeline.id)">
             <ElOption
-              v-for="user in usersStore.users"
+              v-for="user in store.users"
               :key="user.id"
               :label="`${user.name}@${usersStore.findInstance(user.instanceId)?.url.replace('https://', '')}`"
               :value="user.id"
-              @change="onChangeUser(user.id, timeline.id)"
             />
           </ElSelect>
         </div>
@@ -105,13 +88,12 @@ onMounted(async () => {
           <span class="label">チャンネル</span>
         </div>
         <div class="attachments form-actions">
-          <ElSelect v-model="timeline.channel" size="small">
+          <ElSelect v-model="timeline.channel" size="small" @change="onChangeChannel(timeline.id)">
             <ElOption
               v-for="channel in channelList"
               :key="channel.value"
               :label="channel.label"
               :value="channel.value"
-              @change="onChangeChannel(channel.value, timeline.id)"
             />
           </ElSelect>
         </div>
diff --git a/packages/renderer/src/pages/MainWindow/Settings.vue b/packages/renderer/src/pages/MainWindow/Settings.vue
index 2e08a2f..6ea5728 100644
--- a/packages/renderer/src/pages/MainWindow/Settings.vue
+++ b/packages/renderer/src/pages/MainWindow/Settings.vue
@@ -4,16 +4,13 @@ import AccountSettings from "@/components/Settings/AccountSettings.vue";
 import ApplicationInformation from "@/components/Settings/ApplicationInformation.vue";
 import ApplicationSettings from "@/components/Settings/ApplicationSettings.vue";
 import TimelineSettings from "@/components/Settings/TimelineSettings.vue";
-import { useUsersStore } from "@/store/users";
-
-const usersStore = useUsersStore();
 </script>
 
 <template>
   <div class="settings hazy-timeline-container">
     <SectionTitle title="つまむところ" class="handle" />
     <AccountSettings />
-    <TimelineSettings v-if="!usersStore.isEmpty" />
+    <TimelineSettings />
     <ApplicationSettings />
     <ApplicationInformation />
   </div>
diff --git a/packages/renderer/src/pages/MainWindow/Timeline.vue b/packages/renderer/src/pages/MainWindow/Timeline.vue
index a0498af..dee7c32 100644
--- a/packages/renderer/src/pages/MainWindow/Timeline.vue
+++ b/packages/renderer/src/pages/MainWindow/Timeline.vue
@@ -1,124 +1,15 @@
 <script setup lang="ts">
 import Post from "@/components/Post.vue";
 import HazyLoading from "@/components/common/HazyLoading.vue";
-import router from "@/router";
-import { useStore } from "@/store";
 import { useTimelineStore } from "@/store/timeline";
-import { ipcSend } from "@/utils/ipc";
-import { parseMisskeyNotes } from "@/utils/misskey";
-import { connectToMisskeyStream } from "@/utils/websocket";
-import { v4 as uuid } from "uuid";
-import { nextTick, onBeforeUnmount, onMounted, reactive, ref } from "vue";
-
-let ws: WebSocket | null = null;
+import { reactive, ref } from "vue";
 
 const timelineStore = useTimelineStore();
 const timelineContainer = ref<HTMLDivElement | null>(null);
 
 const state = reactive({
-  webSocketId: "",
   isAdding: false,
 });
-
-const observeWebSocketConnection = () => {
-  state.webSocketId = uuid();
-  if (!timelineStore.currentUser) throw new Error("No user");
-  if (!timelineStore.currentInstance) throw new Error("No instance");
-  ws = connectToMisskeyStream(
-    timelineStore.currentInstance.url.replace(/https?:\/\//, ""),
-    timelineStore.currentUser.token,
-  );
-  ws.onopen = () => {
-    console.log("ws:open");
-    if (timelineStore.current) {
-      ws!.send(
-        JSON.stringify({
-          type: "connect",
-          body: { channel: timelineStore.current.channel.split(":")[1], id: state.webSocketId, params: {} },
-        }),
-      );
-    }
-  };
-  ws.onerror = () => {
-    console.log("ws:error");
-  };
-  ws.onclose = () => {
-    console.log("ws:close");
-    if (timelineStore.currentUser && timelineStore.currentInstance) {
-      ws = connectToMisskeyStream(
-        timelineStore.currentInstance.url.replace(/https?:\/\//, ""),
-        timelineStore.currentUser.token,
-      );
-      observeWebSocketConnection();
-    }
-  };
-  ws.onmessage = (event) => {
-    const data = JSON.parse(event.data);
-    if (data.body.type === "note") {
-      if (timelineStore.current && timelineStore.currentInstance) {
-        const note = parseMisskeyNotes([data.body.body], timelineStore.currentInstance.misskey!.emojis)[0];
-        timelineStore.addPost(note);
-
-        // スクロール制御
-        const container = timelineContainer.value;
-        state.isAdding = true;
-        container?.scrollTo({ top: 88, behavior: "auto" });
-        nextTick(() => {
-          container?.scrollTo({ top: 0, behavior: "smooth" });
-          state.isAdding = false;
-          // スクロールしている場合はスクロールを維持する
-          // if (container?.scrollTop !== 0) {
-          //   container?.scrollTo({
-          //     top: container.scrollTop + container.querySelectorAll(".post-item")[0].clientHeight,
-          //     behavior: "auto",
-          //   });
-          //   // state.isAdding = false;
-          // } else {
-          //   // container?.querySelectorAll(".post-item")[1].scrollIntoView({
-          //   //   behavior: "auto",
-          //   // });
-          //   // container?.scrollTo({
-          //   //   top: container.querySelectorAll(".post-item")[0].clientHeight,
-          //   //   behavior: "auto",
-          //   // });
-          //   nextTick(() => {
-          //     container?.scrollTo({ top: 0, behavior: "smooth" });
-          //     state.isAdding = false;
-          //   });
-          // }
-        });
-      }
-    }
-  };
-};
-
-onMounted(async () => {
-  if (timelineStore.currentUser) {
-    await timelineStore.fetchPosts();
-
-    // Websocket
-    observeWebSocketConnection();
-    // state.postList.forEach((post: any) => {
-    //   ws.send(
-    //     JSON.stringify({
-    //       type: "s",
-    //       body: {
-    //         id: post.id,
-    //       },
-    //     })
-    //   );
-    // });
-  } else {
-    console.log("No user");
-    router.replace("/main/settings");
-    ipcSend("set-hazy-mode", { mode: "settings", reflect: true });
-  }
-});
-
-onBeforeUnmount(() => {
-  ws?.close();
-  ws = null;
-});
 </script>
 
 <template>
diff --git a/packages/renderer/src/pages/MainWindow/index.vue b/packages/renderer/src/pages/MainWindow/index.vue
index 251186c..6072d37 100644
--- a/packages/renderer/src/pages/MainWindow/index.vue
+++ b/packages/renderer/src/pages/MainWindow/index.vue
@@ -2,12 +2,24 @@
 import router from "@/router";
 import { useStore } from "@/store";
 import { useSettingsStore } from "@/store/settings";
-import { onBeforeMount, onMounted } from "vue";
+import { useTimelineStore } from "@/store/timeline";
+import { ipcSend } from "@/utils/ipc";
+import { parseMisskeyNotes } from "@/utils/misskey";
+import { connectToMisskeyStream } from "@/utils/websocket";
+import { v4 as uuid } from "uuid";
+import { onBeforeMount, onBeforeUnmount, reactive } from "vue";
 import { RouterView } from "vue-router";
 
+let ws: WebSocket | null = null;
+
 const store = useStore();
+const timelineStore = useTimelineStore();
 const settingsStore = useSettingsStore();
 
+const state = reactive({
+  webSocketId: "",
+});
+
 window.ipc.on("set-hazy-mode", (_, { mode, reflect }) => {
   if (reflect) return;
 
@@ -30,12 +42,110 @@ window.ipc.on("resize", (_, bounds) => {
   window.localStorage.setItem("bounds", JSON.stringify(bounds));
 });
 
+const observeWebSocketConnection = () => {
+  if (ws) ws.close();
+  ws = null;
+  state.webSocketId = uuid();
+  if (!timelineStore.currentUser) throw new Error("No user");
+  if (!timelineStore.currentInstance) throw new Error("No instance");
+  ws = connectToMisskeyStream(
+    timelineStore.currentInstance.url.replace(/https?:\/\//, ""),
+    timelineStore.currentUser.token,
+  );
+  ws.onopen = () => {
+    console.log("ws:open");
+    if (timelineStore.current) {
+      ws!.send(
+        JSON.stringify({
+          type: "connect",
+          body: { channel: timelineStore.current.channel.split(":")[1], id: state.webSocketId, params: {} },
+        }),
+      );
+    }
+  };
+  ws.onerror = () => {
+    console.log("ws:error");
+  };
+  ws.onclose = () => {
+    console.log("ws:close");
+    if (timelineStore.currentUser && timelineStore.currentInstance) {
+      ws = connectToMisskeyStream(
+        timelineStore.currentInstance.url.replace(/https?:\/\//, ""),
+        timelineStore.currentUser.token,
+      );
+      observeWebSocketConnection();
+    }
+  };
+  ws.onmessage = (event) => {
+    const data = JSON.parse(event.data);
+    if (data.body.type === "note") {
+      if (timelineStore.current && timelineStore.currentInstance) {
+        const note = parseMisskeyNotes([data.body.body], timelineStore.currentInstance.misskey!.emojis)[0];
+        timelineStore.addPost(note);
+
+        // スクロール制御
+        // const container = timelineContainer.value;
+        // state.isAdding = true;
+        // container?.scrollTo({ top: 88, behavior: "auto" });
+        // nextTick(() => {
+        //   container?.scrollTo({ top: 0, behavior: "smooth" });
+        //   state.isAdding = false;
+        //   // スクロールしている場合はスクロールを維持する
+        //   // if (container?.scrollTop !== 0) {
+        //   //   container?.scrollTo({
+        //   //     top: container.scrollTop + container.querySelectorAll(".post-item")[0].clientHeight,
+        //   //     behavior: "auto",
+        //   //   });
+        //   //   // state.isAdding = false;
+        //   // } else {
+        //   //   // container?.querySelectorAll(".post-item")[1].scrollIntoView({
+        //   //   //   behavior: "auto",
+        //   //   // });
+        //   //   // container?.scrollTo({
+        //   //   //   top: container.querySelectorAll(".post-item")[0].clientHeight,
+        //   //   //   behavior: "auto",
+        //   //   // });
+        //   //   nextTick(() => {
+        //   //     container?.scrollTo({ top: 0, behavior: "smooth" });
+        //   //     state.isAdding = false;
+        //   //   });
+        //   // }
+        // });
+      }
+    }
+  };
+};
+
+// Timelineの設定が更新されたらPostsを再取得し、WebSocketの接続を更新する
+timelineStore.$onAction((action) => {
+  if (action.name === "updateTimeline") {
+    if (store.timelines[timelineStore.currentIndex].id === action.args[0].id) {
+      timelineStore.fetchPosts();
+      observeWebSocketConnection();
+    }
+  }
+});
+
 onBeforeMount(async () => {
   await store.init();
   const bounds = window.localStorage.getItem("bounds");
   if (bounds) {
     window.ipc.send("resize", bounds);
   }
+
+  if (timelineStore.currentUser) {
+    await timelineStore.fetchPosts();
+    observeWebSocketConnection();
+  } else {
+    console.log("No user");
+    router.replace("/main/settings");
+    ipcSend("set-hazy-mode", { mode: "settings", reflect: true });
+  }
+});
+
+onBeforeUnmount(() => {
+  ws?.close();
+  ws = null;
 });
 </script>
 <template>
diff --git a/packages/renderer/src/store/index.ts b/packages/renderer/src/store/index.ts
index 01eadf7..b4ae385 100644
--- a/packages/renderer/src/store/index.ts
+++ b/packages/renderer/src/store/index.ts
@@ -53,7 +53,7 @@ export const useStore = defineStore({
     instances: [] as Instance[],
     timelines: [] as Timeline[],
     settings: {
-      opacity: 50 as number,
+      opacity: undefined as number | undefined,
       hazyMode: "show" as "show" | "haze" | "hide",
     },
   }),
@@ -108,6 +108,7 @@ export const useStore = defineStore({
           posts: [],
         };
       });
+      console.log(this.$state.timelines);
     },
     async initSettings() {
       this.$state.settings = await ipcInvoke("settings:all");
diff --git a/packages/renderer/src/store/settings.ts b/packages/renderer/src/store/settings.ts
index 9c7d6a5..ec0d004 100644
--- a/packages/renderer/src/store/settings.ts
+++ b/packages/renderer/src/store/settings.ts
@@ -7,12 +7,12 @@ export const useSettingsStore = defineStore("settings", () => {
 
   const setOpacity = async (opacity: number) => {
     store.$state.settings.opacity = opacity;
-    await ipcInvoke("settings:set", { key: "opacity", value: opacity.toString() });
+    return await ipcInvoke("settings:set", { key: "opacity", value: opacity.toString() });
   };
 
   const setHazyMode = async (mode: "show" | "haze" | "hide") => {
     store.$state.settings.hazyMode = mode;
-    await ipcInvoke("settings:set", { key: "hazyMode", value: mode });
+    return await ipcInvoke("settings:set", { key: "hazyMode", value: mode });
   };
 
   return { setOpacity, setHazyMode };
diff --git a/packages/renderer/src/store/timeline.ts b/packages/renderer/src/store/timeline.ts
index b8d0ba4..a5bf477 100644
--- a/packages/renderer/src/store/timeline.ts
+++ b/packages/renderer/src/store/timeline.ts
@@ -27,6 +27,7 @@ export const useTimelineStore = defineStore("timeline", () => {
 
   const fetchPosts = async () => {
     if (current.value && currentUser.value && currentInstance.value) {
+      store.timelines[currentIndex.value].posts = [];
       const data = await ipcInvoke("api", {
         method: methodOfChannel[current.value.channel] || methodOfChannel["misskey:homeTimeline"],
         instanceUrl: currentInstance.value?.url,
@@ -44,15 +45,13 @@ export const useTimelineStore = defineStore("timeline", () => {
   };
 
   const updateTimeline = async (timeline: TimelineSetting) => {
-    const index = store.timelines.findIndex((t) => t.id === timeline.id);
-    if (index === -1) return;
-    store.timelines[index] = { ...timeline, posts: [] };
     await ipcInvoke("db:set-timeline", {
       id: timeline.id,
       userId: timeline.userId,
       channel: timeline.channel,
       options: JSON.stringify(timeline.options),
     });
+    await store.initTimelines();
   };
 
   const createTimeline = async (timeline: Omit<TimelineSetting, "id">) => {