[Add] サイドバー、ポップアップ（ダイアログ）、履歴の仮実装

FascodeNet · Dec 21, 2021 · 51f3cc3 · 51f3cc3
1 parent 99f5cef
commit 51f3cc3
Show file tree

Hide file tree

Showing 69 changed files with 1,350 additions and 362 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "flast",
   "description": "Cross-platform browser based on Chromium (Electron).",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "license": "GPL-3.0-only",
   "author": {
     "name": "Aoichaan0513",
@@ -49,11 +49,15 @@
     "color": "4.0.2",
     "deepmerge": "4.2.2",
     "electron-chrome-extensions": "3.9.0",
+    "file-type": "17.0.2",
     "filesize": "^8.0.6",
     "format-number": "3.0.0",
+    "icojs": "0.16.1",
     "image-data-uri": "2.0.1",
     "mobx": "6.3.8",
     "mobx-react-lite": "3.2.2",
+    "moment": "2.29.1",
+    "moment-timezone": "0.5.34",
     "nanoid": "3.1.30",
     "nedb": "1.8.0",
     "node-fetch": "3.1.0",

diff --git a/src/interfaces/user.ts b/src/interfaces/user.ts
@@ -3,6 +3,7 @@ export type UserType = 'normal' | 'incognito' | 'guest';
 
 export type AppearanceMode = 'system' | 'light' | 'dark';
 export type AppearanceStyle = 'top_single' | 'top_double' | 'bottom_single' | 'bottom_double' | 'left' | 'right';
+export type AppearanceSidebarState = 'tab_container' | 'bookmarks' | 'histories' | 'downloads';
 
 export type StartupPageMode = 'new_tab' | 'prev_sessions' | 'custom';
 export type HomeButtonPageMode = 'new_tab' | 'custom';
@@ -16,6 +17,10 @@ export interface UserConfig {
         mode: AppearanceMode;
         style: AppearanceStyle;
         extended_sidebar: boolean;
+        sidebar: {
+            extended: boolean;
+            state: AppearanceSidebarState;
+        }
         buttons: {
             home: boolean;
             bookmarks: boolean;
@@ -26,7 +31,7 @@ export interface UserConfig {
     pages: {
         startup: {
             mode: StartupPageMode;
-            pages: string[]
+            pages: string[];
         }
         home_button: {
             mode: HomeButtonPageMode;
@@ -50,6 +55,10 @@ export const DefaultUserConfig: UserConfig = {
         mode: 'system',
         style: 'top_single',
         extended_sidebar: false,
+        sidebar: {
+            extended: false,
+            state: 'tab_container'
+        },
         buttons: {
             home: false,
             bookmarks: false,
@@ -82,16 +91,24 @@ export const DefaultUserConfig: UserConfig = {
 export const isHorizontal = (style: AppearanceStyle) => !isVertical(style);
 export const isVertical = (style: AppearanceStyle) => style === 'left' || style === 'right';
 
-export interface DefaultData {
-    _id: string;
-    updatedAt: string;
-    createdAt: string;
+interface IData {
+    _id?: string;
+    updatedAt?: Date;
+    createdAt?: Date;
 }
 
-export interface HistoryOption {
-    title: string;
-    url: string;
+export type BookmarkType = 'folder' | 'item';
+
+export interface IBookmark extends IData {
+    title?: string;
+    url?: string;
+    favicon?: string;
+    isFolder?: boolean;
+    parent?: string;
 }
 
-export interface History extends DefaultData, HistoryOption {
+export interface IHistory extends IData {
+    title?: string;
+    url?: string;
+    favicon?: string;
 }
diff --git a/src/interfaces/view.ts b/src/interfaces/view.ts
@@ -4,12 +4,6 @@ export interface AppViewInitializerOptions {
     active: boolean;
 }
 
-export const DefaultAppViewInitializerOptions: AppViewInitializerOptions = {
-    url: 'https://www.google.com',
-    incognito: false,
-    active: true
-};
-
 export const ZoomLevels: ZoomLevel[] = [.25, .33, .50, .67, .75, .80, .90, 1.00, 1.10, 1.25, 1.50, 1.75, 2.00, 2.50, 3.00, 4.00, 5.00];
 export type ZoomLevel =
     .25
@@ -30,9 +24,9 @@ export type ZoomLevel =
     | 4.00
     | 5.00;
 
-export type MoveDirection = 'start' | 'end'
+export type MoveDirection = 'start' | 'end';
 
-export type MediaStatus = 'audio' | 'movie' | 'muted' | 'none'
+export type MediaStatus = 'audio' | 'movie' | 'muted' | 'none';
 
 export interface ViewState {
     id: number;

diff --git a/src/interfaces/window.ts b/src/interfaces/window.ts
diff --git a/src/interfaces/config.ts → src/main/interfaces/config.ts b/src/interfaces/config.ts → src/main/interfaces/config.ts
diff --git a/src/main/user/interfaces.ts → src/main/interfaces/user.ts b/src/main/user/interfaces.ts → src/main/interfaces/user.ts
@@ -1,7 +1,8 @@
 import { Extension, Session as ElectronSession } from 'electron';
 import { ElectronChromeExtensions } from 'electron-chrome-extensions';
 import Datastore from 'nedb';
-import { UserConfig, UserType } from '../../interfaces/user';
+import { IBookmark, IHistory, UserConfig, UserType } from '../../interfaces/user';
+import { DeepPartial } from '../../utils';
 
 export interface IUser {
 
@@ -46,21 +47,35 @@ export interface ISettings {
 
     get config(): UserConfig;
 
-    set config(data: UserConfig | any);
+    set config(data: DeepPartial<UserConfig>);
 }
 
 export interface IBookmarks {
 
     readonly user: IUser;
 
     get datastore(): Datastore;
+
+    get bookmarks(): IBookmark[];
+
+    get folders(): IBookmark[];
+
+    add(data: IBookmark): void;
+
+    remove(id: string): void;
 }
 
 export interface IHistories {
 
     readonly user: IUser;
 
     get datastore(): Datastore;
+
+    get histories(): IHistory[];
+
+    add(data: IHistory): void;
+
+    remove(id: string): void;
 }
 
 export interface IDownloads {

diff --git a/src/main/interfaces/window.ts b/src/main/interfaces/window.ts
@@ -0,0 +1,4 @@
+export interface AppWindowInitializerOptions {
+    urls: string[];
+    active: boolean;
+}
diff --git a/src/main/main.ts b/src/main/main.ts
@@ -6,6 +6,7 @@ import { UserConfig } from '../interfaces/user';
 import { APPLICATION_PROTOCOL } from '../utils';
 import { IS_DEVELOPMENT, IS_MAC, IS_WINDOWS } from '../utils/process';
 import { isURL, prefixHttp } from '../utils/url';
+import { DialogManager } from './manager/dialog';
 import { FaviconManager } from './manager/favicon';
 import { UserManager } from './manager/user';
 import { WindowManager } from './manager/window';
@@ -23,9 +24,10 @@ class App {
 
     public userManager = new UserManager();
     public windowManager = new WindowManager();
+    public dialogManager = new DialogManager();
     public faviconManager = new FaviconManager();
 
-    constructor() {
+    public constructor() {
         App.setProtocols();
         App.setTasks();
 
@@ -72,6 +74,7 @@ class App {
             windows.forEach((window) => {
                 window.webContents.send('settings-update', settings.config);
                 window.viewManager.get()?.setBounds();
+                window.setStyle();
             });
         });
 
@@ -109,6 +112,13 @@ class App {
             }
         });
 
+        nativeTheme.on('updated', () => {
+            this.windowManager.getWindows().forEach((window) => {
+                window.viewManager.get()?.setBounds();
+                window.setStyle();
+            });
+        });
+
 
         ipcMain.on('get-webcontents-id', (e) => {
             e.returnValue = e.sender.id;

diff --git a/src/main/manager/favicon.ts b/src/main/manager/favicon.ts
@@ -1,16 +1,20 @@
 import { app } from 'electron';
+import { fileTypeFromBuffer } from 'file-type';
+import * as icojs from 'icojs';
 import Datastore from 'nedb';
 import { join } from 'path';
 import { Favicon } from '../../interfaces/view';
+import { requestURL } from '../../utils/network';
 import { prefixHttp } from '../../utils/url';
+import { Main } from '../main';
 
 export class FaviconManager {
 
     private _datastore: Datastore<Favicon>;
 
     private _favicons: Favicon[];
 
-    constructor() {
+    public constructor() {
         this._datastore = new Datastore<Favicon>({
             filename: join(app.getPath('userData'), 'favicons.db'),
             autoload: true,
@@ -24,22 +28,34 @@ export class FaviconManager {
         return this._datastore;
     }
 
-    public get(u: string) {
-        const urlString = FaviconManager.toUrl(u);
+    public get favicons() {
+        return this._favicons;
+    }
+
+    public static async getFavicon(url: string, faviconUrl: string) {
+        const urlString = FaviconManager.toUrl(url);
         if (!urlString)
-            return Promise.reject('Data not found!');
+            return Promise.reject('Invalid URL!');
 
-        const data = this._favicons.find(({ url }) => url === urlString);
-        if (data)
-            return Promise.resolve(data);
+        const data = Main.faviconManager.favicons.find(({ url }) => url === urlString);
+        if (!data) {
+            const res = await requestURL(faviconUrl);
 
-        this._datastore.findOne({ url: urlString } as Partial<Favicon>, (err, doc: Favicon) => {
-            if (err)
-                return Promise.reject('Data not found!');
+            if (res.statusCode === 404)
+                throw new Error('Favicon not found!');
 
-            return Promise.resolve(doc);
-        });
-    }
+            let data = Buffer.from(res.data, 'binary');
+
+            const type = await fileTypeFromBuffer(data);
+
+            if (type && type.ext === 'ico')
+                data = Buffer.from(new Uint8Array(await FaviconManager.convertIcoToPng(data)));
+
+            return `data:${(await fileTypeFromBuffer(data))!!.ext};base64,${data.toString('base64')}`;
+        } else {
+            return data.favicon;
+        }
+    };
 
     public add(data: Favicon) {
         this._favicons.push(data);
@@ -57,4 +73,25 @@ export class FaviconManager {
             return undefined;
         }
     }
+
+    private static async convertIcoToPng(icoData: Buffer) {
+        return (await icojs.parse(icoData, 'image/png'))[0].buffer;
+    }
+
+    public get(u: string) {
+        const urlString = FaviconManager.toUrl(u);
+        if (!urlString)
+            return Promise.reject('Invalid URL!');
+
+        const data = this._favicons.find(({ url }) => url === urlString);
+        if (data)
+            return Promise.resolve(data);
+
+        this._datastore.findOne({ url: urlString } as Partial<Favicon>, (err, doc: Favicon) => {
+            if (err)
+                return Promise.reject('Data not found!');
+
+            return Promise.resolve(doc);
+        });
+    }
 }
diff --git a/src/main/manager/user.ts b/src/main/manager/user.ts
@@ -2,12 +2,13 @@ import { app, ipcMain } from 'electron';
 import { readFile, rmdir, stat, writeFile } from 'fs/promises';
 import { nanoid } from 'nanoid';
 import { join } from 'path';
-import { GlobalConfig } from '../../interfaces/config';
 import { DefaultUserConfig, UserConfig } from '../../interfaces/user';
 import { getTranslate } from '../../languages/language';
+import { DeepPartial } from '../../utils';
+import { GlobalConfig } from '../interfaces/config';
+import { IUser } from '../interfaces/user';
 import { Main } from '../main';
 import { IncognitoUser } from '../user/incognito';
-import { IUser } from '../user/interfaces';
 import { NormalUser } from '../user/normal';
 
 export class UserManager {
@@ -17,7 +18,7 @@ export class UserManager {
     private _users: Map<string, IUser> = new Map<string, IUser>();
     private _lastUserId?: string;
 
-    constructor() {
+    public constructor() {
         this.setupIpc();
     }
 
@@ -137,7 +138,7 @@ export class UserManager {
         ipcMain.handle('get-user-config', (e, id: string) => {
             return this.get(id)?.settings.config ?? DefaultUserConfig;
         });
-        ipcMain.handle(`set-user-config`, (e, id: string, config: UserConfig | any) => {
+        ipcMain.handle(`set-user-config`, (e, id: string, config: DeepPartial<UserConfig>) => {
             const user = this.get(id);
             if (!user) return;
 
@@ -148,6 +149,8 @@ export class UserManager {
                 window.webContents.send('settings-update', user.settings.config);
                 window.viewManager.get()?.setBounds();
             });
+
+            return user.settings.config;
         });
     }
 }
diff --git a/src/main/manager/window.ts b/src/main/manager/window.ts
@@ -1,5 +1,5 @@
 import { nonNullable } from '../../utils/array';
-import { IUser } from '../user/interfaces';
+import { IUser } from '../interfaces/user';
 import { AppWindow } from '../windows/app';
 import { ProcessManagerWindow } from '../windows/process-manager';