settingsからタイムライン変更 復活

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: {

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) {

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>

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,65 +36,49 @@ 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);
   }
 };
 
 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>

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>

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>