start work on compose box

package-lock.json

@@ -357,6 +357,11 @@
         "postcss-value-parser": "3.3.0"
       }
     },
+    "autosize": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.0.tgz",
+      "integrity": "sha1-egWZsbqE1zvXWJsNnaOHAVLGkjc="
+    },
     "aws-sign2": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",

package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@gamestdio/websocket": "^0.2.2",
     "a11y-dialog": "^4.0.1",
+    "autosize": "^4.0.0",
     "cheerio": "^1.0.0-rc.2",
     "child-process-promise": "^2.2.1",
     "chokidar": "^2.0.0",

routes/_actions/instances.js

@@ -67,6 +67,10 @@ export async function updateVerifyCredentialsForInstance (instanceName) {
   )
 }
 
+export async function updateVerifyCredentialsForCurrentInstance () {
+  await updateVerifyCredentialsForInstance(store.get('currentInstance'))
+}
+
 export async function updateInstanceInfo (instanceName) {
   await cacheFirstUpdateAfter(
     () => getInstanceInfo(instanceName),

routes/_components/compose/LiteComposeBox.html

@@ -0,0 +1,139 @@
+<div class="lite-compose-box">
+  <div class="compose-profile-current-user">
+    <Avatar account="{{verifyCredentials}}" className="compose-profile-avatar" size="small"/>
+    <a class="compose-profile-display-name" href="/accounts/{{verifyCredentials.id}}">
+      {{verifyCredentials.display_name || verifyCredentials.acct}}
+    </a>
+    <span class="compose-profile-handle">
+      {{'@' + verifyCredentials.acct}}
+    </span>
+    <textarea
+      class="compose-profile-input"
+      placeholder="What's on your mind?"
+      ref:textarea
+      bind:value=inputText
+    ></textarea>
+    <button class="primary compose-profile-button">
+      Toot!
+    </button>
+  </div>
+</div>
+<style>
+  .lite-compose-box {
+    display: grid;
+    flex-direction: row;
+  }
+  .compose-profile-current-user {
+    border-radius: 4px;
+    padding: 20px;
+    display: grid;
+    align-items: flex-start;
+    grid-template-areas:
+      "avatar display-name handle"
+      "avatar input        input"
+      "avatar button       button";
+    grid-template-columns: min-content minmax(0, max-content) 1fr;
+    grid-template-rows: min-content min-content min-content;
+    grid-row-gap: 10px;
+    border-bottom: 1px solid var(--main-border);
+    width: 560px;
+    max-width: calc(100vw - 40px);
+  }
+  :global(.compose-profile-avatar) {
+    grid-area: avatar;
+    margin-right: 15px;
+  }
+  .compose-profile-display-name {
+    color: var(--deemphasized-text-color);
+    grid-area: display-name;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 1.1em;
+    margin-left: 5px;
+    font-weight: 600;
+  }
+  .compose-profile-display-name,
+  .compose-profile-display-name:hover,
+  .compose-profile-display-name:visited {
+    color: var(--body-text-color);
+  }
+  :global(.compose-profile-handle) {
+    grid-area: handle;
+    color: var(--deemphasized-text-color);
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 1.1em;
+    margin-left: 5px;
+  }
+
+  :global(.compose-profile-input) {
+    font-size: 1.1em;
+    grid-area: input;
+    margin-left: 5px;
+    padding: 5px;
+    border: 1px solid var(--input-border);
+    min-height: 75px;
+    resize: none;
+  }
+
+  .compose-profile-button {
+    grid-area: button;
+    justify-self: right;
+    text-transform: uppercase;
+  }
+
+  @media (max-width: 767px) {
+    .compose-profile-current-user {
+      padding: 10px 10px;
+      max-width: calc(100vw - 20px);
+      width: 580px;
+    }
+    :global(.compose-profile-avatar) {
+      grid-area: avatar;
+      margin-right: 5px;
+    }
+  }
+
+</style>
+<script>
+  import Avatar from '../Avatar.html'
+  import { store } from '../../_store/store'
+  import autosize from 'autosize'
+  import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
+  import debounce from 'lodash/debounce'
+
+  export default {
+    oncreate() {
+      autosize(this.refs.textarea)
+      this.set({inputText: store.get('currentInputTextInCompose')})
+      autosize.update(this.refs.textarea)
+
+      const saveText = debounce(() => scheduleIdleTask(() => this.store.save()), 1000)
+
+      this.observe('inputText', inputText => {
+        let inputTextInCompose = this.store.get('inputTextInCompose')
+        let currentInstance = this.store.get('currentInstance')
+        inputTextInCompose[currentInstance] = inputText || ''
+        this.store.set({inputTextInCompose: inputTextInCompose})
+        saveText()
+      }, {init: false})
+    },
+    ondestroy() {
+      autosize.destroy(this.refs.textarea)
+    },
+    data: () => ({
+      inputText: ''
+    }),
+    components: {
+      Avatar
+    },
+    store: () => store,
+    computed: {
+      currentInputTextInCompose: ($currentInputTextInCompose) => $currentInputTextInCompose
+    }
+  }
+</script>

routes/_store/instanceComputations.js

@@ -101,4 +101,9 @@ export function instanceComputations (store) {
     (statusModifications, currentInstance) => {
       return statusModifications[currentInstance]
     })
+
+  store.compute('currentInputTextInCompose',
+    ['inputTextInCompose', 'currentInstance'],
+    (inputTextInCompose, currentInstance) => (inputTextInCompose[currentInstance] || '')
+  )
 }

routes/_store/store.js

@@ -13,7 +13,8 @@ const KEYS_TO_STORE_IN_LOCAL_STORAGE = new Set([
   'loggedInInstancesInOrder',
   'autoplayGifs',
   'markMediaAsSensitive',
-  'pinnedPages'
+  'pinnedPages',
+  'inputTextInCompose'
 ])
 
 class PinaforeStore extends LocalStorageStore {
@@ -37,7 +38,8 @@ export const store = new PinaforeStore({
   instanceLists: {},
   pinnedStatuses: {},
   instanceInfos: {},
-  statusModifications: {}
+  statusModifications: {},
+  inputTextInCompose: {}
 })
 
 mixins(PinaforeStore)

routes/index.html

@@ -4,9 +4,12 @@
 
 <Layout page='home'>
   {{#if $isUserLoggedIn}}
-  <LazyTimeline timeline='home' />
+    {{#if $currentVerifyCredentials}}
+      <LiteComposeBox verifyCredentials="{{$currentVerifyCredentials}}"/>
+    {{/if}}
+    <LazyTimeline timeline='home' />
   {{else}}
-  <NotLoggedInHome/>
+    <NotLoggedInHome/>
   {{/if}}
 </Layout>
 
@@ -15,6 +18,7 @@
   import Layout from './_components/Layout.html'
   import NotLoggedInHome from './_components/NotLoggedInHome.html'
   import LazyTimeline from './_components/timeline/LazyTimeline.html'
+  import LiteComposeBox from './_components/compose/LiteComposeBox.html'
   import { store } from './_store/store.js'
 
 	export default {
@@ -22,7 +26,8 @@
 		components: {
 		  Layout,
       LazyTimeline,
-			NotLoggedInHome
+			NotLoggedInHome,
+      LiteComposeBox
 		}
 	}
 </script>

routes/settings/instances/[instanceName].html

@@ -62,6 +62,9 @@
   :global(.acct-handle) {
     grid-area: handle;
   }
+  .acct-display-name {
+    grid-area: display-name;
+  }
   .theme-chooser {
     background: var(--form-bg);
     border: 1px solid var(--main-border);

routes/settings/instances/add.html

@@ -51,7 +51,7 @@
     background-color: var(--main-bg);
   }
   input.new-instance-input {
-    min-width: 50%;
+    min-width: 60%;
     max-width: 100%;
   }
 
@@ -67,12 +67,6 @@
     display: block;
     margin: 20px 5px;
   }
-
-  @media (max-width: 767px) {
-    input.new-instance-input {
-      max-width: 80%;
-    }
-  }
 </style>
 <script>
   import Layout from '../../_components/Layout.html';

scss/global.scss

@@ -68,6 +68,7 @@ a:hover {
 input {
   border: 1px solid var(--input-border);
   padding: 5px;
+  box-sizing: border-box;
 }
 
 button {

templates/2xx.html

@@ -11,7 +11,7 @@
 	<style>
 /* auto-generated w/ build-sass.js */
 body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#90a8ee;--action-button-fill-color-hover:#a2b6f0;--action-button-fill-color-active:#577ae4;--action-button-fill-color-pressed:#2351dc;--action-button-fill-color-pressed-hover:#3862e0;--action-button-fill-color-pressed-active:#1d44b8;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#c5d1f6;--very-deemphasized-link-color:rgba(65,105,225,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#d2dcf8}
-body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.4;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;will-change:transform;position:absolute;top:72px;left:0;right:0;bottom:0}@media (max-width: 767px){.container{top:62px}}main{position:relative;width:602px;max-width:100vw;padding:0;box-sizing:border-box;margin:30px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}*:focus{outline:2px solid var(--focus-outline)}button::-moz-focus-inner{border:0}input:required,input:invalid{box-shadow:none}
+body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.4;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;will-change:transform;position:absolute;top:72px;left:0;right:0;bottom:0}@media (max-width: 767px){.container{top:62px}}main{position:relative;width:602px;max-width:100vw;padding:0;box-sizing:border-box;margin:30px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px;box-sizing:border-box}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}*:focus{outline:2px solid var(--focus-outline)}button::-moz-focus-inner{border:0}input:required,input:invalid{box-shadow:none}
 body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline,body.theme-gecko.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#737373;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#bfbfbf;--very-deemphasized-link-color:rgba(153,153,153,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#ededed}
 
 </style>