Prepare to deploy new UI (#304)

Author: davidmyersdev

app.vue

@@ -11,10 +11,24 @@ export default defineComponent({
   setup() {
     const { public: { appName, appTitle } } = useConfig()
     const mq = useMq()
+    const router = useRouter()
     const { store } = useVuex()
 
     const isMounted = ref(false)
 
+    const flow = computed(() => {
+      // A param to indicate a user flow (e.g. completing sign-up or sign-in).
+      return router.currentRoute.value.query.flow
+    })
+
+    const showChangeLog = computed(() => {
+      return router.currentRoute.value.path === '/docs/new' && !router.currentRoute.value.query.ci
+    })
+
+    const ligatures = computed(() => {
+      return store.state.settings.editor.ligatures
+    })
+
     onMounted(async () => {
       isMounted.value = true
 
@@ -50,21 +64,12 @@ export default defineComponent({
     })
 
     return {
+      flow,
+      ligatures,
+      showChangeLog,
       sizes,
     }
   },
-  computed: {
-    flow() {
-      // A param to indicate a user flow (e.g. completing sign-up or sign-in).
-      return this.$route.query.flow
-    },
-    showChangeLog() {
-      return this.$route.path === '/docs/new' && !this.$route.query.ci
-    },
-    ligatures() {
-      return this.$store.state.settings.editor.ligatures
-    },
-  },
 })
 </script>
 

assets/css/tailwind.css

@@ -11,7 +11,8 @@
     --colors-primary: 59 130 246;
   }
 
-  .dark {
+  .dark,
+  [data-appearance=dark] {
     --layer-0-bg: 18 18 18;
     --layer-0-bg-hover: 39 39 42;
     --layer-0-bg-active: 39 39 42;
@@ -80,12 +81,14 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    .auto {
+    .auto,
+    [data-appearance=auto] {
       @apply dark;
     }
   }
 
-  .light {
+  .light,
+  [data-appearance=light] {
     --layer-0-bg: 244 244 245;
     --layer-0-bg-hover: 228 228 231;
     --layer-0-bg-active: 228 228 231;
@@ -154,12 +157,14 @@
   }
 
   @media (prefers-color-scheme: light) {
-    .auto {
+    .auto,
+    [data-appearance=auto] {
       @apply light;
     }
   }
 
-  .custom {
+  .custom,
+  [data-appearance=custom] {
     --layer-0-bg: 10 0 31;
     --layer-0-bg-hover: 21 0 44;
     --layer-0-bg-active: 32 2 58;

components/ChangeLog.vue

@@ -1,112 +1,78 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
-import ChangeLogEntry from '#root/components/ChangeLogEntry.vue'
-import CoreLink from '~/components/CoreLink.vue'
+import { ref } from 'vue'
+import KeyboardKey from './KeyboardKey.vue'
+import KeyboardKeyCombination from './KeyboardKeyCombination.vue'
+import ChangeLogEntry from './ChangeLogEntry.vue'
+import CoreLink from './CoreLink.vue'
+import Modal from './Modal.vue'
+import { track } from '/helpers/analytics'
 
-// import Code from '#root/components/Code.vue'
-import Modal from '#root/components/Modal.vue'
-import { track } from '#helpers/analytics'
+// When updating the changelog, generate a new timestamp
+// with `Date.now()`.
+const lastUpdated = ref(1726035870403)
+const lastSeen = useLocalStorage('changelog:v1', 0, {
+  initOnMounted: true,
+})
 
+const showChangeLog = ref(false)
+const { modKey } = useDevice()
 const { public: { fathomEventCtaModalUpgrade, linkFeedback } } = useConfig()
 const { isSubscribed, user } = useSubscription()
 
-const showChangeLog = ref(false)
 const closeChangeLog = () => {
   showChangeLog.value = false
 }
+
 const trackCta = () => {
   closeChangeLog()
   track(fathomEventCtaModalUpgrade)
 }
 
-onMounted(async () => {
-  try {
-    // Make sure this timestamp is updated when new entries are added.
-    // (new Date()).toISOString()
-    const lastEntryTimestamp = '2023-10-07T18:41:43.227Z'
-    const lastClientTimestamp = localStorage.getItem('changelog:v1')
-
-    if (!lastClientTimestamp || new Date(lastEntryTimestamp) > new Date(lastClientTimestamp)) {
-      // showChangeLog.value = true
+watch(lastSeen, () => {
+  if (typeof lastSeen.value === 'string') {
+    lastSeen.value = Date.parse(lastSeen.value)
+  }
 
-      localStorage.setItem('changelog:v1', lastEntryTimestamp)
+  if (lastSeen.value) {
+    if (lastSeen.value < lastUpdated.value) {
+      showChangeLog.value = true
     }
-  } catch (error) {
-    console.warn({ error })
   }
+
+  lastSeen.value = lastUpdated.value
 })
 </script>
 
 <template>
   <Modal v-if="showChangeLog" @close="closeChangeLog">
     <template #header>
-      What's new?
+      <span class="inline-flex items-center gap-2"><Icon name="Announce" size="1em" /> Announcements</span>
     </template>
-    <div class="flex flex-col gap-12">
-      <ChangeLogEntry header="Saturday, October 7th, 2023">
-        <p><strong>We would love your feedback!</strong></p>
-        <template #items>
+    <div class="flex flex-col gap-4">
+      <ChangeLogEntry>
+        <template #header>
+          A fresh new look
+        </template>
+        <template #timestamp>
+          Tuesday, September 10th, 2024
+        </template>
+        <p>The UI has been redesigned to better prepare for future improvements.</p>
+        <ul class="flex flex-col gap-1 list-disc pl-6">
           <li>
-            We have created <CoreLink :to="linkFeedback" class="text-blue-500">
-              a feedback board
-            </CoreLink> to make it easier for you to share your ideas or feature requests with us.
+            <strong>Tabs</strong> are now in the sidebar!
           </li>
           <li>
-            No time right now? No problem! You can find a new <strong>Feedback</strong> link in the menu when you want to share your ideas.
+            A new feature called "<strong>Zen Mode</strong>" has been added to help you focus on your writing or note-taking. You can toggle it with the <KeyboardKeyCombination><KeyboardKey :text="modKey" /><KeyboardKey text="\" /></KeyboardKeyCombination> shortcut or by tapping the <Icon name="Logo" class="inline" /> logo in the top nav.
           </li>
-        </template>
+          <li>
+            Additionally, this release contains multiple bug fixes, performance enhancements, and accessibility improvements.
+          </li>
+        </ul>
+        <p>Have thoughts on what we should work on next? We would <strong>love</strong> your <CoreLink :to="linkFeedback" class="text-blue-500">feedback</CoreLink>!</p>
       </ChangeLogEntry>
-      <!-- Todo: Create a history view for older announcements. -->
-      <!-- <div v-if="false" class="flex flex-col gap-12">
-        <ChangeLogEntry header="Monday, November 14th, 2022">
-          <p>Introducing a new way to sign in.</p>
-          <template #items>
-            <li>Send yourself a <strong>magic link</strong> to sign in with your email address.</li>
-            <li>If you already have an account with a social provider, your email address will be linked to that account.</li>
-          </template>
-        </ChangeLogEntry>
-        <ChangeLogEntry header="Sunday, October 16th, 2022">
-          <p>Today's updates focus on <strong>portability</strong>.</p><p>Vendor lock-in has become commonplace, but you deserve the right to take your data with you <strong>anywhere</strong> you choose. Thanks to recent community contributions, transferring your data into or out of Octo has become much simpler.</p>
-          <template #items>
-            <li>Import plain-text Markdown files into your knowledge base, directly from App Settings.</li>
-            <li>Export your entire knowledge base as a zipped folder of plain-text Markdown files, directly from App Settings.</li>
-          </template>
-        </ChangeLogEntry>
-        <ChangeLogEntry header="Thursday, July 21st, 2022">
-          <template #items>
-            <li>Tags are now properly highlighted and support a wide array of unicode letters and marks. Additionally, when typing a new tag, suggestions will appear based on your existing tags. Press enter to use the active tag suggestion.</li>
-            <li>Direct doc references are finally here! Start typing the top-level title of another doc with the <CoreCode>[[my other doc]]</CoreCode> syntax for suggestions to appear.</li>
-          </template>
-        </ChangeLogEntry>
-        <ChangeLogEntry header="Monday, May 23rd, 2022">
-          <template #items>
-            <li>The Formatting Toolbar is here! You can toggle it per-device in App Settings.</li>
-            <li>You can now improve the readability of active docs by customizing the max-width to better fit your needs (defaults to 100 characters).</li>
-            <li>There is a new 'Auto' appearance option that will match your system theme. It is the default for new users, and you can update it for yourself in App Settings.</li>
-            <li>Formatting tokens (<CoreCode>#</CoreCode>, <CoreCode>*</CoreCode>, etc) now have better contrast with the surrounding text.</li>
-            <li>Additionally, this release includes dependency updates, performance improvements, and small bugfixes.</li>
-          </template>
-        </ChangeLogEntry>
-        <ChangeLogEntry header="Wednesday, March 30th, 2022">
-          <template #items>
-            <li>Drag-and-drop or paste files to upload and attach to the current doc (Octo Pro).</li>
-          </template>
-        </ChangeLogEntry>
-        <ChangeLogEntry header="Saturday, March 26th, 2022">
-          <template #items>
-            <li>Changelog notifications are displayed when Octo updates.</li>
-            <li>Improvements have been made to IME language support.</li>
-            <li>Regular expressions are automatically recognized by the <CoreCode>/.*/i</CoreCode> syntax in searches.</li>
-            <li>The Active Context bar has been merged into the navigation menu.</li>
-            <li>The legacy Markdown editor has been removed in favor of Ink.</li>
-            <li>The Daily Notepad page now works offline.</li>
-            <li>Vim Mode can be enabled on the Settings page.</li>
-          </template>
-        </ChangeLogEntry>
-      </div> -->
     </div>
     <template #footer>
-      <div class="flex items-center justify-end gap-2">
+      <div class="flex items-center justify-end gap-1">
         <CoreButton @click="closeChangeLog">
           Dismiss
         </CoreButton>

components/ChangeLogEntry.vue

@@ -1,13 +1,23 @@
 <script lang="ts" setup>
-const props = defineProps<{ header: string }>()
+defineProps<{ header?: string }>()
 </script>
 
 <template>
   <div class="flex flex-col gap-4">
-    <h2 class="text-xl">{{ props.header }}</h2>
+    <small v-if="$slots.timestamp" class="text-layer-muted">
+      <slot name="timestamp" />
+    </small>
+    <header class="flex flex-col gap-2">
+      <h3 v-if="$slots.header || header" class="text-2xl">
+        <strong>
+          <slot name="header">
+            <template v-if="header">
+              {{ header }}
+            </template>
+          </slot>
+        </strong>
+      </h3>
+    </header>
     <slot />
-    <ul v-if="$slots.items" class="flex flex-col gap-1 list-disc pl-4">
-      <slot name="items" />
-    </ul>
   </div>
 </template>

components/CoreCard.vue

@@ -14,7 +14,7 @@ const classes = computed(() => props.outline ? 'border border-layer' : 'bg-layer
   <component
     :is="component"
     :class="classes"
-    class="p-4 rounded"
+    class="p-2 rounded"
   >
     <slot />
   </component>

components/CoreEditorToolbar.vue

@@ -20,12 +20,12 @@ withDefaults(defineProps<{
   code: true,
   heading: true,
   image: true,
-  indent: true,
+  indent: false,
   italic: true,
   link: true,
   numberList: true,
   taskList: true,
-  unindent: true,
+  unindent: false,
   upload: false,
 })
 

components/Doc.vue

@@ -22,6 +22,7 @@ export default {
     allowDiscard: Boolean,
   },
   setup(props) {
+    const { store } = useVuex()
     const html = computed(() => {
       const rawHtml = toHtml(props.text)
 
@@ -33,23 +34,25 @@ export default {
       return rawHtml
     })
 
+    const updated = computed(() => {
+      return `Updated on ${moment(props.updatedAt).format('ddd, MMM Do, YYYY [at] h:mm A')}`
+    })
+
+    const discard = () => {
+      store.dispatch(DISCARD_DOCUMENT, { id: props.id })
+    }
+
+    const restore = () => {
+      store.dispatch(RESTORE_DOCUMENT, { id: props.id })
+    }
+
     return {
+      discard,
       html,
+      restore,
+      updated,
     }
   },
-  computed: {
-    updated() {
-      return `Updated on ${moment(this.updatedAt).format('ddd, MMM Do, YYYY [at] h:mm A')}`
-    },
-  },
-  methods: {
-    discard() {
-      this.$store.dispatch(DISCARD_DOCUMENT, { id: this.id })
-    },
-    restore() {
-      this.$store.dispatch(RESTORE_DOCUMENT, { id: this.id })
-    },
-  },
 }
 </script>