feat: WIP: basic project management

.nvmrc

@@ -1 +1 @@
-v18.17.1
+v20.18.1

components/Issue.vue

@@ -252,6 +252,10 @@ div:nth-child(5) .animate-flutter {
   @apply text-gray-600;
 }
 
+.dark .prose {
+  @apply text-gray-100;
+}
+
 .prose p {
   @apply my-2;
 }

components/IssuesDisplay.vue

@@ -170,8 +170,70 @@ function clearAllIssues() {
 }
 
 async function handleSplit(issue: Issue, index: number) {
-  // Implementation remains the same as in index.vue
-  // ... (copy the handleSplit implementation from index.vue)
+  const { streamIssues } = useLLMToIssues()
+  const { splitIssuePrompt } = usePrompts()
+  const apiKey = useLocalStorage('openrouter-api-key', '')
+  const selectedModel = useLocalStorage('selected-model', 'anthropic/claude-3.5-sonnet:beta')
+
+  // Add the index to combining indices to show animation
+  combiningIndices.value = [index]
+  splitIssues.value = [{}, {}]
+
+  try {
+    // Get the initial length of the itemList
+    const initialLength = store.itemList.value.length
+
+    // Stream the split issues
+    await streamIssues(
+      apiKey.value,
+      splitIssuePrompt(issue),
+      false,
+      selectedModel.value
+    )
+
+    // Get the new issues that were added (should be exactly 2)
+    const newIssues = store.itemList.value.slice(initialLength)
+
+    if (newIssues.length !== 2) {
+      throw new Error('Expected exactly 2 new issues from split operation')
+    }
+
+    // Add split history to the new issues
+    newIssues.forEach(newIssue => {
+      newIssue.history = {
+        splitFrom: {
+          title: issue.title,
+          body: issue.body
+        },
+        splitAt: new Date().toISOString()
+      }
+    })
+
+    // Remove the original issue
+    store.removeItem(issue)
+
+    // Clear the animation states
+    combiningIndices.value = []
+    splitIssues.value = [{}, {}]
+
+    // Show success message
+    toast.add({
+      title: 'Issue Split',
+      description: 'Successfully split the issue into two new issues.',
+      color: 'green'
+    })
+  } catch (error) {
+    console.error('Error splitting issue:', error)
+    toast.add({
+      title: 'Error',
+      description: 'Failed to split issue. Please try again.',
+      color: 'red'
+    })
+  } finally {
+    // Always clear animation states
+    combiningIndices.value = []
+    splitIssues.value = [{}, {}]
+  }
 }
 
 function renderedBody(text: string) {
@@ -199,4 +261,12 @@ async function generateMoreWithPrompt() {
     transform: translateY(0);
   }
 }
+
+.prose {
+  @apply text-gray-300;
+}
+
+.dark .prose {
+  @apply text-gray-100;
+}
 </style>

components/NavBar.vue

@@ -2,39 +2,79 @@
   <nav class="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
     <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="flex justify-between h-16">
-        <div class="flex">
+        <!-- Left side -->
+        <div class="flex items-center gap-4">
           <!-- Logo -->
-          <div class="flex-shrink-0 flex items-center">
-            <NuxtLink to="/" class="text-gray-900 dark:text-white font-semibold">
-              IssueBuilder.com
-            </NuxtLink>
+          <NuxtLink to="/" class="text-gray-900 dark:text-white font-semibold">
+            IssueBuilder.com
+          </NuxtLink>
+
+          <!-- Project selector (when logged in and has a current project) -->
+          <div v-if="user && store.currentProject" class="hidden md:flex items-center">
+            <UButton
+              variant="ghost"
+              class="flex items-center gap-2 max-w-[200px] truncate"
+              @click="showProjectList = true"
+            >
+              <Icon name="heroicons:folder" class="w-5 h-5 flex-shrink-0" />
+              <span class="truncate">{{ store.currentProject.value?.name }}</span>
+              <Icon name="heroicons:chevron-down" class="w-4 h-4 flex-shrink-0" />
+            </UButton>
           </div>
         </div>
 
+        <!-- Center navigation -->
+        <div class="hidden md:flex items-center gap-4">
+          <UButton
+            v-if="user"
+            variant="ghost"
+            @click="showProjectList = true"
+            class="flex items-center gap-2"
+          >
+            <Icon name="heroicons:folder" class="w-5 h-5" />
+            Projects
+          </UButton>
+          <UButton
+            v-if="user"
+            variant="ghost"
+            :to="'/settings'"
+            class="flex items-center gap-2"
+          >
+            <Icon name="heroicons:cog-6-tooth" class="w-5 h-5" />
+            Settings
+          </UButton>
+        </div>
+
         <!-- Right side -->
         <div class="flex items-center gap-3">
           <!-- Show these options when logged in -->
           <template v-if="user">
-            <UDropdown :items="userMenuItems" :pointerEvents="false">
-              <UButton color="gray" variant="ghost">
-                <div class="flex items-center gap-2">
-                  <UAvatar :src="user?.user_metadata?.avatar_url" :alt="user?.user_metadata?.name || user?.email"
-                    size="sm" />
-                  <span class="text-sm">{{ user?.user_metadata?.name || user?.email }}</span>
-                  <Icon name="heroicons:chevron-down" class="w-4 h-4" />
-                </div>
-              </UButton>
-            </UDropdown>
-
             <!-- GitHub Link Button -->
             <template v-if="!hasGitHubAccess">
-              <UButton color="gray" variant="ghost" to="/auth/login" :pointerEvents="false">
+              <UButton color="gray" variant="ghost" @click="linkWithGitHub">
                 <template #leading>
                   <Icon name="mdi:github" />
                 </template>
                 Link with GitHub
               </UButton>
             </template>
+
+            <!-- User Menu -->
+            <UDropdown :items="userMenuItems" :pointerEvents="false">
+              <UButton color="gray" variant="ghost">
+                <div class="flex items-center gap-2">
+                  <UAvatar 
+                    :src="user?.user_metadata?.avatar_url" 
+                    :alt="user?.user_metadata?.name || user?.email"
+                    size="sm" 
+                  />
+                  <span class="text-sm hidden sm:inline">
+                    {{ user?.user_metadata?.name || user?.email }}
+                  </span>
+                  <Icon name="heroicons:chevron-down" class="w-4 h-4" />
+                </div>
+              </UButton>
+            </UDropdown>
           </template>
 
           <!-- Login Button -->
@@ -43,29 +83,59 @@
               Sign In
             </UButton>
           </template>
+
+          <!-- Theme Toggle -->
+          <UButton
+            color="gray"
+            variant="ghost"
+            icon="i-heroicons-moon"
+            :class="{ 'i-heroicons-sun': colorMode.value === 'dark' }"
+            @click="toggleDark"
+          />
         </div>
       </div>
     </div>
   </nav>
+
+  <!-- Project Manager Modal -->
+  <ProjectManager 
+    v-if="user" 
+    v-model="showProjectList" 
+    @project-selected="handleProjectSelected"
+  />
 </template>
 
 <script setup lang="ts">
-defineEmits(['pointerenter', 'focus'])
+import { useFeatureFlags } from '~/composables/useFeatureFlags'
 
+// Core functionality
 const user = useSupabaseUser()
+const store = useAppStore()
 const colorMode = useColorMode()
 const client = useSupabaseClient()
 const { data: sessionData } = await client.auth.getSession()
 const sessionRef = ref(sessionData?.session)
 
-// User menu items
+// Feature flags
+const { experimentalFeatures: experimental } = useFeatureFlags()
+
+// State
+const showProjectList = ref(false)
+
+// User menu items with proper typing
 const userMenuItems = computed(() => [
   [
+    {
+      label: 'Projects',
+      icon: 'i-heroicons-folder',
+      click: () => showProjectList.value = true,
+      pointerEvents: false
+    },
     {
       label: 'Account Settings',
       icon: 'i-heroicons-cog-6-tooth',
       to: '/settings',
-      pointerEvents: false,
+      pointerEvents: false
     }
   ],
   [
@@ -76,25 +146,19 @@ const userMenuItems = computed(() => [
         await client.auth.signOut()
         navigateTo('/auth/login')
       },
-      pointerEvents: false,
+      pointerEvents: false
     }
   ]
 ])
 
-// Ensure colorMode is initialized
-onMounted(() => {
-  if (!colorMode.value) {
-    colorMode.preference = 'light'
-  }
-})
-
+// Methods
 function toggleDark() {
   colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
 }
 
 async function linkWithGitHub() {
   try {
-    const { data, error } = await client.auth.signInWithOAuth({
+    const { error } = await client.auth.signInWithOAuth({
       provider: 'github',
       options: {
         redirectTo: `${window.location.origin}/auth/callback`,
@@ -107,13 +171,23 @@ async function linkWithGitHub() {
   }
 }
 
-// Add computed for GitHub access
+function handleProjectSelected() {
+  showProjectList.value = false
+}
+
+// Computed
 const hasGitHubAccess = computed(() => {
   return !!sessionRef.value?.provider_token
 })
 
-// Keep session in sync
+// Lifecycle
 onMounted(() => {
+  // Initialize color mode
+  if (!colorMode.value) {
+    colorMode.preference = 'light'
+  }
+
+  // Keep session in sync
   const { data: { subscription } } = client.auth.onAuthStateChange((_event, session) => {
     sessionRef.value = session
   })