update layout

assets/styles/app.scss

@@ -39,7 +39,7 @@ body,
 .hazy-post-list {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 2px;
   width: 100%;
 }
 

assets/styles/variables.scss

@@ -36,7 +36,13 @@
   --hazy-color-white-t4: rgba(255, 255, 255, 0.64);
   --hazy-color-white-t5: rgba(255, 255, 255, 0.8);
 
+  --hazy-color-black-t1: rgba(0, 0, 0, 0.08);
+  --hazy-color-black-t2: rgba(0, 0, 0, 0.32);
+  --hazy-color-black-t3: rgba(0, 0, 0, 0.48);
+  --hazy-color-black-t4: rgba(0, 0, 0, 0.64);
+  --hazy-color-black-t5: rgba(0, 0, 0, 0.8);
+
   /* Tokens */
-  --hazy-background-color: #212121;
+  --hazy-background-color: var(--hazy-color-black-t5);
   --hazy-border-color: var(--hazy-color-white-t1);
 }

components/MisskeyNote.vue

@@ -104,6 +104,13 @@ const openPost = () => {
   ipcSend("open-url", { url: new URL(`/notes/${props.post.id}`, timelineStore.currentInstance?.url).toString() });
 };
 
+const openUserPage = (user: MisskeyNote["user"]) => {
+  const instanceUrl = user.host || timelineStore.currentInstance?.url;
+  ipcSend("open-url", {
+    url: new URL(`/@${user.username}`, instanceUrl).toString(),
+  });
+};
+
 const openReactionWindow = () => {
   ipcSend("post:reaction", {
     instanceUrl: timelineStore.currentInstance?.url,
@@ -151,10 +158,15 @@ onBeforeUnmount(() => {
     <div class="post-data-group">
       <div class="post-data" :class="{ notext: !props.post.text }">
         <div class="hazy-post-info">
-          <span class="username" v-if="props.post.text || !props.post.renote" v-html="username" />
+          <span
+            class="username"
+            v-if="props.post.text || !props.post.renote"
+            v-html="username"
+            @click="openUserPage(props.post.user)"
+          />
         </div>
         <div class="hazy-post-contents">
-          <img class="hazy-avatar" :src="props.post.user.avatarUrl" alt="" />
+          <img class="hazy-avatar" :src="props.post.user.avatarUrl" alt="" @click="openUserPage(props.post.user)" />
           <div class="body-container">
             <Mfm
               class="cw"
@@ -175,10 +187,15 @@ onBeforeUnmount(() => {
       </div>
       <div class="renote-data" v-if="props.post.renote">
         <div class="hazy-post-info">
-          <span class="username" v-html="renoteUsername" />
+          <span class="username" v-html="renoteUsername" @click="openUserPage(props.post.renote.user)" />
         </div>
         <div class="hazy-post-contents">
-          <img class="hazy-avatar" :src="props.post.renote?.user.avatarUrl" alt="" />
+          <img
+            class="hazy-avatar"
+            :src="props.post.renote?.user.avatarUrl"
+            alt=""
+            @click="openUserPage(props.post.renote.user)"
+          />
           <div class="body-container">
             <Mfm
               class="cw"
@@ -237,6 +254,10 @@ onBeforeUnmount(() => {
   font-style: normal;
   line-height: var(--font-size-10);
   white-space: nowrap;
+  cursor: pointer;
+}
+.hazy-avatar {
+  cursor: pointer;
 }
 .post-data,
 .renote-data {

components/Settings/TimelineSettings.vue

@@ -44,7 +44,7 @@ const streamList = [
     label: "検索...",
     value: "misskey:searchTimeline",
   },
-] as const;
+] as { label: string; value: ChannelName }[];
 
 const streamOptions = streamList.map((stream) => ({
   label: stream.label,

electron/api/misskey.ts

@@ -213,13 +213,11 @@ export const misskeyGetNote = async ({
   });
 };
 
-export const misskeyGetMeta = async ({ instanceUrl, token }: { instanceUrl: string; token: string }) => {
+export const misskeyGetMeta = async ({ instanceUrl }: { instanceUrl: string }) => {
   return fetch(new URL(`/api/meta`, instanceUrl).toString(), {
     method: "POST",
     headers: baseHeader,
-    body: JSON.stringify({
-      i: token,
-    }),
+    body: JSON.stringify({}),
   }).then((res: Response) => {
     return res.json();
   });

layouts/columns.vue

@@ -7,7 +7,7 @@
 .columns {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
   background-color: var(--hazy-background-color);
 }
 </style>

layouts/with-header.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="layout">
+    <slot />
+  </div>
+</template>
+<style lang="scss" scoped>
+.layout {
+  display: grid;
+  grid-template-rows: 24px 1fr;
+  width: 100%;
+  height: 100%;
+  background-color: var(--hazy-background-color);
+}
+</style>

pages/main/timeline.vue

@@ -62,6 +62,8 @@ body::-webkit-scrollbar {
 </style>
 <style lang="scss" scoped>
 .page-container {
+  display: grid;
+  grid-template-rows: 24px 1fr;
   width: 100%;
   height: 100%;
   overflow: hidden;

pages/post.vue

@@ -26,7 +26,7 @@ window.ipc?.on("post:reaction", (_, payload) => {
 </script>
 
 <template>
-  <NuxtLayout name="columns" class="post-page">
+  <NuxtLayout name="with-header">
     <WindowHeader windowType="post" />
     <NuxtPage :data="pagedata" />
   </NuxtLayout>

pages/post/reaction.vue

@@ -79,6 +79,10 @@ window.ipc?.on("post:reaction", () => {
 });
 
 onMounted(() => {
+  if (!props.data.noteId) {
+    ipcSend("post:close");
+  }
+
   searchInput.value?.focus();
   search.value === "";
 });
@@ -133,8 +137,11 @@ onMounted(() => {
 <style lang="scss" scoped>
 .page {
   display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }
-
 .reaction-button {
   height: 32px;
   padding: 0;
@@ -153,7 +160,7 @@ onMounted(() => {
   flex-direction: column;
   gap: 4px;
   width: 40%;
-  height: 100vh;
+  height: 100%;
   margin: 0;
   padding: 8px;
   overflow-y: scroll;
@@ -189,7 +196,8 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   width: 60%;
-  height: 100vh;
+  height: 100%;
+  overflow-y: scroll;
 }
 .search-container {
   padding: 8px;

store/index.ts

@@ -9,8 +9,9 @@ export const methodOfChannel = {
   "misskey:socialTimeline": "misskey:getTimelineSocial",
   "misskey:globalTimeline": "misskey:getTimelineGlobal",
   "misskey:listTimeline": "misskey:getTimelineList",
-  "misskey:antennaTimeline": "misskey:getTimelineAntenna",
+  // "misskey:antennaTimeline": "misskey:getTimelineAntenna",
   "misskey:channelTimeline": "misskey:getTimelineChannel",
+  "misskey:searchTimeline": "misskey:getTimelineSearch",
 };
 
 export type TimelineStore = Timeline & {
@@ -97,10 +98,11 @@ export const useStore = defineStore({
         }),
       );
     },
-    async initMisskeyMeta() {
+    async initMisskeyMeta(instanceUrl?: string) {
       return Promise.all(
         this.$state.instances.map(async (instance) => {
           if (instance.type === "misskey") {
+            if (instanceUrl && instance.url !== instanceUrl) return instance;
             const result = await ipcInvoke("api", {
               method: "misskey:getMeta",
               instanceUrl: instance.url,

store/instance.ts

@@ -1,14 +1,17 @@
 import { ipcInvoke } from "@/utils/ipc";
-import { entities } from "misskey-js";
 import { defineStore } from "pinia";
 import { useStore } from ".";
 import { hazyMisskeyPermissionString } from "@/utils/hazy";
 
 export const useInstanceStore = defineStore("instance", () => {
   const store = useStore();
 
-  const createInstance = async (instanceUrl: string, token: string) => {
-    const meta = await fetchMisskeyMeta(instanceUrl, token);
+  const createInstance = async (instanceUrl: string) => {
+    const instances = await store.initMisskeyMeta(instanceUrl);
+    const meta = instances.find((instance) => {
+      return instance.url === instanceUrl;
+    })?.misskey?.meta;
+    if (!meta) return;
     const result = await ipcInvoke("db:upsert-instance", {
       type: "misskey",
       url: meta.uri,
@@ -25,19 +28,6 @@ export const useInstanceStore = defineStore("instance", () => {
     return instance;
   };
 
-  const fetchMisskeyMeta = async (instanceUrl: string, token: string) => {
-    const result: entities.DetailedInstanceMetadata = await ipcInvoke("api", {
-      method: "misskey:getMeta",
-      instanceUrl,
-      token,
-    }).catch(() => {
-      store.$state.errors.push({
-        message: `${instanceUrl}の詳細データを取得できませんでした`,
-      });
-    });
-    return result;
-  };
-
   const getMisskeyAuthUrl = (instanceUrl: string, sessionId: string) => {
     const url = new URL(`/miauth/${sessionId}`, instanceUrl);
     url.search = new URLSearchParams({
@@ -47,5 +37,5 @@ export const useInstanceStore = defineStore("instance", () => {
     return url.toString();
   };
 
-  return { createInstance, findInstance, fetchMisskeyMeta, getMisskeyAuthUrl };
+  return { createInstance, findInstance, getMisskeyAuthUrl };
 });