Skip to content

Commit

Permalink
feat(saved posts): add pagination, domain filtering, and brought up t…
Browse files Browse the repository at this point in the history 
…o speed with posts page
  • Loading branch information
@AlejandroAkbal
AlejandroAkbal committed Jan 12, 2024
1 parent ab918e8 commit 7e46376
Show file tree
Hide file tree
Showing 5 changed files with 614 additions and 300 deletions.
2 changes: 1 addition & 1 deletion components/layout/navigation/Sidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@
<NuxtLink
class="focus-visible:focus-outline-util hover:hover-text-util hover:hover-bg-util group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6"
exactActiveClass="bg-base-0/20 text-base-content-highlight"
href="/premium/saved-posts"
href="/premium/saved-posts/r34.app"
>
<BookmarkIcon class="h-6 w-6 shrink-0 text-primary-500" />
Saved Posts
Expand Down
4 changes: 2 additions & 2 deletions nuxt.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default defineNuxtConfig({

// All premium pages are client-side rendered
'/premium/dashboard': { ssr: false },
'/premium/saved-posts': { ssr: false },
'/premium/saved-posts/*': { ssr: false },
'/premium/tag-collections': { ssr: false },
'/premium/additional-boorus': { ssr: false },
'/premium/backup': { ssr: false },
Expand Down Expand Up @@ -201,7 +201,7 @@ export default defineNuxtConfig({
},
{
name: 'Saved Posts',
url: '/premium/saved-posts?utm_source=pwa&utm_medium=shortcut'
url: '/premium/saved-posts/r34.app?utm_source=pwa&utm_medium=shortcut'
}
]
},
Expand Down
257 changes: 126 additions & 131 deletions pages/premium/dashboard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,137 +1,132 @@
<script lang='ts' setup>
import { ArrowLeftOnRectangleIcon } from '@heroicons/vue/24/solid'
import { doesHaveOldVersionState } from '~/assets/js/BackupHelper'
const { data, signOut: _signOut } = useAuth()
const links = [
{
name: 'Saved posts',
description: 'Save posts to your device and enjoy them later',
href: '/premium/saved-posts'
},
{
name: 'Tag collections',
description: 'Create lists of tags to quickly search or filter posts',
href: '/premium/tag-collections'
},
{
name: 'Additional Boorus',
description: 'Browse posts from other Boorus',
href: '/premium/additional-boorus'
},
{
name: 'Backup & Restore',
description: 'Backup your saved posts, tag collections and settings',
href: '/premium/backup'
}
]
const doesHaveOldVersionStateData = doesHaveOldVersionState()
if (doesHaveOldVersionStateData) {
links.unshift({
name: '⚠ Migrate old data ⚠',
description: 'Migrate your old saved posts, tag collections, etc',
href: '/premium/migrate-old-data'
})
}
function signOut() {
_signOut()
window.location.reload()
}
useSeoMeta({
title: 'Premium dashboard'
})
definePageMeta({ middleware: 'auth' })
<script lang="ts" setup>
import { ArrowLeftOnRectangleIcon } from '@heroicons/vue/24/solid'
import { doesHaveOldVersionState } from '~/assets/js/BackupHelper'
const { data, signOut: _signOut } = useAuth()
const links = [
{
name: 'Saved posts',
description: 'Save posts to your device and enjoy them later',
href: '/premium/saved-posts/r34.app'
},
{
name: 'Tag collections',
description: 'Create lists of tags to quickly search or filter posts',
href: '/premium/tag-collections'
},
{
name: 'Additional Boorus',
description: 'Browse posts from other Boorus',
href: '/premium/additional-boorus'
},
{
name: 'Backup & Restore',
description: 'Backup your saved posts, tag collections and settings',
href: '/premium/backup'
}
]
const doesHaveOldVersionStateData = doesHaveOldVersionState()
if (doesHaveOldVersionStateData) {
links.unshift({
name: '⚠ Migrate old data ⚠',
description: 'Migrate your old saved posts, tag collections, etc',
href: '/premium/migrate-old-data'
})
}
function signOut() {
_signOut()
window.location.reload()
}
useSeoMeta({
title: 'Premium dashboard'
})
definePageMeta({ middleware: 'auth' })
</script>

<template>
<!-- Sign out -->
<SafeTeleport to='#navbar-actions'>
<button
class='focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util relative rounded-md p-2'
type='button'
@click='signOut'
>
<span class='sr-only'>Sign out</span>

<ArrowLeftOnRectangleIcon class='h-6 w-6 text-base-content-highlight' />
</button>
</SafeTeleport>

<main class='container mx-auto max-w-3xl flex-1 px-4 py-4 sm:px-6 lg:px-8'>
<!-- -->

<!-- Status -->
<!-- TODO: Add thank you note -->

<PageHeader>
<template #title>Premium dashboard</template>
<template #text>
<p class='truncate'>
Signed in as

<span
class='inline-flex items-center rounded-md bg-primary-400/10 px-2 py-1 text-sm font-medium text-primary-400 ring-1 ring-inset ring-primary-400/20'
>
<!-- Sign out -->
<SafeTeleport to="#navbar-actions">
<button
class="focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util relative rounded-md p-2"
type="button"
@click="signOut"
>
<span class="sr-only">Sign out</span>

<ArrowLeftOnRectangleIcon class="h-6 w-6 text-base-content-highlight" />
</button>
</SafeTeleport>

<main class="container mx-auto max-w-3xl flex-1 px-4 py-4 sm:px-6 lg:px-8">
<!-- -->

<!-- Status -->
<!-- TODO: Add thank you note -->

<PageHeader>
<template #title>Premium dashboard</template>
<template #text>
<p class="truncate">
Signed in as

<span
class="inline-flex items-center rounded-md bg-primary-400/10 px-2 py-1 text-sm font-medium text-primary-400 ring-1 ring-inset ring-primary-400/20"
>
{{ data.email }}
</span>
</p>
</template>
</PageHeader>

<!-- Links -->
<section>
<ol class='mt-6 space-y-4'>
<!-- -->

<NuxtLink
v-for='link in links'
:key='link.name'
:href='link.href'
class='hover:hover-bg-util focus-visible:focus-outline-util block w-full rounded-md border border-base-0/20 px-4 py-3'
>
<h2 class='text-lg font-bold tracking-tight text-base-content-highlight'>
{{ link.name }}
</h2>

<p class='text-sm'>
{{ link.description }}
</p>
</NuxtLink>

<!-- Feedback -->
<!-- TODO: add more distinction -->
<NuxtLink
class='hover:hover-bg-util focus-visible:focus-outline-util block max-w-[95%] rounded-md border border-base-0/20 px-4 py-3'
href='https://forms.gle/9FAZRegzJ8VAzT5F9'
target='_blank'
>
<h2 class='text-lg font-bold tracking-tight text-base-content-highlight'>
Feedback
</h2>

<p class='text-sm'>
Have a suggestion or found a bug? Let me know!
</p>
</NuxtLink>
</ol>
</section>

<!-- Manage subscription -->
<section class='absolute inset-x-0 bottom-0 w-full p-4 text-center'>
<NuxtLink
class='hover:hover-text-util focus-visible:focus-outline-util underline'
href='https://app.gumroad.com/library?query=Rule+34+App'
target='_blank'
>
Manage subscription
</NuxtLink>
</section>
</main>
</p>
</template>
</PageHeader>

<!-- Links -->
<section>
<ol class="mt-6 space-y-4">
<!-- -->

<NuxtLink
v-for="link in links"
:key="link.name"
:href="link.href"
class="hover:hover-bg-util focus-visible:focus-outline-util block w-full rounded-md border border-base-0/20 px-4 py-3"
>
<h2 class="text-lg font-bold tracking-tight text-base-content-highlight">
{{ link.name }}
</h2>

<p class="text-sm">
{{ link.description }}
</p>
</NuxtLink>

<!-- Feedback -->
<!-- TODO: add more distinction -->
<NuxtLink
class="hover:hover-bg-util focus-visible:focus-outline-util block max-w-[95%] rounded-md border border-base-0/20 px-4 py-3"
href="https://forms.gle/9FAZRegzJ8VAzT5F9"
target="_blank"
>
<h2 class="text-lg font-bold tracking-tight text-base-content-highlight">Feedback</h2>

<p class="text-sm">Have a suggestion or found a bug? Let me know!</p>
</NuxtLink>
</ol>
</section>

<!-- Manage subscription -->
<section class="absolute inset-x-0 bottom-0 w-full p-4 text-center">
<NuxtLink
class="hover:hover-text-util focus-visible:focus-outline-util underline"
href="https://app.gumroad.com/library?query=Rule+34+App"
target="_blank"
>
Manage subscription
</NuxtLink>
</section>
</main>
</template>
Loading

0 comments on commit 7e46376

Please sign in to comment.