nuxt化

.gitignore

@@ -27,4 +27,7 @@ dist-ssr
 token.ts
 prisma/dev.db
 prisma/dev.db-journal
-release
+release
+dist-electron
+.output
+.nuxt

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

app.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { useStorage } from "@vueuse/core";
+
+const theme = useStorage("theme", "default");
+</script>
+
+<template>
+  <div class="theme" :class="[theme]">
+    <NuxtPage />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.theme {
+  display: contents;
+}
+</style>

packages/renderer/src/styles/app.scss → assets/styles/app.scss

@@ -17,13 +17,9 @@ input {
   outline-color: #fff;
 }
 
-// for menu
 html,
 body,
-#app {
-  display: inline-flex;
-  align-items: flex-start;
-  justify-content: flex-start;
+#__nuxt {
   width: 100%;
   height: 100%;
   overflow: hidden;

packages/renderer/src/styles/reset.scss → assets/styles/reset.scss

@@ -27,7 +27,7 @@ dd {
 }
 
 html {
-  color: #333333;
+  color: #ffffff;
   font-weight: normal;
   font-size: 20px;
   font-family: "Helvetica", Arial, "Hiragino Kaku Gothic Pro", "Hiragino Sans", Meiryo, sans-serif;

packages/renderer/src/styles/theme/default.scss → assets/styles/theme/default.scss

@@ -1,4 +1,4 @@
-.theme-default {
+.theme.default {
   /* Post Body */
   --post-body--font-size: 0.6rem;
   --post-body--line-height: 0.8rem;

packages/renderer/src/components/Post.vue → components/Post.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTimelineStore } from "@/store/timeline";
-import { Post } from "@/types/Post";
+import { Post } from "@/types/post";
 import { ipcSend } from "@/utils/ipc";
 import { Icon } from "@iconify/vue";
 import { PropType, computed } from "vue";

packages/renderer/src/components/PostAttachment.vue → components/PostAttachment.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Attachment } from "@/types/Post";
+import { Attachment } from "@/types/post";
 import { ipcSend } from "@/utils/ipc";
 import { Icon } from "@iconify/vue";
 import { PropType } from "vue";

packages/renderer/src/components/Settings/ApplicationInformation.vue → components/Settings/ApplicationInformation.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import SectionTitle from "../Post/SectionTitle.vue";
 import HazyButton from "@/components/common/HazyButton.vue";
-import router from "@/router";
 import { information } from "@/store/information";
 import { ipcSend } from "@/utils/ipc";
 
+const router = useRouter();
+
 const gotoTutorial = () => {
   router.push("/main/tutorial");
   ipcSend("set-hazy-mode", { mode: "tutorial" });

packages/renderer/src/components/Settings/TimelineSettings.vue → components/Settings/TimelineSettings.vue

@@ -4,6 +4,7 @@ import { useTimelineStore } from "@/store/timeline";
 import { useUsersStore } from "@/store/users";
 import { ElOption, ElSelect } from "element-plus";
 import SectionTitle from "../Post/SectionTitle.vue";
+import HazySelect from "../common/HazySelect.vue";
 
 const channelList = [
   {
@@ -40,6 +41,16 @@ const store = useStore();
 const usersStore = useUsersStore();
 const timelineStore = useTimelineStore();
 
+const accountOptions = usersStore.users.map((user) => ({
+  label: user.name,
+  value: user.id,
+}));
+
+const timelineOptions = channelList.map((channel) => ({
+  label: channel.label,
+  value: channel.value,
+}));
+
 const onChangeUser = async (timelineId: string) => {
   const newTimeline = store.timelines.find((timeline) => timeline.id === timelineId);
   if (newTimeline) {
@@ -73,29 +84,20 @@ const updateTimeline = async (timeline: TimelineSetting) => {
           <span class="label">アカウント</span>
         </div>
         <div class="attachments form-actions">
-          <ElSelect v-model="timeline.userId" size="small" @change="onChangeUser(timeline.id)" class="select">
-            <ElOption
-              v-for="user in store.users"
-              :key="user.id"
-              :label="`${user.name}@${usersStore.findInstance(user.instanceId)?.url.replace('https://', '')}`"
-              :value="user.id"
-            />
-          </ElSelect>
+          <HazySelect placeholder="--" :options="accountOptions" @change="onChangeUser(timeline.id)" class="select" />
         </div>
       </div>
       <div class="hazy-post account indent-1">
         <div class="content">
           <span class="label">チャンネル</span>
         </div>
         <div class="attachments form-actions">
-          <ElSelect v-model="timeline.channel" size="small" @change="onChangeChannel(timeline.id)" class="select">
-            <ElOption
-              v-for="channel in channelList"
-              :key="channel.value"
-              :label="channel.label"
-              :value="channel.value"
-            />
-          </ElSelect>
+          <HazySelect
+            placeholder="--"
+            :options="timelineOptions"
+            @change="onChangeChannel(timeline.id)"
+            class="select"
+          />
         </div>
       </div>
       <div class="hazy-post account indent-1" v-if="false">

components/common/HazySelect.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Teleport } from "vue";
+import { Select, SelectContent, SelectLabel, SelectOption, SelectPositioner, SelectTrigger } from "@ark-ui/vue";
+import { useProp } from "element-plus";
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    required: true,
+  },
+  options: {
+    type: Array as PropType<{ label: string; value: string }[]>,
+    required: true,
+  },
+});
+</script>
+<template>
+  <Select>
+    <SelectTrigger>
+      <button>{{ placeholder }}</button>
+    </SelectTrigger>
+    <Teleport to="body">
+      <SelectPositioner>
+        <SelectContent>
+          <SelectOption
+            v-for="option in props.options"
+            :key="option.value"
+            :value="option.value"
+            :label="option.label"
+          />
+        </SelectContent>
+      </SelectPositioner>
+    </Teleport>
+  </Select>
+</template>

composables/hazyRoute.ts

@@ -0,0 +1,20 @@
+import { Setting } from "~/types/store";
+
+export const gotoHazyRoute = (hazyMode: Setting["hazyMode"]) => {
+  const router = useRouter();
+  switch (hazyMode) {
+    case "show":
+    case "haze":
+    case "hide":
+      router.push("/main/timeline");
+      break;
+    case "settings":
+      router.push("/main/settings");
+      break;
+    case "tutorial":
+      router.push("/main/tutorial");
+      break;
+    default:
+      break;
+  }
+};

electron-builder.config.js

@@ -2,9 +2,15 @@ const package = require("./package.json");
 
 module.exports = {
   appId: "net.nekobato.hazy",
+  asar: false,
+  directories: {
+    output: "release/${version}",
+  },
+  files: [".output/**/*", "dist-electron"],
   mac: {
     category: "public.app-category.social-networking",
-    icon: "./build/icon.icns",
+    icon: "./build/icons/mac/icon.icns",
+    artifactName: "${productName}_${version}.${ext}",
     target: ["dmg"],
     publish: [
       {
@@ -14,10 +20,20 @@ module.exports = {
       },
     ],
   },
-  asar: false,
-  directories: {
-    output: "release/${version}",
+  // win: {
+  //   target: [
+  //     {
+  //       target: "nsis",
+  //       arch: ["x64"],
+  //     },
+  //   ],
+  //   artifactName: "${productName}_${version}.${ext}",
+  // },
+  nsis: {
+    oneClick: false,
+    perMachine: false,
+    allowToChangeInstallationDirectory: true,
+    deleteAppDataOnUninstall: false,
   },
-  files: ["dist"],
   buildVersion: package.version,
 };

packages/main/db.ts → electron/db.ts

@@ -1,7 +1,7 @@
 import { safeStorage } from "electron";
 import Store from "electron-store";
 import { v4 as uuid } from "uuid";
-import { Instance, Timeline, User, Setting } from "../shared/types/Store";
+import { Instance, Timeline, User, Setting } from "@/types/store";
 
 export type StoreSchema = {
   timeline: Timeline[];

packages/main/index.ts → electron/index.ts

@@ -10,7 +10,7 @@ import { setTrayIcon } from "./tray-icon";
 import * as db from "./db";
 import { apiRequest } from "./api";
 import { autoUpdater } from "electron-updater";
-import { Setting } from "packages/shared/types/Store";
+import { Setting } from "@/types/store";
 
 // Disable GPU Acceleration for Windows 7
 if (release().startsWith("6.1")) app.disableHardwareAcceleration();

packages/preload/index.ts → electron/preload.ts

@@ -1,19 +1,6 @@
-import fs from "fs";
 import { contextBridge, ipcRenderer, IpcRendererEvent } from "electron";
-import { domReady } from "./utils";
-import { useLoading } from "./loading";
-
-const { appendLoading, removeLoading } = useLoading();
-
-(async () => {
-  await domReady();
-
-  appendLoading();
-})();
 
 // --------- Expose some API to the Renderer process. ---------
-contextBridge.exposeInMainWorld("fs", fs);
-contextBridge.exposeInMainWorld("removeLoading", removeLoading);
 contextBridge.exposeInMainWorld("ipc", {
   send(event: string, payload: any) {
     ipcRenderer.send("renderer-event", event, payload);
@@ -27,6 +14,7 @@ contextBridge.exposeInMainWorld("ipc", {
     ipcRenderer.on(event, callback);
   },
 });
+
 contextBridge.exposeInMainWorld("openUrl", (e: Event, url: string) => {
   e.preventDefault();
   ipcRenderer.send("open-url", { data: url });

electron/static.ts

@@ -0,0 +1,10 @@
+import * as path from "path";
+
+const isDev = process.env.NODE_ENV === "development";
+
+export const preloadJs = path.join(__dirname, "./preload.js");
+export const indexHtml = isDev
+  ? "http://localhost:3000/index.html"
+  : `file://${path.join(__dirname, "../renderer/index.html")}`;
+
+export const trayIcon = path.join(__dirname, "../public/images/tray_icon.png");

electron/tray-icon.ts

@@ -0,0 +1,7 @@
+import { nativeTheme, Tray } from "electron";
+import { trayIcon } from "./static";
+
+export function setTrayIcon(): Tray {
+  const tray = new Tray(trayIcon);
+  return tray;
+}

electron/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "esModuleInterop": true
+  }
+}

packages/main/windows/mainWindow.ts → electron/windows/mainWindow.ts

@@ -1,8 +1,9 @@
 import { join } from "path";
 import { BrowserWindow, screen } from "electron";
-import url from "url";
+import { format } from "url";
+import { indexHtml, preloadJs } from "../static";
 
-const pageName = "main/timeline";
+const pageName = "main";
 
 export function createMainWindow() {
   const mainWindow = new BrowserWindow({
@@ -15,7 +16,7 @@ export function createMainWindow() {
     resizable: true,
     webPreferences: {
       nodeIntegration: true,
-      preload: join(__dirname, "../preload/index.cjs"),
+      preload: preloadJs,
     },
     frame: false,
     transparent: true,
@@ -26,14 +27,14 @@ export function createMainWindow() {
   });
 
   if (process.env.NODE_ENV === "development") {
-    mainWindow.loadURL(`http://localhost:3000/index.html#/${pageName}`);
+    mainWindow.loadURL(`${indexHtml}#/${pageName}`);
     // mainWindow.webContents.openDevTools();
   } else {
     mainWindow.loadURL(
-      url.format({
+      format({
         protocol: "app",
         slashes: true,
-        pathname: join(__dirname, `../renderer/index.html#/${pageName}`),
+        pathname: `${indexHtml}#/${pageName}`,
       }),
     );
   }