Working on dnd

app/components/App/Tab.vue

@@ -53,6 +53,30 @@ function visitLink(clickType: 'self' | 'extern') {
     window.open(props.tab.link, clickType === 'self' ? '_self' : '_blank')
   }
 }
+
+const draggedItemIndex = ref(null)
+
+function onDragStart(event, index) {
+  draggedItemIndex.value = index
+  event.dataTransfer.effectAllowed = 'move'
+}
+
+function onDragOver(event) {
+  event.preventDefault() // Allow drop by preventing the default action
+  event.dataTransfer.dropEffect = 'move'
+}
+
+function onDrop(event, index) {
+  event.preventDefault()
+
+  // Swap the dragged item with the dropped position
+  const draggedIndex = draggedItemIndex.value
+  const draggedItem = items.value[draggedIndex]
+  items.value.splice(draggedIndex, 1) // Remove dragged item
+  items.value.splice(index, 0, draggedItem) // Insert dragged item at new index
+
+  draggedItemIndex.value = null // Reset dragged index
+}
 </script>
 
 <template>
@@ -62,6 +86,7 @@ function visitLink(clickType: 'self' | 'extern') {
       background: `h-full duration-300 bg-white dark:bg-gray-900 ${editMode ? '' : 'hover:bg-zinc-100 dark:hover:bg-zinc-800'}`,
     }"
     :class="editMode ? 'animate-wiggle' : 'cursor-pointer'"
+    :draggable="editMode"
     @click.left="visitLink('self')"
     @click.right="visitLink('extern')"
     @click.prevent="visitLink('self')"
@@ -85,7 +110,7 @@ function visitLink(clickType: 'self' | 'extern') {
       <UDropdown
         :items="items"
         :popper="{ placement: 'bottom-end', arrow: true }"
-        :ui="{ container: 'z-40 group', width: 'w-40', shadow: 'shadow-2xl', wrapper: 'absolute inline-flex -top-3 -right-3' }"
+        :ui="{ container: 'z-50 group', width: 'w-40', shadow: 'shadow-2xl', wrapper: 'absolute inline-flex -top-3 -right-3' }"
       >
         <UButton
           v-show="editMode"

app/components/App/Weather.vue

@@ -3,13 +3,13 @@ import type { WeatherType } from '~~/types/types'
 
 const { coords, error } = useGeolocation()
 
-const { data, status, refresh } = await useAsyncData<WeatherType>(async () => await useRequestFetch<WeatherType>()('/api/weather', {
+const { data, status, refresh, error: errorFe } = await useAsyncData<WeatherType>(async () => await useRequestFetch<WeatherType>()('/api/weather', {
   method: 'GET',
   query: {
     lon: coords.value.longitude,
     lat: coords.value.latitude,
   },
-}))
+}), { lazy: true, immediate: false })
 
 watchOnce(coords, async () => await refresh())
 

drizzle.config.ts

@@ -1,7 +1,7 @@
-import type { Config } from 'drizzle-kit'
+import { defineConfig } from 'drizzle-kit'
 
-export default {
+export default defineConfig({
   dialect: 'sqlite',
   schema: './server/database/schema.ts',
   out: './server/database/migrations',
-} satisfies Config
+})

package.json

@@ -5,6 +5,7 @@
   "packageManager": "pnpm@9.5.0",
   "scripts": {
     "dev": "nuxt dev --host",
+    "remote": "nuxt dev --host --remote",
     "build": "nuxt build",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare && node script.cjs",

server/api/weather.get.ts

@@ -6,7 +6,7 @@ export default defineCachedEventHandler(async (event) => {
   const query = getQuery(event)
 
   if (Number(query.lon) === Infinity || Number(query.lat) === Infinity) {
-    return createError('Invalid coordinates')
+    return sendNoContent(event, 500)
   }
 
   const openWeather = await $fetch<OpenWeatherType>('https://api.openweathermap.org/data/2.5/weather', {
@@ -34,6 +34,6 @@ export default defineCachedEventHandler(async (event) => {
     wind: openWeather.wind.speed,
   } as WeatherType
 }, {
-  maxAge: 60 * 60 * 3,
+  maxAge: 1,
   name: 'weather',
 })

server/database/schema.ts

@@ -1,7 +1,7 @@
-import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'
 import { relations } from 'drizzle-orm'
-import { id, timestamps } from '../utils/dbFields'
+import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'
 import { Subscription } from '../../types/types'
+import { id, timestamps } from '../utils/dbFields'
 
 export const users = sqliteTable('users', {
   id,
@@ -17,7 +17,7 @@ export const users = sqliteTable('users', {
   private: integer('private', { mode: 'boolean' }).default(false),
   language: text('language').default('en-EN'),
   location: text('location').default('unknown'),
-  weatherTab: integer('weather_tab', { mode: 'boolean' }).default(0),
+  weatherTab: integer('weather_tab', { mode: 'boolean' }).default(false),
   subscription: text('subscription', { enum: Subscription }).default('free'),
   ...timestamps,
 })
@@ -28,6 +28,7 @@ export const categories = sqliteTable('categories', {
   nameVisible: integer('name_visible', { mode: 'boolean' }).default(true),
   icon: text('icon').default('i-ph:circle-wavy-question-duotone'),
   color: text('color').default('gray'),
+  grid: text('grid', { mode: 'json' }).default(''),
   userId: integer('user_id')
     .notNull()
     .references(() => users.id, { onDelete: 'cascade' }),

server/utils/db.ts

@@ -1,7 +1,7 @@
 import { drizzle } from 'drizzle-orm/d1'
 import * as schema from '../database/schema'
 
-export { sql, eq, and, or, asc, desc, sum, isNull } from 'drizzle-orm'
+export { and, asc, desc, eq, isNull, or, sql, sum } from 'drizzle-orm'
 
 export const tables = schema
 

types/types.ts

@@ -25,6 +25,7 @@ export const UpdateCategorySchema = z.object({
   icon: z.string().optional(),
   color: z.string().optional(),
   nameVisible: z.boolean().optional().default(false),
+  grid: z.string().optional(),
 })
 export const UpdateCategorySchemaType = z.infer<typeof UpdateCategorySchema>
 
@@ -34,6 +35,7 @@ export interface CategoryType {
   icon: string
   color: string
   nameVisible: boolean
+  grid: GridType
 }
 
 // Tab
@@ -79,6 +81,13 @@ export const UpdateUserSchema = z.object({
 })
 export const UpdateUserSchemaType = z.infer<typeof UpdateUserSchema>
 
+export interface GridType {
+  tabs: Array<{
+    tabId: number
+    orderId: number
+  }>
+}
+
 export interface OpenWeatherType {
   weather: Array<{
     main: string