fix: tidy up bookmarks, add tests

bin/build-svg.js

@@ -15,9 +15,10 @@ async function readSvg (svg) {
   const optimized = (await svgo.optimize(content))
   const $optimized = $(optimized.data)
   const $path = $optimized.find('path, circle').removeAttr('fill')
+  const viewBox = $optimized.attr('viewBox') || `0 0 ${$optimized.attr('width')} ${$optimized.attr('height')}`
   const $symbol = $('<symbol></symbol>')
     .attr('id', svg.id)
-    .attr('viewBox', $optimized.attr('viewBox'))
+    .attr('viewBox', viewBox)
     .append($path)
   return $.xml($symbol)
 }

bin/svgs.js

@@ -55,6 +55,6 @@ module.exports = [
   { id: 'fa-info-circle', src: 'src/thirdparty/font-awesome-svg-png/white/svg/info-circle.svg' },
   { id: 'fa-crosshairs', src: 'src/thirdparty/font-awesome-svg-png/white/svg/crosshairs.svg' },
   { id: 'fa-magic', src: 'src/thirdparty/font-awesome-svg-png/white/svg/magic.svg' },
-  { id: 'fa-hashtag',  src: 'src/thirdparty/font-awesome-svg-png/white/svg/hashtag.svg' },
+  { id: 'fa-hashtag', src: 'src/thirdparty/font-awesome-svg-png/white/svg/hashtag.svg' },
-  { id: 'fa-bookmark', src: 'src/thirdparty/font-awesome-svg-png/white/svg/bookmark.svg' },
+  { id: 'fa-bookmark', src: 'src/thirdparty/font-awesome-svg-png/white/svg/bookmark.svg' }
 ]

src/routes/_components/dialog/components/StatusOptionsDialog.html

@@ -124,6 +124,11 @@ export default {
         label: 'Delete and redraft',
         icon: '#fa-pencil'
       },
+      {
+        key: 'bookmark',
+        label: bookmarkLabel,
+        icon: '#fa-bookmark'
+      },
       !isUser && {
         key: 'report',
         label: 'Report toot',
@@ -138,11 +143,6 @@ export default {
         key: 'copy',
         label: 'Copy link to toot',
         icon: '#fa-link'
-      },
-      {
-        key: 'bookmark',
-        label: bookmarkLabel,
-        icon: '#fa-bookmark'
       }
     ].filter(Boolean))
   },

src/routes/_pages/community/index.html

@@ -12,36 +12,14 @@
       </h2>
 
       <PageList label="Timelines">
-        <PageListItem href="/local"
+        {#each staticPinnables as staticPinnable, i}
-                      label="Local Timeline"
+          <PageListItem href={staticPinnable.href}
-                      icon="#fa-users"
+                        label={staticPinnable.label}
-                      pinnable="true"
+                        icon={staticPinnable.icon}
-                      pinIndex={0}
+                        pinnable="true"
-        />
+                        pinIndex={i}
-        <PageListItem href="/federated"
+          />
-                      label="Federated Timeline"
+        {/each}
-                      icon="#fa-globe"
-                      pinnable="true"
-                      pinIndex={1}
-        />
-        <PageListItem href="/favorites"
-                      label="Favorites"
-                      icon="#fa-star"
-                      pinnable="true"
-                      pinIndex={2}
-        />
-        <PageListItem href="/direct"
-                      label="Direct messages"
-                      icon="#fa-envelope"
-                      pinnable="true"
-                      pinIndex={3}
-        />
-        <PageListItem href="/bookmarks"
-          label="Bookmarks"
-          icon="#fa-bookmark"
-          pinnable="true"
-          pinIndex={4}
-        />
       </PageList>
 
       {#if listsLength}
@@ -56,7 +34,7 @@
                           label={list.title}
                           icon="#fa-bars"
                           pinnable="true"
-                          pinIndex={4 + i}
+                          pinIndex={staticPinnablesLength + i}
             />
           {/each}
         </PageList>
@@ -152,13 +130,43 @@
       RadioGroup,
       FocusRestoration
     },
+    data: () => ({
+      staticPinnables: [
+        {
+          href: '/local',
+          label: 'Local Timeline',
+          icon: '#fa-users'
+        },
+        {
+          href: '/federated',
+          label: 'Federated Timeline',
+          icon: '#fa-globe'
+        },
+        {
+          href: '/favorites',
+          label: 'Favorites',
+          icon: '#fa-star'
+        },
+        {
+          href: '/direct',
+          label: 'Direct messages',
+          icon: '#fa-envelope'
+        },
+        {
+          href: '/bookmarks',
+          label: 'Bookmarks',
+          icon: '#fa-bookmark'
+        }
+      ]
+    }),
     computed: {
       isLockedAccount: ({ $currentVerifyCredentials }) => $currentVerifyCredentials && $currentVerifyCredentials.locked,
       followRequestsLabel: ({ $hasFollowRequests, $numberOfFollowRequests }) => (
         `Follow requests${$hasFollowRequests ? ` (${$numberOfFollowRequests})` : ''}`
       ),
       listsLength: ({ $lists }) => $lists ? $lists.length : 0,
-      numPinnable: ({ listsLength }) => listsLength + 4 // 4 because of local/federated/favs/direct
+      staticPinnablesLength: ({ staticPinnables }) => staticPinnables.length,
+      numPinnable: ({ listsLength, staticPinnablesLength }) => listsLength + staticPinnablesLength
     }
   }
 </script>

src/thirdparty/font-awesome-svg-png/white/svg/bookmark.svg

@@ -1 +1,2 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792"><path d="M1420 128q23 0 44 9 33 13 52.5 41t19.5 62v1289q0 34-19.5 62t-52.5 41q-19 8-44 8-48 0-83-32l-441-424-441 424q-36 33-83 33-23 0-44-9-33-13-52.5-41t-19.5-62v-1289q0-34 19.5-62t52.5-41q21-9 44-9h1048z" fill="#fff"/></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1420 128q23 0 44 9 33 13 52.5 41t19.5 62v1289q0 34-19.5 62t-52.5 41q-19 8-44 8-48 0-83-32l-441-424-441 424q-36 33-83 33-23 0-44-9-33-13-52.5-41t-19.5-62v-1289q0-34 19.5-62t52.5-41q21-9 44-9h1048z" fill="#fff"/></svg>

tests/spec/135-bookmarks.js

@@ -0,0 +1,25 @@
+import {
+  communityNavButton, getNthStatus,
+  getNthStatusOptionsButton, homeNavButton
+} from '../utils'
+import { loginAsFoobar } from '../roles'
+import { Selector as $ } from 'testcafe'
+import { postAs } from '../serverActions'
+
+fixture`135-bookmarks.js`
+  .page`http://localhost:4002`
+
+test('Can open a report UI from a status', async t => {
+  await postAs('admin', 'hey bookmark this')
+  await loginAsFoobar(t)
+  await t
+    .hover(getNthStatus(1))
+    .click(getNthStatusOptionsButton(1))
+    .click($('.modal-dialog button').withText('Bookmark'))
+    .click(communityNavButton)
+    .click($('a').withText('Bookmarks'))
+    .expect(getNthStatus(1).innerText).contains('hey bookmark this')
+    .click(homeNavButton)
+    .click(getNthStatusOptionsButton(1))
+    .click($('.modal-dialog button').withText('Unbookmark'))
+})