closes #29

app/package.json

@@ -1,8 +1,9 @@
 {
   "name": "app",
-  "version": "0.1.0",
+  "version": "0.0.0",
   "description": "Graphical user interface to interact with search goggles.",
   "productName": "Gearchy",
+  "homepage": "https://app.gearchy.wolf.gdn",
   "author": "David Wolf <d@wolf.gdn>",
   "private": true,
   "scripts": {

app/src/boot/auth.ts

@@ -12,7 +12,6 @@ export default boot(({ router }) => {
         Notify.create({
           message: 'Set your token to be able to access this page',
           type: 'negative',
-          timeout: 2000,
         })
       }
 

app/src/boot/notify.ts

@@ -19,6 +19,7 @@ Notify.registerType('positive', {
 Notify.registerType('negative', {
   icon: 'eva-alert-triangle-outline',
   classes: defaultClasses + ' bg-amber-900 !text-amber-200',
+  timeout: 1000 * 60,
   actions: [
     {
       icon: 'eva-close-circle-outline',

app/src/components/BreadcrumbsNavigation.vue

@@ -1,15 +1,17 @@
 <template>
   <q-breadcrumbs
-    class="font-([heading] extrabold) text-(sm gray opacity-75) tracking-widest"
+    class="font-([heading] extrabold) text-(sm gray opacity-75) tracking-wide sm:tracking-widest lt-sm:text-xs"
   >
     <template v-slot:separator>
       <span class="text-(gray opacity-50)">/</span>
     </template>
 
     <q-breadcrumbs-el to="/">
-      <div class="flex no-wrap items-center space-x-3">
+      <div class="flex items-center space-x-2 sm:space-x-3">
         <img src="../assets/logo.svg" alt="logo" width="35" />
-        <span class="text-(gray opacity-50) uppercase sm:tracking-[5px]">
+        <span
+          class="text-(gray opacity-50) uppercase tracking-widest sm:tracking-[5px]"
+        >
           Gearchy
         </span>
       </div>
@@ -19,7 +21,7 @@
       v-if="$route.name === 'goggle-edit'"
       :label="goggle.metaData?.name || 'Untitled Goggle'"
       :to="{ name: 'goggle-detail', params: { id: gist.id } }"
-      class="capitalize"
+      class="capitalize lt-sm:max-w-[200px]"
     />
   </q-breadcrumbs>
 </template>

app/src/components/GoggleActionBar.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="g-box p-4 text-gray space-y-5 sm:space-y-10 lt-md:(fixed left-0 bottom-0 w-full rounded-0)"
-  >
+  <div class="g-box p-4 text-gray space-y-5 sm:space-y-10">
     <slot name="before"></slot>
     <div class="flex justify-between">
       <div class="sm:w-2/5">

app/src/components/GoggleListItem.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { Gist } from 'stores/gist'
+import { Gist } from 'src/types'
 
 defineProps<{
   gist: Gist

app/src/components/GoggleSingleRulesList.vue

@@ -1,17 +1,19 @@
 <template>
-  <q-list class="px-6 py-4 space-y-2 font-mono">
-    <template v-for="(rule, i) in filteredRules" :key="i">
-      <q-item class="p-0">
-        <q-item-section v-if="rule.value" avatar class="w-10 text-xs">
-          {{ rule.value }}
-        </q-item-section>
-        <q-item-section>
-          <q-item-label v-if="rule.pattern">{{ rule.pattern }}</q-item-label>
-          <q-item-label v-if="rule.site" caption>{{ rule.site }}</q-item-label>
-        </q-item-section>
-      </q-item>
-    </template>
-  </q-list>
+  <q-virtual-scroll
+    :items="filteredRules"
+    v-slot="{ item }"
+    class="max-h-[30vh] md:max-h-xl px-6 py-4 space-y-2 font-mono"
+  >
+    <q-item class="p-0">
+      <q-item-section v-if="item.value" avatar class="w-10 text-xs">
+        {{ item.value }}
+      </q-item-section>
+      <q-item-section>
+        <q-item-label v-if="item.pattern">{{ item.pattern }}</q-item-label>
+        <q-item-label v-if="item.site" caption>{{ item.site }}</q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-virtual-scroll>
 </template>
 
 <script setup lang="ts">

app/src/layouts/MainLayout.vue

@@ -51,7 +51,7 @@
         </q-list>
 
         <div class="w-full space-y-20 text-(gray end) pr-8">
-          <div class="lt-sm:(flex justify-center) opacity-50">
+          <div class="lt-sm:(flex justify-center space-x-3) opacity-50">
             <template
               v-for="({ icon, href, classes }, index) in footerLinks"
               :key="index"

app/src/pages/GoggleEdit.vue

@@ -28,7 +28,12 @@
           </q-tab-panel>
         </q-tab-panels>
 
-        <goggle-action-bar context="edit" :tab="tab" @add-rule="addRuleHandler">
+        <goggle-action-bar
+          context="edit"
+          :tab="tab"
+          @add-rule="addRuleHandler"
+          class="lt-md:(fixed left-0 bottom-0 w-full rounded-0)"
+        >
           <template v-slot:after>
             <q-tabs
               v-model="tab"

app/src/pages/GoggleList.vue

@@ -28,11 +28,14 @@
       </template>
     </custom-page-header>
 
-    <template v-if="gists.length">
-      <q-infinite-scroll @load="onLoad" :offset="1" class="space-y-4">
-        <goggle-list-item v-for="(gist, i) in gists" :key="i" :gist="gist" />
-      </q-infinite-scroll>
-    </template>
+    <q-infinite-scroll
+      v-if="gists.length"
+      @load="onLoad"
+      :offset="0"
+      class="space-y-4"
+    >
+      <goggle-list-item v-for="(gist, i) in gists" :key="i" :gist="gist" />
+    </q-infinite-scroll>
   </q-page>
 </template>
 
@@ -77,6 +80,7 @@ function createGoggle() {
 }
 
 async function onLoad(index: number, done: () => void) {
+  console.log('onLoad', index)
   await fetchGists()
   done()
 }

app/src/pages/GoggleSingle.vue

@@ -35,6 +35,7 @@
                 :label="`${goggle.rules[action.key].length} ${action.key}${
                   goggle.rules[action.key].length > 1 ? 's' : ''
                 }`"
+                :group="$q.screen.lt.md ? 'goggle-rule' : undefined"
                 :icon="action.icon"
                 expand-icon="eva-plus-circle-outline"
                 expanded-icon="eva-minus-circle-outline"

app/src/pages/SettingsPage.vue

@@ -13,7 +13,7 @@
         hide-hint
         bottom-slots
         borderless
-        input-class="!text-stone-3"
+        input-class="!text-stone-3 font-mono"
       >
         <template v-slot:append>
           <div class="text-stone-5">
@@ -53,7 +53,7 @@
         type="url"
         label="Brave Submission API Proxy"
         placeholder="https://example.org/submit?url=%s"
-        input-class="!text-stone-3"
+        input-class="!text-stone-3 font-mono"
         borderless
         bottom-slots
         :error="!isValidApiUrl"

app/src/stores/brave.ts

@@ -36,7 +36,6 @@ export const useBraveStore = defineStore('brave', {
               .join(', '),
             type: 'negative',
             multiLine: data.errors.length > 1,
-            timeout: 1000 * 60 * 5,
           })
         }
       } catch (error) {

app/src/stores/gist.ts

@@ -1,10 +1,8 @@
 import { defineStore, storeToRefs } from 'pinia'
-import { components } from '@octokit/openapi-types'
 import { Notify } from 'quasar'
 import { useGitHubStore } from './github'
 import { useGoggleStore } from './goggle'
-
-type Gist = components['schemas']['base-gist']
+import { Gist } from 'src/types'
 
 const { api } = storeToRefs(useGitHubStore())
 
@@ -33,6 +31,19 @@ export const useGistStore = defineStore('gist', {
       this.pagination.pageInfo.endCursor = undefined
       this.pagination.pageInfo.hasNextPage = true
     },
+    maybeThrowOnResponse(response: unknown) {
+      if (
+        !response ||
+        typeof response !== 'object' ||
+        response.hasOwnProperty('errors')
+      ) {
+        throw new Error(
+          (response as { errors: { message: string }[] }).errors
+            .map((error) => error.message)
+            .join(', '),
+        )
+      }
+    },
     async fetchGists() {
       // setTimeout(() => {
       //   this.gists = [
@@ -61,12 +72,7 @@ export const useGistStore = defineStore('gist', {
       this.error = undefined
 
       try {
-        const {
-          viewer: {
-            gists: { pageInfo, edges },
-            login,
-          },
-        } = await api.value.graphql(
+        const response = await api.value.graphql(
           `#graphql
           query GetGists ($perPage: Int!, $after: String) {
             viewer {
@@ -101,6 +107,15 @@ export const useGistStore = defineStore('gist', {
           },
         )
 
+        this.maybeThrowOnResponse(response)
+
+        const {
+          viewer: {
+            gists: { pageInfo, edges },
+            login,
+          },
+        } = response
+
         this.login = login
         this.pagination.pageInfo = pageInfo
 
@@ -131,9 +146,7 @@ export const useGistStore = defineStore('gist', {
       this.error = undefined
       this.gist = {} as Gist
       try {
-        const {
-          viewer: { gist, login },
-        } = await api.value.graphql(
+        const response = await api.value.graphql(
           `query GetGist($name: String!) {
             viewer {
               gist(name: $name) {
@@ -152,7 +165,13 @@ export const useGistStore = defineStore('gist', {
           { name: id },
         )
 
-        if (gist === undefined) {
+        this.maybeThrowOnResponse(response)
+
+        const {
+          viewer: { gist, login },
+        } = response
+
+        if (!gist) {
           throw new Error("Gist doesn't exist")
         }
 
@@ -163,6 +182,7 @@ export const useGistStore = defineStore('gist', {
 
         this.login = login
         this.gist = gist
+
         useGoggleStore().parseGoggle()
       } catch (e) {
         this.error = e
@@ -174,18 +194,21 @@ export const useGistStore = defineStore('gist', {
     async createGist(isPublic: boolean) {
       this.isLoading = true
       this.error = undefined
-      // Reload gists list with new gist
-      this.pagination.pageInfo.hasNextPage = true
+      this.pagination.pageInfo.hasNextPage = true // Reload gists list with new gist
       this.gist = {} as Gist
       try {
         const res = await api.value.request('POST /gists', {
           public: isPublic,
           files: {
             'index.goggle': {
-              content: '!',
+              content:
+                '! This is the default template for a new Goggle created with Gearchy\n! You can edit the Goggle on https://app.gearchy.wolf.gdn',
             },
           },
         })
+        if (!res.data.html_url || !res.data.id) {
+          throw new Error('Invalid response')
+        }
         this.gist.public = false
         this.gist.url = res.data.html_url
         this.gist.id = res.data.id

app/src/types.ts

@@ -1,8 +1,11 @@
+import { components } from '@octokit/openapi-types'
 import {
   GoggleInstructionActionOptionKey,
   GoggleInstructionGenericOptionValue,
 } from 'goggledy'
 
+export type Gist = components['schemas']['base-gist']
+
 export type GoggleEditTab = 'meta' | 'code' | GoggleInstructionActionOptionKey
 
 export type GoggleActionRule = {