From 5a55121e3aae98a5942056b722bc236fbdf9f38c Mon Sep 17 00:00:00 2001
From: Tarun Singh <taruninsa1@gmail.com>
Date: Sun, 28 Mar 2021 14:16:28 +0530
Subject: [PATCH] default screen logic

---
 src/css/style.css     |  6 ++++++
 src/index.js          | 28 +++++++++++++++++++++++++++-
 src/new-tab-page.html | 21 +++++++++++++++------
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index 9bf4592..d8e821a 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -401,6 +401,12 @@ a:not(.button):not(.url):visited {
   margin: 0.5rem 1.5rem;
 }
 
+.options-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 10px;
+}
+
 .menu-option:hover:not(.disabled) {
   background: var(--input-background);
 }
diff --git a/src/index.js b/src/index.js
index 9dfad09..7f7ad93 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,6 +13,22 @@ const showEditor = () => {
   quill.focus()
 }
 
+loadDefaultScreen = () => {
+  store.get(['defaultScreen'], (settings) => {
+    const preset = {
+      defaultScreen: localStorage.getItem('defaultScreen') || 'default',
+      ...settings
+    }
+    if (preset.defaultScreen === 'writing') {
+      $('#editor-container').classList.remove('hidden')
+      quill.focus()
+    }
+    if (preset.defaultScreen === 'default') {
+      hideEditor()
+    }
+  })
+}
+
 const hideEditor = () => {
   quill.blur()
   $('#editor-container').classList.add('hidden')
@@ -59,17 +75,19 @@ const setupSettingsDialog = () => {
   const devicesInput = $('#settings-devices-input')
   const cssTextarea = $('#settings-css-textarea')
   const doneButton = $('#settings-done-button')
+  const defaultScreenInput = $('#settings-default-screen-input')
 
   // keyboard shortcut overrides
   const writingModeShortcutInput = $('#settings-writing-mode-shortcut-input')
 
-  store.get(['theme', 'mode', 'css', 'favicons', 'timeformat', 'battery', 'connection', 'devices'], (settings) => {
+  store.get(['theme', 'mode', 'css', 'favicons', 'timeformat', 'defaultScreen', 'battery', 'connection', 'devices'], (settings) => {
     let preset = {
       mode: localStorage.getItem('mode') || 'system',
       theme: localStorage.getItem('theme') || 'smooth-dark',
       css: localStorage.getItem('css') || '',
       favicons: localStorage.getItem('favicons') || 'hide',
       timeformat: localStorage.getItem('timeformat') || '12',
+      defaultScreen: localStorage.getItem('defaultScreen') || 'default',
       battery: localStorage.getItem('battery') || 'show',
       connection: localStorage.getItem('connection') || 'show',
       devices: localStorage.getItem('devices') || 'show',
@@ -153,6 +171,12 @@ const setupSettingsDialog = () => {
     })
   })
 
+  defaultScreenInput.addEventListener('change', (ev) => {
+    store.set({ defaultScreen: ev.target.value }, () => {
+      localStorage.setItem('defaultScreen', ev.target.value)
+    })
+  })
+
   batteryInput.addEventListener('change', (ev) => {
     store.set({ battery: ev.target.checked ? 'show' : 'hide' }, () => {
       localStorage.setItem('battery', ev.target.checked ? 'show' : 'hide')
@@ -174,6 +198,7 @@ const setupSettingsDialog = () => {
 
   doneButton.addEventListener('click', () => {
     $('.overlay').classList.add('hidden')
+    loadDefaultScreen()
     $('#settings-dialog').classList.add('hidden')
     $('#settings-dialog').classList.remove('animate')
   })
@@ -510,6 +535,7 @@ refreshDate()
 loadBookmarks()
 loadSyncedTabs()
 setupSettingsDialog()
+loadDefaultScreen()
 
 // refresh the clock
 setInterval(refreshDate, 1000)
diff --git a/src/new-tab-page.html b/src/new-tab-page.html
index ffe20f7..69eeb76 100644
--- a/src/new-tab-page.html
+++ b/src/new-tab-page.html
@@ -115,12 +115,21 @@
       <div class="menu-divider" style="margin-bottom: 1rem;"></div>
       <details>
         <summary>Advanced Settings</summary>
-        <div class="input-container">
-          <label for="settings-timeformat-input">Time format</label>
-          <select id="settings-timeformat-input">
-            <option value="12">12h</option>
-            <option value="24">24h</option>
-          </select>
+        <div class="options-grid">
+          <div class="input-container">
+            <label for="settings-timeformat-input">Time format</label>
+            <select id="settings-timeformat-input">
+              <option value="12">12h</option>
+              <option value="24">24h</option>
+            </select>
+          </div>
+          <div class="input-container">
+            <label for="settings-default-screen-input">Default screen</label>
+            <select id="settings-default-screen-input">
+              <option value="default">Default</option>
+              <option value="writing">Writing</option>
+            </select>
+          </div>
         </div>
         <div class="input-container">
           <label for="settings-writing-mode-shortcut-input">Writing Mode Keyboard Shortcut</label>