.babelrc

 {
   "presets": ["es2015", "stage-2"],
-  "plugins": ["transform-runtime"],
+  "plugins": ["transform-runtime", "lodash"],
   "comments": false
 }

.gitignore

@@ -5,3 +5,4 @@ npm-debug.log
 test/unit/coverage
 test/e2e/reports
 selenium-debug.log
+.idea/

.gitlab-ci.yml

+# This file is a template, and might need editing before it works on your project.
+# Official framework image. Look for the different tagged releases at:
+# https://hub.docker.com/r/library/node/tags/
+image: node:7
+
+before_script:
+  # Install ssh-agent if not already installed, it is required by Docker.
+  # (change apt-get to yum if you use a CentOS-based image)
+  - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'
+
+  # Run ssh-agent (inside the build environment)
+  - eval $(ssh-agent -s)
+
+  # For Docker builds disable host key checking. Be aware that by adding that
+  # you are suspectible to man-in-the-middle attacks.
+  # WARNING: Use this only with the Docker executor, if you use it with shell
+  # you will overwrite your user's SSH config.
+  - mkdir -p ~/.ssh
+  - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
+
+# This folder is cached between builds
+# http://docs.gitlab.com/ce/ci/yaml/README.html#cache
+#cache:
+#  paths:
+#  - node_modules/
+
+stages:
+  - lint
+  - build
+  - test
+  - deploy
+
+lint:
+  stage: lint
+  script:
+    - yarn
+    - npm run lint
+
+test:
+  stage: test
+  script:
+    - yarn
+    - npm run unit
+
+build:
+  stage: build
+  script:
+    - yarn
+    - npm run build
+  artifacts:
+    paths:
+    - dist/
+
+deploy:
+  stage: deploy
+  environment: dev
+  only:
+    - develop
+  script:
+    - yarn
+    - npm run build
+    - ssh-add <(echo "$SSH_PRIVATE_KEY")
+    - scp -r dist/* pleroma@tenshi.heldscal.la:~/pleroma

.node-version

+7.2.1

CHANGELOG

+## 2017-02-20
+
+- Overall CSS styling fixes
+- Current theme is displayed in theme selector
+- Theme selector is moved to the settings page
+- Oembed attachments will now display correctly
+- Styling changes to the user info cards
+- Notification count in title
+- Better Notification handling (persistance, mark as read)
+- Post statuses with ctrl+enter
+- Links in statuses open in a new tab
+- Optimized mobile view
+- Fix crash on persistance failure
+- Compress persisted state
+- Sync mutes with backend (SEE NOTE BELOW)
+
+Pleroma will now try to get the current mutes from the backend. Sadly, a bug in
+Qvitter will not allow getting the mutes from the endpoint, because it will
+ignore HTTP Basic authentication. Mutes will still persist in Pleroma through
+localstorage, but the mutes from Qvitter won't be picked up if the call fails.
+
+The patch for Qvitter:
+
+--- a/actions/apiqvittermutes.php
++++ b/actions/apiqvittermutes.php
+@@ -74,7 +74,7 @@ class ApiQvitterMutesAction extends ApiPrivateAuthAction
+     {
+         parent::handle();
+
+-        $this->target = Profile::current();
++        $this->target = $this->scoped;
+
+                if(!$this->target instanceof Profile) {
+                        $this->clientError(_('You have to be logged in to view your mutes.'), 403);
+

COFE_OF_CONDUCT.md

+```
+                                    o$$$$$$oo
+                                 o$"        "$oo
+                                 $   o""""$o  "$o
+                                "$  o  "o  "o   $
+                                "$   $o $   $   o$
+                                 "$       o$"$  o$
+                                  "$ooooo$$  $  o$
+                        o$ """ $     " $$$   "  $
+                      o$        $o    $$"   "   "
+                     $$  $ " $   $$$o"$    o  o$"
+                     $"  o "" $   $" "   o"  $$
+                     $o  " "  $  o$"   o"  o$"
+                      "$o    $$  $   o"  o$$"
+                       ""o$o"$"  $oo"  o$"
+                        o$$ $   $$$  o$$
+                        o" o oo""  "" "$o
+                       o$o" ""          $
+                      $" " o"   " " "   "o
+                     $$ "  "  o$ o$o "   $
+                    o$ $  $  o$$ "  "   ""
+                    o  $ $"  " "o      o$
+                    $ o         $o$oo$""
+                   $o $   o  o  o"$$
+                   $o  o  $  $    "$o
+                   $o  $   o  $  $ "o
+                    $  $   "o  $  "o"$o
+                    $   "   o   $   o $$
+            $o$o$o$o$$o$$$o$$o$o$$o$$o$$$o$o$o$o$o$o$o$o$o$ooo
+            $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$o
+            $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$   " $$$$$
+            $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$      "$$$$
+            $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$       $$$$
+            $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$       $$$$
+            $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$       $$$$
+            $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$     o$$$$"
+            $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ooooo$$$$
+            $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$"
+            $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$"""""
+            $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
+            $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
+            $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
+            $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
+            $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$"
+"$o$o$o$o$o$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$"
+  "$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$"
+    "$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$"""
+       """""""""""""""""""""""""""""""""""""""""""""""""""""
+```
\ No newline at end of file

CONTRIBUTORS.md

+Contributors of this project.
+
+- Constance Variable (lambadalambda@social.heldscal.la): Code
+- Coco Snuss (cocosnuss@social.heldscal.la): Code
+- wakarimasen (wakarimasen@shitposter.club): NSFW hiding image
+- dtluna (dtluna@social.heldscal.la): Code
+- sonyam (sonyam@social.heldscal.la): Default background image
+- hakui (hakui@freezepeach.xyz): CSS and styling
+- shpuld (shpuld@shitposter.club): CSS and styling
\ No newline at end of file

README.md

 # pleroma_fe
 
-> A Qvitter-style frontend for certain GS servers.
+> A single column frontend for both Pleroma and GS servers.
+
+![screenshot](https://i.imgur.com/DJVqSJ0.png)
+
+# For Translators
+
+To translate Pleroma, add your language to i18n/messages.js. Pleroma will set your language by your browser locale, but you can temporarily force it in the code by changing the locale in main.js.
+
+# FOR ADMINS
+
+You don't need to build Pleroma yourself. Check out https://git.pleroma.social/pleroma/pleroma-fe/wikis/dual-boot-with-qvitter to see how to run Pleroma and Qvitter at the same time.
 
 ## Build Setup
 
 ``` bash
 # install dependencies
-npm install
+npm install -g yarn
+yarn
 
 # serve with hot reload at localhost:8080
 npm run dev
@@ -16,12 +27,6 @@ npm run build
 
 # run unit tests
 npm run unit
-
-# run e2e tests
-npm run e2e
-
-# run all tests
-npm test
 ```
 
 For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

build/webpack.base.conf.js

@@ -23,7 +23,7 @@ module.exports = {
     extensions: ['', '.js', '.vue'],
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {
-      'vue$': 'vue/dist/vue',
+      'vue$': 'vue/dist/vue.runtime.common',
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../src/assets'),
       'components': path.resolve(__dirname, '../src/components')
@@ -33,6 +33,7 @@ module.exports = {
     fallback: [path.join(__dirname, '../node_modules')]
   },
   module: {
+    noParse: /node_modules\/localforage\/dist\/localforage.js/,
     preLoaders: [
       {
         test: /\.vue$/,
@@ -56,7 +57,7 @@ module.exports = {
         test: /\.js$/,
         loader: 'babel',
         include: projectRoot,
-        exclude: /node_modules/
+        exclude: /node_modules\/(?!tributejs)/
       },
       {
         test: /\.json$/,

config/index.js

@@ -23,9 +23,15 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        target: 'https://social.heldscal.la/',
+        target: 'htts://localhost:4000/',
         changeOrigin: true,
         cookieDomainRewrite: 'localhost'
+      },
+      '/socket': {
+        target: 'htts://localhost:4000/',
+        changeOrigin: true,
+        cookieDomainRewrite: 'localhost',
+        ws: true
       }
     },
     // CSS Sourcemaps off by default because relative paths are "buggy"

index.html

 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Pleroma</title>
     <link rel="stylesheet" href="/static/font/css/fontello.css">
     <link rel="stylesheet" href="/static/font/css/animation.css">
   </head>
-  <body>
+  <body style="display: none">
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>

package.json

@@ -8,20 +8,29 @@
     "dev": "node build/dev-server.js",
     "build": "node build/build.js",
     "unit": "karma start test/unit/karma.conf.js --single-run",
+    "unit:watch": "karma start test/unit/karma.conf.js --single-run=false",
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit && npm run e2e",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-lodash": "^3.2.11",
     "diff": "^3.0.1",
     "karma-mocha-reporter": "^2.2.1",
-    "moment": "^2.15.2",
+    "localforage": "^1.5.0",
     "node-sass": "^3.10.1",
+    "object-path": "^0.11.3",
+    "phoenix": "^1.3.0",
     "sanitize-html": "^1.13.0",
     "sass-loader": "^4.0.2",
-    "vue": "^2.0.1",
-    "vue-router": "^2.0.1",
-    "vuex": "^2.0.0"
+    "vue": "^2.3.4",
+    "vue-i18n": "^7.3.2",
+    "vue-router": "^2.5.3",
+    "vue-template-compiler": "^2.3.4",
+    "vue-timeago": "^3.1.2",
+    "vuex": "^2.3.1",
+    "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
     "autoprefixer": "^6.4.0",
@@ -77,8 +86,8 @@
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
-    "vue-loader": "^9.4.0",
-    "vue-style-loader": "^1.0.0",
+    "vue-loader": "^11.1.0",
+    "vue-style-loader": "^2.0.0",
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.8.3",
     "webpack-hot-middleware": "^2.12.2",

src/App.js

 import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
+import Notifications from './components/notifications/notifications.vue'
+import UserFinder from './components/user_finder/user_finder.vue'
 
 export default {
   name: 'app',
   components: {
     UserPanel,
-    NavPanel
+    NavPanel,
+    Notifications,
+    UserFinder
   },
+  data: () => ({
+    mobileActivePanel: 'timeline'
+  }),
   computed: {
-    user () { return this.$store.state.users.currentUser || {} },
-    style () { return { 'background-image': `url(${this.user.background_image})` } }
+    currentUser () { return this.$store.state.users.currentUser },
+    background () {
+      return this.currentUser.background_image || this.$store.state.config.background
+    },
+    logoStyle () { return { 'background-image': `url(${this.$store.state.config.logo})` } },
+    style () { return { 'background-image': `url(${this.background})` } },
+    sitename () { return this.$store.state.config.name }
+  },
+  methods: {
+    activatePanel (panelName) {
+      this.mobileActivePanel = panelName
+    },
+    scrollToTop () {
+      window.scrollTo(0, 0)
+    },
+    logout () {
+      this.$store.dispatch('logout')
+    }
   }
 }

src/App.scss

 @import './_variables.scss';
 #app {
-    background-color: $main-color;
     background-size: cover;
     background-attachment: fixed;
     background-repeat: no-repeat;
@@ -8,12 +7,22 @@
     min-height: 100vh;
 }
 
+i {
+  user-select: none;
+}
+
 h4 {
     margin: 0;
 }
 
 #content {
-    padding-top: 60px;
+  box-sizing: border-box;
+  padding-top: 60px;
+  margin: auto;
+  min-height: 100vh;
+  max-width: 980px;
+  background-color: rgba(0,0,0,0.15);
+  align-content: flex-start;
 }
 
 .text-center {
@@ -28,7 +37,27 @@ body {
 
 a {
     text-decoration: none;
-    color: $main-color;
+}
+
+button{
+    user-select: none;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 0px 2px black;
+    font-size: 14px;
+    font-family: sans-serif;
+
+    &:hover {
+        box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
 }
 
 .container {
@@ -44,6 +73,14 @@ a {
 
 .item {
     flex: 1;
+    line-height: 21px;
+    height: 21px;
+    overflow: hidden;
+
+    .nav-icon {
+      font-size: 1.1em;
+      margin-left: 0.4em;
+    }
 }
 
 .gaps > .item {
@@ -55,55 +92,29 @@ a {
 }
 
 nav {
-    background: black;
     width: 100%;
     align-items: center;
     position: fixed;
     height: 50px;
 
-}
-
-sidebar {
-    flex: 1;
-    flex-basis: 300px;
+    .inner-nav {
+        padding-left: 20px;
+        padding-right: 20px;
+        display: flex;
+        align-items: center;
+        flex-basis: 970px;
+        margin: auto;
+        height: 50px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+    }
 }
 
 main-router {
     flex: 1;
 }
 
-.status:hover {
-    background-color: $darkened-background;
-}
-
-/* The starting CSS styles for the enter animation */
-status.ng-enter {
-    transition:0.5s linear all;
-    opacity:0;
-}
-
-/* The finishing CSS styles for the enter animation */
-status.ng-enter.ng-enter-active {
-    opacity:1;
-}
-
-.new-status-notification {
-    font-size: 1.1em;
-    background-color: $darkened-background;
-    border-bottom-color: darken($darkened-background, 5%);
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
-
-    &:hover {
-        background-color: darken($darkened-background, 5%);
-    }
-
-    p {
-        margin: 0px;
-        padding: 10px;
-    }
-}
-
 .status.compact {
     color: rgba(0, 0, 0, 0.42);
     font-weight: 300;
@@ -119,171 +130,143 @@ status.ng-enter.ng-enter-active {
 .panel {
     display: flex;
     flex-direction: column;
-    background-color: $main-background;
     margin: 0.5em;
 
-    border-radius: 0.5em;
+    border-radius: 10px;
+    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+    overflow: hidden;
+}
+
+.panel-body:empty::before {
+    content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
+    display: block;
+    margin: 1em;
+    text-align: center;
 }
 
 .panel-heading {
-    border-radius: 0.5em 0.5em 0 0;
+    border-radius: 10px 10px 0 0;
     background-size: cover;
-    background-color: bisque;
-    padding-top: 0.3em;
-    padding-bottom: 0.3em;
-    text-align: center;
+    padding: 0.6em 1.0em;
+    text-align: left;
     font-size: 1.3em;
+    line-height: 24px;
 }
 
 .panel-footer {
-    background-color: bisque;
-    border-radius: 0 0 0.5em 0.5em;
+    border-radius: 0 0 10px 10px;
 }
 
 .panel-body > p {
-    margin: 1em;
-}
-
-
-.media-body {
-    flex: 1
+	line-height: 18px;
+    padding: 1em;
+    margin: 0;
 }
 
-#content {
-    margin: auto;
-    max-width: 920px;
+.container > * {
+    min-width: 0px;
 }
 
-.media-left {
-    width: 10% !important;
+.fa {
+    color: grey;
 }
 
-.media-body {
-    flex: 1;
-    padding-left: 0.3em;
+nav {
+    z-index: 1000;
+    box-shadow: 0px 0px 4px rgba(0,0,0,.6);
 }
 
-.status .avatar {
-    width: 48px;
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .2s
 }
-
-.status.compact .avatar {
-    width: 32px;
+.fade-enter, .fade-leave-active {
+  opacity: 0
 }
 
-.status {
-    padding: 0.5em;
-    padding-right: 1em;
-    border-bottom: 1px solid silver;
+.main {
+    flex-basis: 60%;
+    flex-grow: 1;
+    flex-shrink: 1;
 }
 
-.status-el:last-child .status {
-    border: none
+.sidebar-bounds {
+  flex: 0;
+  flex-basis: 35%;
 }
 
-[ng-click] {
-    cursor: pointer;
+.sidebar-flexer {
+  flex: 1;
+  flex-basis: 345px;
+  width: 365px;
 }
 
-.status-el p {
-    margin: 0;
-    margin-top: 0.2em;
-    margin-bottom: 0.5em;
+.mobile-shown {
+    display: none;
 }
 
-.user-info {
-    padding: 1em;
-    img {
-        border: 3px solid;
-        border-radius: 0.5em
-    }
-
-    .user-screen-name {
-        font-weight: lighter;
+.panel-switcher {
+    display: none;
+    width: 100%;
+    height: 46px;
+    button {
+        display: block;
+        flex: 1;
+        max-height: 32px;
+        margin: 0.5em;
+        padding: 0.5em;
     }
 }
 
-.user-counts {
-    display: flex;
-    padding: 1em 1em 0em 1em;
-}
-
-.user-count {
-    flex: 1;
-
-    h5 {
-        font-weight: lighter;
-        margin: 0;
-    }
-
-    span {
-        color: $main-color;
+@media all and (min-width: 960px) {
+  body {
+    overflow-y: scroll;
+  }
+  .sidebar-bounds {
+    overflow: hidden;
+    max-height: 100vh;
+    width: 345px;
+    position: fixed;
+    margin-top: -10px;
+
+    .sidebar-scroller {
+      height: 96vh;
+      width: 365px;
+      padding-top: 10px;
+      padding-right: 50px;
+      overflow-x: hidden;
+      overflow-y: scroll;
     }
-}
 
-.fa {
-    color: grey;
-}
-
-
-.status-actions {
-    width: 50%;
-    display: flex;
-
-    div, favorite-button {
-        flex: 1;
+    .sidebar {
+      width: 345px;
     }
+  }
+  .sidebar-flexer {
+    max-height: 96vh;
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
 }
 
-status-text-container {
-    display: block;
-}
-
-attention {
-    color: $main-color;
-}
-
-.status-el {
-    line-height: 18px;
-
-    .notify {
-        .avatar {
-            border-width: 3px;
-            border-color: $main-color;
-            border-style: solid;
-        }
+@media all and (max-width: 959px) {
+    .mobile-hidden {
+        display: none;
     }
 
-    .media-left {
-        img {
-            margin-top: 0.2em;
-            float: right;
-            margin-right: 0.3em;
-            border-radius: 20%;
-        }
+    .panel-switcher {
+        display: flex;
     }
 
-    .retweet-info {
-        padding: 0.3em;
-
-        .media-left {
-            display: flex;
-
-            i {
-                align-self: center;
-                text-align: right;
-                flex: 1;
-                padding-right: 0.3em;
-            }
-        }
+    .container {
+        padding: 0 0 0 0;
     }
 
-    .media-heading {
-        small {
-            font-weight: lighter;
-        }
+    .panel {
+        margin: 0.5em 0 0.5em 0;
     }
 }
-nav {
-    z-index: 1000;
+
+.item.right {
+    text-align: right;
+    padding-right: 20px;
 }

src/App.vue

 <template>
-  <div id="app" v-bind:style="style">
-    <nav class='container'>
-      <div class='item'>
-        <a route-to='friends-timeline' href="#">Pleroma FE</a>
+  <div id="app" v-bind:style="style" class="base02-background">
+    <nav class='container base02-background base05' @click="scrollToTop()" id="nav">
+      <div class='inner-nav' :style="logoStyle">
+        <div class='item'>
+          <router-link :to="{ name: 'root'}">{{sitename}}</router-link>
+        </div>
+        <div class='item right'>
+          <user-finder class="nav-icon"></user-finder>
+          <router-link :to="{ name: 'settings'}"><i class="icon-cog nav-icon"></i></router-link>
+          <a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout nav-icon" :title="$t('login.logout')"></i></a>
+        </div>
       </div>
     </nav>
     <div class="container" id="content">
-      <sidebar>
-        <user-panel></user-panel>
-        <nav-panel></nav-panel>
-      </sidebar>
-      <router-view></router-view>
+      <div class="panel-switcher">
+        <button @click="activatePanel('sidebar')" class="base02-background base05">Sidebar</button>
+        <button @click="activatePanel('timeline')" class="base02-background base05">Timeline</button>
+      </div>
+      <div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}">
+        <div class="sidebar-bounds">
+          <div class="sidebar-scroller">
+            <div class="sidebar">
+              <user-panel></user-panel>
+              <nav-panel></nav-panel>
+              <notifications v-if="currentUser"></notifications>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="main" :class="{ 'mobile-hidden': mobileActivePanel != 'timeline' }">
+        <transition name="fade">
+          <router-view></router-view>
+        </transition>
+      </div>
     </div>
   </div>
 </template>

src/_variables.scss

@@ -3,4 +3,5 @@ $main-background: white;
 $darkened-background: whitesmoke;
 $green: #0fa00f;
 $blue: #0095ff;
+$red: #ff0000;
 

src/components/attachment/attachment.js

-import nsfwImage from '../../assets/nsfw.jpg'
+import nsfwImage from '../../assets/nsfw.png'
+import fileTypeService from '../../services/file_type/file_type.service.js'
 
 const Attachment = {
   props: [
@@ -6,29 +7,43 @@ const Attachment = {
     'nsfw',
     'statusId'
   ],
-  data: () => ({ nsfwImage }),
+  data () {
+    return {
+      nsfwImage,
+      hideNsfwLocal: this.$store.state.config.hideNsfw,
+      showHidden: false,
+      loading: false,
+      img: document.createElement('img')
+    }
+  },
   computed: {
     type () {
-      let type = 'unknown'
-
-      if (this.attachment.mimetype.match(/text\/html/)) {
-        type = 'html'
-      }
-
-      if (this.attachment.mimetype.match(/image/)) {
-        type = 'image'
-      }
-
-      if (this.attachment.mimetype.match(/video\/(webm|mp4)/)) {
-        type = 'video'
-      };
-
-      return type
+      return fileTypeService.fileType(this.attachment.mimetype)
+    },
+    hidden () {
+      return this.nsfw && this.hideNsfwLocal && !this.showHidden
+    },
+    isEmpty () {
+      return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
     }
   },
   methods: {
-    showNsfw () {
-      this.$store.commit('setNsfw', { id: this.statusId, nsfw: false })
+    linkClicked ({target}) {
+      if (target.tagName === 'A') {
+        window.open(target.href, '_blank')
+      }
+    },
+    toggleHidden () {
+      if (this.img.onload) {
+        this.img.onload()
+      } else {
+        this.loading = true
+        this.img.src = this.attachment.url
+        this.img.onload = () => {
+          this.loading = false
+          this.showHidden = !this.showHidden
+        }
+      }
     }
   }
 }