feat(app): enhance theme support and improve PWA integration

- Updated the app to support light and dark themes with appropriate CSS classes.
- Enhanced PWA configuration with manifest details and caching strategies.
- Improved the chat UI with dynamic theme adjustments for various components.
- Added new meta tags for better mobile web app experience.
- Refactored environment variables to include new Anthropic token.
- Updated package dependencies for better compatibility and performance.

Made-with: Cursor

packages/app/src/components/chat/ChatInput.vue

@@ -2,17 +2,16 @@
   <div class="p-3 md:p-4">
     <div
       class="glass rounded-2xl px-4 py-3 flex items-end gap-3 transition-all duration-300"
-      :class="isFocused ? 'border-glass-highlight' : ''"
-      :style="isFocused ? 'box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22)' : ''"
     >
       <textarea
         ref="textareaRef"
         v-model="text"
         rows="1"
         :placeholder="placeholder"
-        class="flex-1 resize-none bg-transparent text-sm text-white/90 outline-none placeholder:text-white/25 min-h-[24px] max-h-[120px]"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
+        class="flex-1 resize-none bg-transparent text-sm outline-none min-h-[24px] max-h-[120px]"
+        :class="isDark
+          ? 'text-white/90 placeholder:text-white/25'
+          : 'text-gray-800 placeholder:text-gray-400'"
         @keydown.enter.exact.prevent="send"
         @input="autoResize"
       />
@@ -20,7 +19,7 @@
         :disabled="!canSend"
         class="shrink-0 glass-button glass-button-sm rounded-xl px-3 transition-all duration-200"
         :class="canSend
-          ? 'hover:bg-white/15 active:scale-95'
+          ? 'hover:opacity-80 active:scale-95'
           : 'opacity-30 cursor-not-allowed'"
         aria-label="Send message"
         @click="send"
@@ -35,6 +34,7 @@
 
 <script setup lang="ts">
 import { ref, computed, nextTick } from 'vue'
+import { useTheme } from '@/composables/useTheme'
 
 const props = withDefaults(
   defineProps<{
@@ -51,8 +51,8 @@ const emit = defineEmits<{
   send: [text: string]
 }>()
 
+const { isDark } = useTheme()
 const text = ref('')
-const isFocused = ref(false)
 const textareaRef = ref<HTMLTextAreaElement | null>(null)
 
 const canSend = computed(() => text.value.trim().length > 0 && !props.disabled)