Skip to content

Commit 4abfedb

Browse files
davidmyersdevdavidmyersdev
committed
Update the ChangeLog modal
1 parent 95ab001 commit 4abfedb

File tree

5 files changed

+90
-108
lines changed

5 files changed

+90
-108
lines changed

‎components/ChangeLog.vue

Lines changed: 44 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,78 @@
11
<script lang="ts" setup>
2-
import { onMounted, ref } from 'vue'
3-
import ChangeLogEntry from '#root/components/ChangeLogEntry.vue'
4-
import CoreLink from '~/components/CoreLink.vue'
2+
import { ref } from 'vue'
3+
import KeyboardKey from './KeyboardKey.vue'
4+
import KeyboardKeyCombination from './KeyboardKeyCombination.vue'
5+
import ChangeLogEntry from './ChangeLogEntry.vue'
6+
import CoreLink from './CoreLink.vue'
7+
import Modal from './Modal.vue'
8+
import { track } from '/helpers/analytics'
59
6-
// import Code from '#root/components/Code.vue'
7-
import Modal from '#root/components/Modal.vue'
8-
import { track } from '#helpers/analytics'
10+
// When updating the changelog, generate a new timestamp
11+
// with `Date.now()`.
12+
const lastUpdated = ref(1726035870403)
13+
const lastSeen = useLocalStorage('changelog:v1', 0, {
14+
initOnMounted: true,
15+
})
916
17+
const showChangeLog = ref(false)
18+
const { modKey } = useDevice()
1019
const { public: { fathomEventCtaModalUpgrade, linkFeedback } } = useConfig()
1120
const { isSubscribed, user } = useSubscription()
1221
13-
const showChangeLog = ref(false)
1422
const closeChangeLog = () => {
1523
showChangeLog.value = false
1624
}
25+
1726
const trackCta = () => {
1827
closeChangeLog()
1928
track(fathomEventCtaModalUpgrade)
2029
}
2130
22-
onMounted(async () => {
23-
try {
24-
// Make sure this timestamp is updated when new entries are added.
25-
// (new Date()).toISOString()
26-
const lastEntryTimestamp = '2023-10-07T18:41:43.227Z'
27-
const lastClientTimestamp = localStorage.getItem('changelog:v1')
28-
29-
if (!lastClientTimestamp || new Date(lastEntryTimestamp) > new Date(lastClientTimestamp)) {
30-
// showChangeLog.value = true
31+
watch(lastSeen, () => {
32+
if (typeof lastSeen.value === 'string') {
33+
lastSeen.value = Date.parse(lastSeen.value)
34+
}
3135
32-
localStorage.setItem('changelog:v1', lastEntryTimestamp)
36+
if (lastSeen.value) {
37+
if (lastSeen.value < lastUpdated.value) {
38+
showChangeLog.value = true
3339
}
34-
} catch (error) {
35-
console.warn({ error })
3640
}
41+
42+
lastSeen.value = lastUpdated.value
3743
})
3844
</script>
3945

4046
<template>
4147
<Modal v-if="showChangeLog" @close="closeChangeLog">
4248
<template #header>
43-
What's new?
49+
<span class="inline-flex items-center gap-2"><Icon name="Announce" size="1em" /> Announcements</span>
4450
</template>
45-
<div class="flex flex-col gap-12">
46-
<ChangeLogEntry header="Saturday, October 7th, 2023">
47-
<p><strong>We would love your feedback!</strong></p>
48-
<template #items>
51+
<div class="flex flex-col gap-4">
52+
<ChangeLogEntry>
53+
<template #header>
54+
A fresh new look
55+
</template>
56+
<template #timestamp>
57+
Tuesday, September 10th, 2024
58+
</template>
59+
<p>The UI has been redesigned to better prepare for future improvements.</p>
60+
<ul class="flex flex-col gap-1 list-disc pl-6">
4961
<li>
50-
We have created <CoreLink :to="linkFeedback" class="text-blue-500">
51-
a feedback board
52-
</CoreLink> to make it easier for you to share your ideas or feature requests with us.
62+
<strong>Tabs</strong> are now in the sidebar!
5363
</li>
5464
<li>
55-
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.
65+
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.
5666
</li>
57-
</template>
67+
<li>
68+
Additionally, this release contains multiple bug fixes, performance enhancements, and accessibility improvements.
69+
</li>
70+
</ul>
71+
<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>
5872
</ChangeLogEntry>
59-
<!-- Todo: Create a history view for older announcements. -->
60-
<!-- <div v-if="false" class="flex flex-col gap-12">
61-
<ChangeLogEntry header="Monday, November 14th, 2022">
62-
<p>Introducing a new way to sign in.</p>
63-
<template #items>
64-
<li>Send yourself a <strong>magic link</strong> to sign in with your email address.</li>
65-
<li>If you already have an account with a social provider, your email address will be linked to that account.</li>
66-
</template>
67-
</ChangeLogEntry>
68-
<ChangeLogEntry header="Sunday, October 16th, 2022">
69-
<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>
70-
<template #items>
71-
<li>Import plain-text Markdown files into your knowledge base, directly from App Settings.</li>
72-
<li>Export your entire knowledge base as a zipped folder of plain-text Markdown files, directly from App Settings.</li>
73-
</template>
74-
</ChangeLogEntry>
75-
<ChangeLogEntry header="Thursday, July 21st, 2022">
76-
<template #items>
77-
<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>
78-
<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>
79-
</template>
80-
</ChangeLogEntry>
81-
<ChangeLogEntry header="Monday, May 23rd, 2022">
82-
<template #items>
83-
<li>The Formatting Toolbar is here! You can toggle it per-device in App Settings.</li>
84-
<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>
85-
<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>
86-
<li>Formatting tokens (<CoreCode>#</CoreCode>, <CoreCode>*</CoreCode>, etc) now have better contrast with the surrounding text.</li>
87-
<li>Additionally, this release includes dependency updates, performance improvements, and small bugfixes.</li>
88-
</template>
89-
</ChangeLogEntry>
90-
<ChangeLogEntry header="Wednesday, March 30th, 2022">
91-
<template #items>
92-
<li>Drag-and-drop or paste files to upload and attach to the current doc (Octo Pro).</li>
93-
</template>
94-
</ChangeLogEntry>
95-
<ChangeLogEntry header="Saturday, March 26th, 2022">
96-
<template #items>
97-
<li>Changelog notifications are displayed when Octo updates.</li>
98-
<li>Improvements have been made to IME language support.</li>
99-
<li>Regular expressions are automatically recognized by the <CoreCode>/.*/i</CoreCode> syntax in searches.</li>
100-
<li>The Active Context bar has been merged into the navigation menu.</li>
101-
<li>The legacy Markdown editor has been removed in favor of Ink.</li>
102-
<li>The Daily Notepad page now works offline.</li>
103-
<li>Vim Mode can be enabled on the Settings page.</li>
104-
</template>
105-
</ChangeLogEntry>
106-
</div> -->
10773
</div>
10874
<template #footer>
109-
<div class="flex items-center justify-end gap-2">
75+
<div class="flex items-center justify-end gap-1">
11076
<CoreButton @click="closeChangeLog">
11177
Dismiss
11278
</CoreButton>

‎components/ChangeLogEntry.vue

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,23 @@
11
<script lang="ts" setup>
2-
const props = defineProps<{ header: string }>()
2+
defineProps<{ header?: string }>()
33
</script>
44

55
<template>
66
<div class="flex flex-col gap-4">
7-
<h2 class="text-xl">{{ props.header }}</h2>
7+
<small v-if="$slots.timestamp" class="text-layer-muted">
8+
<slot name="timestamp" />
9+
</small>
10+
<header class="flex flex-col gap-2">
11+
<h3 v-if="$slots.header || header" class="text-2xl">
12+
<strong>
13+
<slot name="header">
14+
<template v-if="header">
15+
{{ header }}
16+
</template>
17+
</slot>
18+
</strong>
19+
</h3>
20+
</header>
821
<slot />
9-
<ul v-if="$slots.items" class="flex flex-col gap-1 list-disc pl-4">
10-
<slot name="items" />
11-
</ul>
1222
</div>
1323
</template>

‎components/CoreCard.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const classes = computed(() => props.outline ? 'border border-layer' : 'bg-layer
1414
<component
1515
:is="component"
1616
:class="classes"
17-
class="p-4 rounded"
17+
class="p-2 rounded"
1818
>
1919
<slot />
2020
</component>

‎components/Icon.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ withDefaults(defineProps<{
2424
const icons = {
2525
Logo,
2626
Account: Tabler.IconUserCircle,
27+
Announce: Tabler.IconSpeakerphone,
2728
ArrowRight: Tabler.IconArrowRight,
2829
ArrowUp: Tabler.IconArrowUp,
2930
ArrowUpCircle: Tabler.IconCircleArrowUp,

‎components/Modal.vue

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,47 @@
1-
<script lang="ts">
2-
import { defineComponent } from 'vue'
1+
<script lang="ts" setup>
2+
import { onMounted, onUnmounted } from 'vue'
3+
import { bindGlobal, unbind } from '/src/common/keybindings'
34
4-
export default defineComponent({
5-
emits: ['close'],
6-
computed: {
7-
hasFooter() {
8-
return !!this.$slots.footer
9-
},
10-
},
11-
methods: {
12-
onClose() {
13-
this.$emit('close')
14-
},
15-
},
5+
const emit = defineEmits<{
6+
close: [],
7+
}>()
8+
9+
const onClose = () => {
10+
emit('close')
11+
}
12+
13+
onMounted(() => {
14+
bindGlobal('esc', onClose)
15+
})
16+
17+
onUnmounted(() => {
18+
unbind({ keybinding: 'esc' })
1619
})
1720
</script>
1821

1922
<template>
20-
<div class="flex items-center justify-center fixed inset-0 z-50 bg-layer bg-opacity-50">
23+
<div class="flex items-center justify-center fixed inset-0 z-50 bg-layer bg-opacity-75">
2124
<CoreLayer class="w-full max-w-2xl">
22-
<CoreCard class="overflow-hidden flex flex-col gap-8">
23-
<header class="flex items-center justify-between gap-4">
24-
<h1 class="text-2xl flex items-center justify-between">
25+
<div class="overflow-hidden flex flex-col rounded border border-layer bg-layer">
26+
<header class="flex items-center justify-between gap-4 p-2">
27+
<h2 class="text-xl flex items-center justify-between">
2528
<slot name="header" />
26-
</h1>
27-
<button class="p-2 -m-2" @click="onClose">
29+
</h2>
30+
<CoreButton class="p-1 bg-transparent" @click="onClose">
2831
<Icon name="Dismiss" />
29-
</button>
32+
</CoreButton>
3033
</header>
31-
<CoreScrollable v-slot="{ element }" class="max-h-96">
34+
<FlexDivider />
35+
<CoreScrollable v-slot="{ element }" class="max-h-96 p-2">
3236
<div :ref="element">
3337
<slot />
3438
</div>
3539
</CoreScrollable>
36-
<footer v-if="hasFooter">
40+
<FlexDivider />
41+
<footer v-if="$slots.footer" class="p-2">
3742
<slot name="footer" />
3843
</footer>
39-
</CoreCard>
44+
</div>
4045
</CoreLayer>
4146
</div>
4247
</template>

0 commit comments

Comments
 (0)