Add loading state to editor and publish button & refactor code

Author: fayazara

README.md

@@ -1,8 +1,29 @@
-# Nuxt 3 Minimal Starter
+# Codeshare.app
 
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+[Codeshare.app](https://codeshare.app) A mininal code bin sharing app, I wanted a simple but powerful for devs pastebin so, I created this small tool to share code snippets
 
-## Setup
+## Stack
+
+- Nuxt 3
+- Tailwindcss
+- Nuxt UI
+- Turso Database
+- Monaco editor
+
+## Pending tasks
+
+1. Keyboard shortcuts
+2. Diff editor
+3. Refactor (lot of code repeated, didn't think it through) - make common and reuse components and composables
+4. Sharable diff editor
+
+## ENV Vars
+
+TURSO_DB_TOKEN - Database token
+
+TURSO_DB_URL - Database url
+
+## Local setup
 
 Make sure to install the dependencies:
 
@@ -71,5 +92,3 @@ yarn preview
 # bun
 bun run preview
 ```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.config.ts

@@ -12,6 +12,7 @@ export default defineAppConfig({
     button: {
       rounded:
         "rounded-lg transition-transform active:scale-x-[0.98] active:scale-y-[0.99]",
+      default: { loadingIcon: "i-lucide-loader-2" },
     },
     modal: {
       overlay: {
@@ -25,4 +26,4 @@ export default defineAppConfig({
       },
     },
   },
-});
+});

components/App/Navbar/index.vue

@@ -7,7 +7,12 @@
         >CODESHARE</span
       >
     </h1>
-    <UInput v-model="snippet.title" placeholder="file.txt" size="2xs" />
+    <UInput
+      v-if="publishEnabled"
+      v-model="snippet.title"
+      placeholder="file.txt"
+      size="2xs"
+    />
     <div
       class="border-l divide-x divide-white/10 border-white/10 flex items-center"
     >
@@ -24,7 +29,7 @@
           <Icon name="i-lucide-copy" class="h-4 w-4" />
         </button>
       </UTooltip>
-      <UTooltip text="Publish">
+      <UTooltip v-if="publishEnabled" text="Publish">
         <button
           @click="$emit('publish')"
           class="border-white/10 h-9 px-3 text-sm hover:bg-gray-950"
@@ -37,6 +42,12 @@
 </template>
 
 <script setup>
+defineProps({
+  publishEnabled: {
+    type: Boolean,
+    required: true,
+  },
+});
 const { snippet } = useEditor();
 </script>
 

components/App/Sidebar/index.vue

@@ -8,6 +8,7 @@
       :popper="{ placement: 'right' }"
     >
       <UButton
+        to="/"
         icon="i-lucide-file-code-2"
         square
         variant="ghost"

composables/editor.js

@@ -126,6 +126,7 @@ export const useEditor = () => {
     letterCount,
     editorRef,
     snippet,
+    loading,
     confirmationModal,
     toggleMinimap,
     handleMount,

nuxt.config.ts

@@ -7,18 +7,17 @@ export default defineNuxtConfig({
     "@nuxtjs/google-fonts",
     "@nuxtjs/fontaine",
     "@vueuse/nuxt",
-    "@formkit/auto-animate/nuxt"
   ],
   ui: {
     icons: ["heroicons", "lucide"],
   },
   colorMode: {
-    preference: 'dark'
+    preference: "dark",
   },
   googleFonts: {
     display: "swap",
     families: {
       Inter: [400, 500, 600, 700, 800, 900],
     },
   },
-});
+});

package.json

@@ -23,16 +23,13 @@
     "vue-router": "^4.2.5"
   },
   "dependencies": {
-    "@formkit/auto-animate": "^0.8.1",
     "@guolao/vue-monaco-editor": "^1.4.1",
     "@iconify-json/lucide": "^1.1.154",
     "@libsql/client": "0.4.0-pre.7",
     "@nuxt/ui": "^2.12.0",
-    "better-sqlite3": "^9.2.2",
     "drizzle-orm": "^0.29.3",
     "h3-zod": "^0.5.3",
     "nanoid": "^5.0.4",
-    "utf-8-validate": "^6.0.3",
     "zod": "^3.22.4"
   }
 }

pages/[id].vue

@@ -1,6 +1,10 @@
 <template>
   <main class="h-screen flex flex-col text-white">
-    <AppNavbar @publish="publishSnippet" @copy="copySnippet" />
+    <AppNavbar
+      @publish="publishSnippet"
+      @copy="copySnippet"
+      :publish-enabled="false"
+    />
     <div class="flex-1 flex">
       <AppSidebar />
       <ClientOnly>
@@ -105,11 +109,9 @@
 const {
   MONACO_EDITOR_OPTIONS,
   languages,
-  lineCount,
-  wordCount,
-  letterCount,
   editorRef,
   confirmationModal,
+  lineCount,
   toggleMinimap,
   handleMount,
   onChange,
@@ -121,13 +123,24 @@ const {
 const route = useRoute();
 const { data: snippet } = await useFetch(`/api/codebin/${route.params.id}`);
 
+const wordCount = computed(() => {
+  const text = snippet.value.body;
+  const words = text.match(/\w+/g);
+  return words ? words.length : 0;
+});
+
+const letterCount = computed(() => {
+  const text = snippet.value.body;
+  return text.length;
+});
+
 useHead({
-  title: `${snippet.title} - Codeshare.app`,
+  title: `${snippet.value.title} - Codeshare.app`,
   meta: [
     {
       hid: "description",
       name: "description",
-      content: `Codeshare.app - ${snippet.title}`,
+      content: `Codeshare.app - ${snippet.value.title}`,
     },
   ],
 });

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <main class="h-screen flex flex-col text-white">
-    <AppNavbar @publish="publishSnippet" @copy="copySnippet" />
+    <AppNavbar @publish="publishSnippet" @copy="copySnippet" publishEnabled />
     <div class="flex-1 flex">
       <AppSidebar />
       <ClientOnly>
@@ -93,7 +93,13 @@
           title="Heads up!"
           description="This snippet will be public and anyone will be able to see it. Make sure you don't include any sensitive information."
         />
-        <UButton @click="confirmPublish" size="lg" block color="black"
+        <UButton
+          @click="confirmPublish"
+          size="lg"
+          block
+          color="black"
+          :loading="loading"
+          :disabled="loading"
           >Publish</UButton
         >
       </div>
@@ -111,6 +117,7 @@ const {
   editorRef,
   snippet,
   confirmationModal,
+  loading,
   toggleMinimap,
   handleMount,
   onChange,