From 40676af11e1dba8bf00b2e7476941524c10669ea Mon Sep 17 00:00:00 2001
From: Vadim <vadim.olonin@gmail.com>
Date: Sat, 10 May 2025 21:13:42 +0300
Subject: [PATCH] wip

---
 bin/server                                | Bin 22746018 -> 22746018 bytes
 internal/repository/status/status.go      |   2 +-
 web/bun.lock                              |   4 +-
 web/index.html                            |   1 +
 web/package.json                          |   2 +-
 web/src/components/DynamicMenu.vue        |  38 +++++++
 web/src/components/FormInput.vue          |  30 ++++++
 web/src/components/FormTextarea.vue       |  37 +++++++
 web/src/components/IssueCreateForm.vue    |  24 ++++-
 web/src/components/IssueItemDetails.vue   |  64 ++++++++++++
 web/src/components/IssueListItem.vue      |  63 +++++++-----
 web/src/components/IssuesByStatusList.vue |  18 +---
 web/src/components/ProjectCreateFlow.vue  |  66 ++++++++++++
 web/src/components/StatusMenu.vue         |  40 ++++++++
 web/src/layouts/DefaultLayout.vue         |  39 +++++---
 web/src/main.ts                           |   2 +-
 web/src/router/index.ts                   |  17 +++-
 web/src/stores/components.ts              |  12 ---
 web/src/stores/issues.ts                  |  10 +-
 web/src/stores/projects.ts                |   9 +-
 web/src/stores/server.ts                  |  12 +++
 web/src/types.ts                          |  28 ++++++
 web/src/views/ExampleRootView.vue         |   7 ++
 web/src/views/HelloWorld.ts               |  20 ----
 web/src/views/HomeView.vue                |  39 ++------
 web/src/views/IssuesRootView.vue          | 116 +++++++++++++++++++---
 web/src/views/ProjectRootView.vue         |  79 ++++++++++++++-
 web/vite.config.ts                        |   1 +
 28 files changed, 633 insertions(+), 147 deletions(-)
 create mode 100644 web/src/components/DynamicMenu.vue
 create mode 100644 web/src/components/FormInput.vue
 create mode 100644 web/src/components/FormTextarea.vue
 create mode 100644 web/src/components/IssueItemDetails.vue
 create mode 100644 web/src/components/ProjectCreateFlow.vue
 create mode 100644 web/src/components/StatusMenu.vue
 delete mode 100644 web/src/stores/components.ts
 create mode 100644 web/src/stores/server.ts
 create mode 100644 web/src/types.ts
 create mode 100644 web/src/views/ExampleRootView.vue
 delete mode 100644 web/src/views/HelloWorld.ts

diff --git a/bin/server b/bin/server
index 435c0205ba42720a13a757c8f54bf39f3fb525a9..dfcd1bf5a658da6d8594492d0f2f66e36c2a0bff 100755
GIT binary patch
delta 8050
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
V(ZaC<@$S}9Q&f_V8<ceS{{b89$AAC;

delta 8028
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

diff --git a/internal/repository/status/status.go b/internal/repository/status/status.go
index a18630c..226d27c 100644
--- a/internal/repository/status/status.go
+++ b/internal/repository/status/status.go
@@ -28,7 +28,7 @@ func NewRepository(client database.Client) Repository {
 }
 
 func (r *repository) Find(ctx context.Context) ([]*status.Status, error) {
-	query := "select id, name, description, position from statuses order by id asc"
+	query := "select id, name, description, position from statuses order by position asc"
 
 	rows, err := r.client.Query(ctx, query)
 	if err != nil {
diff --git a/web/bun.lock b/web/bun.lock
index 97d6c40..6a80736 100644
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -11,7 +11,7 @@
         "vue": "^3.5.13",
         "vue-draggable-next": "^2.2.1",
         "vue-router": "^4.5.0",
-        "vuetify": "^3.7.16",
+        "vuetify": "^3.8.2",
       },
       "devDependencies": {
         "@mdi/font": "^7.4.47",
@@ -803,7 +803,7 @@
 
     "vue-tsc": ["vue-tsc@2.2.8", "", { "dependencies": { "@volar/typescript": "~2.4.11", "@vue/language-core": "2.2.8" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "./bin/vue-tsc.js" } }, "sha512-jBYKBNFADTN+L+MdesNX/TB3XuDSyaWynKMDgR+yCSln0GQ9Tfb7JS2lr46s2LiFUT1WsmfWsSvIElyxzOPqcQ=="],
 
-    "vuetify": ["vuetify@3.7.16", "", { "peerDependencies": { "typescript": ">=4.7", "vite-plugin-vuetify": ">=1.0.0", "vue": "^3.3.0", "webpack-plugin-vuetify": ">=2.0.0" }, "optionalPeers": ["typescript", "vite-plugin-vuetify", "webpack-plugin-vuetify"] }, "sha512-Few/cBtgJYgdkzi0LWmVy67G5uc2+q7oWcadbcTUPAtEtGYNh2AM28h01Fk+ScJgfxkA077//ZDff1rh3jYG/w=="],
+    "vuetify": ["vuetify@3.8.2", "", { "peerDependencies": { "typescript": ">=4.7", "vite-plugin-vuetify": ">=2.1.0", "vue": "^3.5.0", "webpack-plugin-vuetify": ">=3.1.0" }, "optionalPeers": ["typescript", "vite-plugin-vuetify", "webpack-plugin-vuetify"] }, "sha512-UJNFP4egmKJTQ3V3MKOq+7vIUKO7/Fko5G6yUsOW2Rm0VNBvAjgO6VY6EnK3DTqEKN6ugVXDEPw37NQSTGLZvw=="],
 
     "which": ["which@5.0.0", "", { "dependencies": { "isexe": "^3.1.1" }, "bin": { "node-which": "bin/which.js" } }, "sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ=="],
 
diff --git a/web/index.html b/web/index.html
index 9e5fc8f..46b049d 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="mobile-web-app-capable" content="yes">
     <title>Vite App</title>
   </head>
   <body>
diff --git a/web/package.json b/web/package.json
index 0539233..dfdbaec 100644
--- a/web/package.json
+++ b/web/package.json
@@ -20,7 +20,7 @@
     "vue": "^3.5.13",
     "vue-draggable-next": "^2.2.1",
     "vue-router": "^4.5.0",
-    "vuetify": "^3.7.16"
+    "vuetify": "^3.8.2"
   },
   "devDependencies": {
     "@mdi/font": "^7.4.47",
diff --git a/web/src/components/DynamicMenu.vue b/web/src/components/DynamicMenu.vue
new file mode 100644
index 0000000..836abc1
--- /dev/null
+++ b/web/src/components/DynamicMenu.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { DynamicMenuElement } from '@/types.ts'
+
+const componentProps = defineProps<{
+  menu: DynamicMenuElement[]
+  itemId?: number
+  isHovering?: boolean | null
+}>()
+</script>
+
+<template>
+  <v-menu v-bind="componentProps" width="200">
+    <template v-slot:activator="{ props }">
+      <v-btn icon rounded :variant="componentProps.isHovering ? 'tonal' : 'text'" v-bind="props">
+        <v-icon icon="mdi-dots-horizontal"></v-icon>
+      </v-btn>
+    </template>
+
+    <v-list density="compact" class="mt-1">
+      <template v-for="el in componentProps.menu" :key="el.id">
+        <v-divider class="my-1" v-if="el.type === 'divider'"></v-divider>
+        <v-list-item
+          :disabled="el.disabled"
+          v-else
+          :color="el.color"
+          @click="el.click && el.click(componentProps.itemId)"
+        >
+          <v-list-item-title>
+            <v-icon class="mr-2" :color="el.color" :icon="el.icon"></v-icon>
+            <span>{{ el.title }}</span>
+          </v-list-item-title>
+        </v-list-item>
+      </template>
+    </v-list>
+  </v-menu>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/components/FormInput.vue b/web/src/components/FormInput.vue
new file mode 100644
index 0000000..a78767b
--- /dev/null
+++ b/web/src/components/FormInput.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const value = defineModel('value')
+
+const props = defineProps<{
+  label?: string
+  required?: boolean
+  description?: string
+  width?: '0' | '25' | '50' | '100'
+}>()
+</script>
+
+<template>
+  <div>
+    <div v-if="props.label" class="d-flex align-end ga-2">
+      <div>
+        <span>{{ props.label }}</span>
+        <span v-if="props.required" class="text-error">*</span>
+      </div>
+      <span v-if="props.description" class="text-caption">{{ props.description }}</span>
+    </div>
+    <v-text-field
+      v-model:model-value="value"
+      :class="`w-${props.width ?? 100}`"
+      hide-details
+      :placeholder="props.label"
+    ></v-text-field>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/components/FormTextarea.vue b/web/src/components/FormTextarea.vue
new file mode 100644
index 0000000..676cca0
--- /dev/null
+++ b/web/src/components/FormTextarea.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const value = defineModel('value')
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    required?: boolean
+    description?: string
+    width?: '0' | '25' | '50' | '100'
+    rows?: number
+  }>(),
+  {
+    rows: 5,
+  },
+)
+</script>
+
+<template>
+  <div>
+    <div v-if="props.label" class="d-flex align-end ga-2">
+      <div>
+        <span>{{ props.label }}</span>
+        <span v-if="props.required" class="text-error">*</span>
+      </div>
+      <span v-if="props.description" class="text-caption">{{ props.description }}</span>
+    </div>
+    <v-textarea
+      v-model:model-value="value"
+      :class="`w-${props.width ?? 100}`"
+      hide-details
+      :rows="props.rows"
+      :placeholder="props.label"
+    ></v-textarea>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/components/IssueCreateForm.vue b/web/src/components/IssueCreateForm.vue
index 636c3eb..76ef00c 100644
--- a/web/src/components/IssueCreateForm.vue
+++ b/web/src/components/IssueCreateForm.vue
@@ -25,6 +25,13 @@ const disabled = computed(() => !issue.value.name)
 const addIssue = async () => {
   const result = await issuesStore.create(issue.value)
   showForm.value = !result
+  issue.value = {
+    name: undefined,
+    description: undefined,
+    status_id: props.status.id,
+    project_id: 1,
+    position: 0,
+  }
 }
 
 function onClickOutside() {
@@ -35,15 +42,26 @@ function onClickOutside() {
 <template>
   <v-list-item rounded :border="showForm">
     <v-list-item-title v-if="showForm" v-click-outside="onClickOutside">
-      <v-text-field hide-details placeholder="title" variant="plain" v-model:model-value="issue.name"></v-text-field>
+      <v-text-field
+        hide-details
+        placeholder="title"
+        variant="plain"
+        clearable
+        @keydown.enter="addIssue"
+        v-model:model-value="issue.name"
+      ></v-text-field>
       <v-row align="end">
         <v-col cols="auto">
           <v-select hide-details v-model:model-value="icon" width="70" :items="icons" variant="plain"></v-select>
         </v-col>
         <v-spacer></v-spacer>
         <v-col cols="auto">
-          <v-btn variant="tonal" class="mr-1" :disabled @click="addIssue">ok</v-btn>
-          <v-btn variant="tonal" @click="showForm = false">cancel</v-btn>
+          <v-btn variant="tonal" icon rounded class="mr-1" :disabled @click="addIssue">
+            <v-icon icon="mdi-check"></v-icon>
+          </v-btn>
+          <v-btn variant="tonal" icon rounded @click="showForm = false">
+            <v-icon icon="mdi-cancel"></v-icon>
+          </v-btn>
         </v-col>
       </v-row>
     </v-list-item-title>
diff --git a/web/src/components/IssueItemDetails.vue b/web/src/components/IssueItemDetails.vue
new file mode 100644
index 0000000..c2e6fc4
--- /dev/null
+++ b/web/src/components/IssueItemDetails.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+// const isActive = defineModel<boolean>('isActive', { required: false })
+import type { Issue } from '@/stores/issues.ts'
+import { computed } from 'vue'
+import StatusMenu from '@/components/StatusMenu.vue'
+
+const props = defineProps<{ selectedIssue: Issue }>()
+
+const emit = defineEmits<{
+  (e: 'onCancel'): void
+}>()
+
+const created = computed(() => {
+  return props.selectedIssue.created ? new Date(props.selectedIssue.created).toLocaleString('ru-RU') : undefined
+})
+
+const issueId = computed(() => {
+  return props.selectedIssue.project.key + '-' + props.selectedIssue.id
+})
+</script>
+
+<template>
+  <v-card max-width="900" min-width="700">
+    <template #append>
+      <div class="d-flex ga-2">
+        <v-btn variant="outlined" class="border rounded" @click="emit('onCancel')" icon="mdi-dots-horizontal"></v-btn>
+        <v-btn variant="outlined" class="border rounded" @click="emit('onCancel')" icon="mdi-close"></v-btn>
+      </div>
+    </template>
+    <template #title>
+      <div class="text-body-1">{{ issueId }}</div>
+    </template>
+    <v-card-text>
+      <v-row>
+        <v-col class="d-flex flex-column ga-2">
+          <div class="text-h5">{{ props.selectedIssue.name }}</div>
+          <div>
+            <div>description</div>
+            <div>{{ props.selectedIssue.description ?? 'add description' }}</div>
+          </div>
+          <div>
+            <v-textarea rows="3"></v-textarea>
+            <v-btn variant="flat" color="primary">save</v-btn>
+            <v-btn variant="text">cancel</v-btn>
+          </div>
+        </v-col>
+
+        <v-col cols="5" class="d-flex flex-column ga-2 align-start">
+          <status-menu class="" :status="props.selectedIssue.status"></status-menu>
+          <v-sheet class="pa-4 w-100">
+            <div>
+              assignee:
+              <v-avatar size="x-small" text="M" color="success"></v-avatar>
+            </div>
+          </v-sheet>
+          <div class="text-caption">created: {{ created }}</div>
+          <!--          <div>{{ props.selectedIssue.project }}</div>-->
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/components/IssueListItem.vue b/web/src/components/IssueListItem.vue
index f4410a9..d2ff99c 100644
--- a/web/src/components/IssueListItem.vue
+++ b/web/src/components/IssueListItem.vue
@@ -1,36 +1,41 @@
 <script setup lang="ts">
 import { type Issue, useIssuesStore } from '@/stores/issues.ts'
+import { useStatusesStore } from '@/stores/statuses.ts'
+import { useRouter } from 'vue-router'
+import { computed } from 'vue'
 
 const props = defineProps<{ issue: Issue }>()
+const router = useRouter()
 
 const issuesStore = useIssuesStore()
+const statusesStore = useStatusesStore()
 
-const menu = [
-  {
-    id: 1,
-    title: 'delete',
-    icon: 'mdi-trash-can',
-  },
-]
+const projectKey = computed(() => props.issue.project.key)
 
-async function onDelete() {
-  await issuesStore.remove(props.issue.id)
+const onDelete = async (id: number) => await issuesStore.remove(id)
+
+function onStatusChange(statusId: number) {
+  console.log('on change status', statusId)
+}
+function onClick(id: number) {
+  console.log('on click', id)
+  router.push({ name: 'issues', query: { selectedIssue: `${projectKey.value}-${id}` } })
 }
 </script>
 
 <template>
-  <v-list-item rounded border class="mb-1">
+  <v-list-item rounded border class="mb-1 pl-2" @click="onClick(props.issue.id)">
     <template v-slot:prepend>
-      <v-icon class="handle move" icon="mdi-drag" />
+      <v-icon class="handle cursor-move" icon="mdi-drag" />
     </template>
     <v-list-item-subtitle>
-      <div>{{ props.issue.description }}</div>
+      <div class="text-caption">{{ props.issue.description }}</div>
     </v-list-item-subtitle>
     <v-list-item-title>
       <div class="d-flex ga-2 align-center">
         <!--        <v-icon size="small" icon="mdi-bug" color="primary"></v-icon>-->
-        <v-chip :text="issue.id" variant="tonal" size="small" label />
-        <div class="text-body-1">{{ props.issue.name }}</div>
+        <!--        <v-chip :text="issue.id" variant="tonal" size="small" label />-->
+        <div class="text-body-2 text-wrap">{{ props.issue.name }}</div>
       </div>
     </v-list-item-title>
 
@@ -39,18 +44,34 @@ async function onDelete() {
         <v-avatar color="primary" size="28" />
         <v-menu>
           <template v-slot:activator="{ props }">
-            <v-btn size="small" icon="mdi-menu" variant="plain" v-bind="props" />
+            <v-btn icon rounded variant="text" v-bind="props">
+              <v-icon size="small">mdi-menu</v-icon>
+            </v-btn>
           </template>
 
           <v-list density="compact" class="mt-1">
-            <v-list-item v-for="item in menu" :key="item.id" :value="item.title" @click="onDelete">
+            <v-list-item link>
               <v-list-item-title>
                 <div class="d-flex ga-2 align-center">
-                  <v-icon size="small" :icon="item.icon"></v-icon>
-                  {{ item.title }}
+                  <div>Change status</div>
+                  <v-icon icon="mdi-menu-right"></v-icon>
                 </div>
               </v-list-item-title>
+              <v-menu v-if="statusesStore.statuses" :open-on-focus="false" activator="parent" open-on-hover submenu>
+                <v-list>
+                  <v-list-item
+                    v-for="status in statusesStore.statuses"
+                    :key="status.id"
+                    link
+                    @click="onStatusChange(status.id)"
+                    :title="status.name"
+                  >
+                  </v-list-item>
+                </v-list>
+              </v-menu>
             </v-list-item>
+            <v-divider class="my-1"></v-divider>
+            <v-list-item link @click="onDelete(props.issue.id)" title="Delete"></v-list-item>
           </v-list>
         </v-menu>
       </v-list-item-action>
@@ -58,8 +79,4 @@ async function onDelete() {
   </v-list-item>
 </template>
 
-<style scoped lang="scss">
-.move {
-  cursor: move;
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/web/src/components/IssuesByStatusList.vue b/web/src/components/IssuesByStatusList.vue
index f55e866..b0715e7 100644
--- a/web/src/components/IssuesByStatusList.vue
+++ b/web/src/components/IssuesByStatusList.vue
@@ -12,7 +12,7 @@ const issuesStore = useIssuesStore()
 
 const selectedId = ref<number>()
 
-const height = 400
+const height = 600
 
 async function onChange(val: {
   added: { element: Issue; newIndex: number }
@@ -37,20 +37,20 @@ function onChoose() {
 </script>
 
 <template>
-  <v-sheet rounded>
+  <v-sheet rounded elevation="1" width="18rem">
     <v-toolbar density="compact">
       <v-toolbar-title>
         <div class="d-flex align-center ga-2">
           <div class="text-uppercase text-body-2">{{ props.status.name }}</div>
-          <v-chip size="small" variant="tonal" :text="props.issues.length" class="mr-2" />
+          <v-chip variant="tonal" :text="props.issues.length" class="mr-2" />
         </div>
       </v-toolbar-title>
       <template #append>
         <v-menu>
           <template v-slot:activator="{ props }">
-            <v-chip label variant="text" v-bind="props">
+            <v-btn icon rounded density="compact" variant="text" v-bind="props">
               <v-icon icon="mdi-dots-horizontal"></v-icon>
-            </v-chip>
+            </v-btn>
           </template>
 
           <v-list density="compact" class="mt-1">
@@ -89,12 +89,4 @@ function onChoose() {
 .sortable-drag {
   background-color: rgb(var(--v-theme-background));
 }
-.animation {
-  animation: wave 0.5s linear;
-}
-@keyframes wave {
-  50% {
-    background-color: rgba(var(--v-theme-primary), 0.2);
-  }
-}
 </style>
diff --git a/web/src/components/ProjectCreateFlow.vue b/web/src/components/ProjectCreateFlow.vue
new file mode 100644
index 0000000..b24acef
--- /dev/null
+++ b/web/src/components/ProjectCreateFlow.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import FormInput from '@/components/FormInput.vue'
+import { ref } from 'vue'
+import FormTextarea from '@/components/FormTextarea.vue'
+import { useProjectsStore } from '@/stores/projects.ts'
+
+const dialog = defineModel('dialog')
+
+const projectsStore = useProjectsStore()
+
+const name = ref('')
+const description = ref('')
+const key = ref('')
+
+async function onSubmit() {
+  console.log(name.value)
+  await projectsStore.create({
+    name: name.value,
+    description: description.value,
+    key: key.value,
+  })
+}
+</script>
+
+<template>
+  <v-sheet border class="pa-4">
+    <div class="d-flex align-center ga-4 mb-4">
+      <v-btn variant="text" @click="dialog = false" icon="mdi-close"></v-btn>
+    </div>
+    <div class="mb-4">
+      <div class="text-h6">Project type</div>
+
+      <v-list lines="two">
+        <v-list-item border rounded @click="console.log('Kanban')">
+          <div class="d-flex ga-2">
+            <div class="d-flex align-center">
+              <v-icon size="64" color="primary">mdi-paper-roll-outline</v-icon>
+            </div>
+
+            <div>
+              <div class="text-h6">Kanban</div>
+              <div class="text-body-2">
+                Kanban is all about helping teams visualize their work, limit work currently in progress, and maximize
+                efficiency.
+              </div>
+            </div>
+          </div>
+        </v-list-item>
+      </v-list>
+    </div>
+    <div class="mb-4">
+      <div class="text-h6">Project details</div>
+      <div class="text-caption">
+        Required fields are marked with an asterisk <span class="text-error text-body-2">*</span>
+      </div>
+    </div>
+    <v-form class="d-flex flex-column ga-4" @submit.prevent="onSubmit">
+      <form-input v-model:value="name" label="Name" :required="true" />
+      <form-input v-model:value="key" label="Key" :required="true" description="prefix for your project" width="50" />
+      <form-textarea v-model:value="description" label="Description" :rows="2" />
+      <v-btn type="submit" class="align-self-start" variant="flat" density="comfortable" color="primary">create</v-btn>
+    </v-form>
+  </v-sheet>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/components/StatusMenu.vue b/web/src/components/StatusMenu.vue
new file mode 100644
index 0000000..60e19b9
--- /dev/null
+++ b/web/src/components/StatusMenu.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { type Status, useStatusesStore } from '@/stores/statuses.ts'
+import { ref, watchEffect } from 'vue'
+
+const statusesStore = useStatusesStore()
+
+const props = defineProps<{ status?: Status }>()
+const selected = ref<Status>()
+
+watchEffect(() => props.status && setSelected(props.status))
+
+function setSelected(status: Status) {
+  selected.value = status
+}
+
+function onSelect(status: Status) {
+  console.log(status)
+  selected.value = status
+}
+</script>
+
+<template>
+  <v-menu width="200">
+    <template v-slot:activator="{ props }">
+      <v-btn v-bind="props" color="primary">{{ selected?.name }} </v-btn>
+    </template>
+
+    <v-list density="compact" class="mt-1">
+      <template v-for="el in statusesStore.statuses" :key="el.id">
+        <v-list-item @click="onSelect(el)">
+          <v-list-item-title>
+            <span>{{ el.name }}</span>
+          </v-list-item-title>
+        </v-list-item>
+      </template>
+    </v-list>
+  </v-menu>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/layouts/DefaultLayout.vue b/web/src/layouts/DefaultLayout.vue
index 73c5c1d..7897e06 100644
--- a/web/src/layouts/DefaultLayout.vue
+++ b/web/src/layouts/DefaultLayout.vue
@@ -1,24 +1,39 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
-const component = ref<string>('issues')
-
-const menu = ['stat', 'issues', 'projects', 'tests']
-
-function setComponent(value: string) {
-  component.value = value
-}
+const route = useRoute()
+const menu = [
+  { id: 1, title: 'Projects' },
+  // { id: 2, title: 'issues' },
+  // { id: 3, title: 'stat' },
+  // { id: 4, title: 'test' },
+]
 </script>
 
 <template>
   <v-layout>
-    <v-app-bar density="compact" elevation="1">
-      <v-app-bar-title>Application - component: {{ component }}</v-app-bar-title>
-      <v-btn v-for="(el, index) in menu" :key="index" @click="setComponent(el)">{{ el }}</v-btn>
+    <v-app-bar density="comfortable" elevation="1">
+      <template v-slot:prepend>
+        <v-menu>
+          <template v-slot:activator="{ props }">
+            <v-app-bar-nav-icon variant="text" v-bind="props"></v-app-bar-nav-icon>
+          </template>
+          <v-list class="mt-1" width="200">
+            <v-list-item v-for="(item, index) in menu" :key="index" :to="`/${item.title}`">
+              <v-list-item-title class="d-flex align-center ga-4">
+                <v-avatar border size="24" rounded color="primary"> </v-avatar>
+                <div>{{ item.title }}</div>
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </template>
+
+      <v-app-bar-title>Application</v-app-bar-title>
     </v-app-bar>
     <v-main>
       <v-container :fluid="true">
-        <slot name="default" :component="component"></slot>
+        <slot></slot>
       </v-container>
     </v-main>
   </v-layout>
diff --git a/web/src/main.ts b/web/src/main.ts
index 8c2a17a..ea45818 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -32,7 +32,7 @@ const vuetify = createVuetify({
     VRow: { dense: true },
     VSheet: { border: true, rounded: true },
     VList: { density: 'compact' },
-    VCard: { variant: 'outlined' },
+    // VCard: { variant: 'outlined' },
     VChip: { density: 'compact', variant: 'outlined', label: true },
     VNumberInput: { hideDetails: true, variant: 'outlined', density: 'compact' },
     VBtn: { variant: 'tonal', density: 'compact' },
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index b5d582b..bf758f4 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -1,6 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-import TestRootView from '@/views/TestRootView.vue'
 
 declare module 'vue-router' {
   interface RouteMeta {
@@ -12,17 +11,25 @@ const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
+      path: '',
+      redirect: '/projects',
+    },
+    {
+      path: '/projects',
       component: HomeView,
       children: [
+        { path: '', component: () => import('@/views/ProjectRootView.vue') },
         {
-          path: '/',
-          name: 'items',
-          component: TestRootView,
+          path: ':key/issues',
+          name: 'issues',
+          component: () => import('@/views/IssuesRootView.vue'),
+          props: (route) => ({ selectedIssue: route.query.selectedIssue }),
         },
       ],
     },
   ],
 })
 
+router.beforeResolve((to, from) => {})
+
 export default router
diff --git a/web/src/stores/components.ts b/web/src/stores/components.ts
deleted file mode 100644
index beb3cb6..0000000
--- a/web/src/stores/components.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
-
-export const useComponentsStore = defineStore('components', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})
diff --git a/web/src/stores/issues.ts b/web/src/stores/issues.ts
index 52beede..562b5eb 100644
--- a/web/src/stores/issues.ts
+++ b/web/src/stores/issues.ts
@@ -25,6 +25,7 @@ export interface PositionsDto {
 
 export const useIssuesStore = defineStore('issues', () => {
   const issues = ref<Issue[]>([])
+  const selectedIssue = ref<Issue>()
   const issuesObj = ref<Map<number, Issue[]>>(new Map())
   const { GET, POST, DELETE } = useFetch('/api/issues')
 
@@ -69,5 +70,12 @@ export const useIssuesStore = defineStore('issues', () => {
     }
   }
 
-  return { issues, issuesObj, findAll, create, genIssuesObj, updatePositions, remove }
+  async function findById(id: number) {
+    const response = await GET<Issue>({ param: id })
+    if (response?.data) {
+      selectedIssue.value = response.data
+    }
+  }
+
+  return { issues, issuesObj, selectedIssue, findAll, findById, create, genIssuesObj, updatePositions, remove }
 })
diff --git a/web/src/stores/projects.ts b/web/src/stores/projects.ts
index d61739a..c00aed4 100644
--- a/web/src/stores/projects.ts
+++ b/web/src/stores/projects.ts
@@ -9,7 +9,7 @@ export interface Project {
   key: string
 }
 
-export type CreateProjectDto = Partial<Pick<Project, 'name' | 'description'>>
+export type CreateProjectDto = Partial<Omit<Project, 'id'>>
 export type UpdateProjectDto = Partial<Pick<Project, 'id' | 'name' | 'description'>>
 
 export const useProjectsStore = defineStore('projects', () => {
@@ -27,8 +27,11 @@ export const useProjectsStore = defineStore('projects', () => {
     if (response?.data) project.value = response.data
   }
 
-  async function create({ name, description }: CreateProjectDto) {
-    const response = await POST<Project>({ body: { name, description } })
+  async function create({ name, description, key }: CreateProjectDto) {
+    if (!name || !key) {
+      throw new Error('Project name and key is required')
+    }
+    const response = await POST<Project>({ body: { name, description, key } })
     if (response?.data) projects.value.push(response.data)
   }
 
diff --git a/web/src/stores/server.ts b/web/src/stores/server.ts
new file mode 100644
index 0000000..2436442
--- /dev/null
+++ b/web/src/stores/server.ts
@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useServerStore = defineStore('server', () => {
+  const isOnline = ref(false)
+
+  function checkOnline() {
+    console.log('check online')
+  }
+
+  return { isOnline, checkOnline }
+})
diff --git a/web/src/types.ts b/web/src/types.ts
new file mode 100644
index 0000000..a50b921
--- /dev/null
+++ b/web/src/types.ts
@@ -0,0 +1,28 @@
+export interface DynamicMenuElement {
+  id: number
+  title?: string
+  icon?: string
+  color?: string
+  type?: 'divider'
+  disabled?: boolean
+  click?: (val?: number) => void
+}
+
+export interface IssueMenu {
+  id: number
+  name: string
+  click?: (id: number) => void
+  children?: { id: number; name: string; click?: (id: number) => void }[]
+}
+
+export interface TableHeader {
+  readonly key?: (string & {}) | 'data-table-group' | 'data-table-select' | 'data-table-expand' | undefined
+  readonly title?: string | undefined
+  readonly fixed?: boolean | undefined
+  readonly align?: 'start' | 'end' | 'center' | undefined
+  readonly width?: string | number | undefined
+  readonly minWidth?: string | number | undefined
+  readonly maxWidth?: string | number | undefined
+  readonly nowrap?: boolean | undefined
+  readonly sortable?: boolean | undefined
+}
diff --git a/web/src/views/ExampleRootView.vue b/web/src/views/ExampleRootView.vue
new file mode 100644
index 0000000..540f64b
--- /dev/null
+++ b/web/src/views/ExampleRootView.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>Foo Bar</div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/views/HelloWorld.ts b/web/src/views/HelloWorld.ts
deleted file mode 100644
index 7e63ac3..0000000
--- a/web/src/views/HelloWorld.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const count = ref(0)
-    function click() {
-      count.value = count.value + 1
-    }
-    return {
-      count,
-      click,
-    }
-  },
-  template: `
-    <div class="d-flex ga-2 pa-2">
-    <div class="hello">COUNT: {{count}}</div>
-    <v-btn @click="click">click</v-btn>
-    </div>
-  `,
-}
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
index 13131eb..6337fd6 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -1,12 +1,6 @@
 <script setup lang="ts">
-import { type Component, computed, onMounted, watchEffect } from 'vue'
+import { computed, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
-import TestRootView from '@/views/TestRootView.vue'
-import StatRootView from '@/views/StatRootView.vue'
-import HelloWorld from '@/views/HelloWorld.js'
-import DefaultLayout from '@/layouts/DefaultLayout.vue'
-import IssuesRootView from '@/views/IssuesRootView.vue'
-import ProjectRootView from '@/views/ProjectRootView.vue'
 import { useIssuesStore } from '@/stores/issues.ts'
 import { useStatusesStore } from '@/stores/statuses.ts'
 import { useProjectsStore } from '@/stores/projects.ts'
@@ -22,34 +16,17 @@ const layout = computed(() => {
   return layout ? `${layout}Layout` : 'DefaultLayout'
 })
 
-const components: { [key: string]: Component } = {
-  stat: StatRootView,
-  projects: ProjectRootView,
-  issues: IssuesRootView,
-  tests: TestRootView,
-}
-
 watchEffect(async () => await projectsStore.findAll())
 watchEffect(async () => await statusesStore.findAll())
 watchEffect(async () => await issuesStore.findAll())
-
-onMounted(async () => {
-  // await projectsStore.findById(122)
-})
 </script>
 
 <template>
-  <default-layout>
-    <template v-slot:default="{ component }">
-      <component :is="components[component]" />
-      <hello-world />
-    </template>
-  </default-layout>
-  <!--  <component :is="layout">-->
-  <!--    <router-view v-slot="{ Component, route }">-->
-  <!--      <div :key="route.name">-->
-  <!--        <component :is="Component" />-->
-  <!--      </div>-->
-  <!--    </router-view>-->
-  <!--  </component>-->
+  <component :is="layout">
+    <router-view v-slot="{ Component, route }">
+      <div :key="route.name">
+        <component :is="Component" />
+      </div>
+    </router-view>
+  </component>
 </template>
diff --git a/web/src/views/IssuesRootView.vue b/web/src/views/IssuesRootView.vue
index 45158f5..07f2ca4 100644
--- a/web/src/views/IssuesRootView.vue
+++ b/web/src/views/IssuesRootView.vue
@@ -1,43 +1,127 @@
 <script setup lang="ts">
-import { computed, watchEffect } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { useIssuesStore } from '@/stores/issues.ts'
 import IssuesByStatusView from '@/components/IssuesByStatusList.vue'
 import { useStatusesStore } from '@/stores/statuses.ts'
+import { useProjectsStore } from '@/stores/projects.ts'
+import type { DynamicMenuElement } from '@/types.ts'
+import DynamicMenu from '@/components/DynamicMenu.vue'
+import { useRouter } from 'vue-router'
+import IssueItemDetails from '@/components/IssueItemDetails.vue'
 
 const issuesStore = useIssuesStore()
 const statusesStore = useStatusesStore()
+const projectsStore = useProjectsStore()
+const router = useRouter()
+
 const statuses = computed(() => statusesStore.statuses)
 
-const cols = computed(() => (statuses.value.length > 0 ? 12 / statuses.value.length : 12))
+const props = defineProps<{ selectedIssue?: string }>()
 
 function getIssues(statusId: number) {
   return issuesStore.issuesObj.get(statusId) ?? []
 }
 
-function showLog() {
-  console.log('issue obj', issuesStore.issuesObj)
+const dialog = ref(false)
+
+const items = [
+  {
+    id: 1,
+    title: 'bla',
+  },
+]
+const projectMenu: DynamicMenuElement[] = [
+  {
+    id: 1,
+    title: 'Add people',
+    icon: 'mdi-account',
+    disabled: true,
+    click: projectSettings,
+  },
+  {
+    id: 2,
+    title: 'Settings',
+    icon: 'mdi-cog',
+    click: projectSettings,
+  },
+  { id: 3, type: 'divider' },
+  {
+    id: 4,
+    title: 'Delete',
+    icon: 'mdi-trash-can',
+    color: 'error',
+    click: deleteProject,
+  },
+]
+
+async function findById(val?: string) {
+  if (!val) return
+
+  const id = +val.split('-')[1]
+  await issuesStore.findById(id)
+  if (issuesStore.selectedIssue) dialog.value = true
 }
 
-watchEffect(() => {
-  issuesStore.genIssuesObj(statuses.value)
-})
+function deleteProject() {
+  console.log('blat')
+}
+
+function projectSettings() {
+  console.log('blat2')
+}
+
+function onCancel() {
+  router.push({ name: 'issues' })
+  dialog.value = false
+}
+
+watchEffect(async () => await findById(props.selectedIssue))
+watchEffect(() => issuesStore.genIssuesObj(statuses.value))
 </script>
 
 <template>
   <div>
     <v-row>
-      <v-col cols="3" align="center">
-        <v-text-field hide-details label="search" prepend-inner-icon="mdi-magnify" />
-      </v-col>
-      <v-col>
-        <v-btn icon="mdi-circle" size="default" density="comfortable" @click="showLog"></v-btn>
+      <v-col cols="auto">
+        <router-link to="/projects" class="text-black text-decoration-underline text-body-1 cursor-pointer">
+          Projects
+        </router-link>
       </v-col>
     </v-row>
-    <v-row v-if="statuses.length">
-      <v-col :cols="cols" v-for="status in statuses" :key="status.id">
+    <v-row>
+      <v-col cols="auto">
+        <v-hover v-slot="{ isHovering, props }">
+          <div v-bind="props" class="d-flex ga-2 align-center mb-4">
+            <v-avatar size="28" color="primary" border rounded></v-avatar>
+            <div class="text-h5 text-capitalize">{{ projectsStore.projects[0]?.name }}</div>
+            <dynamic-menu v-bind="props" :isHovering="isHovering" :menu="projectMenu"></dynamic-menu>
+          </div>
+        </v-hover>
+      </v-col>
+    </v-row>
+    <div class="d-flex ga-2 mb-4">
+      <v-text-field max-width="15rem" hide-details label="search" prepend-inner-icon="mdi-magnify" />
+      <v-select max-width="10rem" hide-details :items></v-select>
+      <v-btn class="mx-2" icon>
+        <v-avatar icon="mdi-account-outline" color="grey-lighten-4"></v-avatar>
+      </v-btn>
+    </div>
+    <div v-if="statuses.length" class="d-flex ga-2 my-2 overflow-x-auto">
+      <div v-for="status in statuses" :key="status.id">
         <issues-by-status-view :status="status" :issues="getIssues(status.id)" />
-      </v-col>
-    </v-row>
+      </div>
+      <v-btn variant="tonal" icon rounded size="small" density="default">
+        <v-icon size="default">mdi-plus</v-icon>
+      </v-btn>
+    </div>
+
+    <v-dialog v-model="dialog" width="auto" @after-leave="onCancel">
+      <issue-item-details
+        v-if="issuesStore.selectedIssue"
+        @on-cancel="onCancel"
+        :selected-issue="issuesStore.selectedIssue"
+      />
+    </v-dialog>
   </div>
 </template>
 
diff --git a/web/src/views/ProjectRootView.vue b/web/src/views/ProjectRootView.vue
index 1817adb..a35dd30 100644
--- a/web/src/views/ProjectRootView.vue
+++ b/web/src/views/ProjectRootView.vue
@@ -1,19 +1,92 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useProjectsStore } from '@/stores/projects.ts'
 import { storeToRefs } from 'pinia'
+import DynamicMenu from '@/components/DynamicMenu.vue'
+import type { DynamicMenuElement, TableHeader } from '@/types.ts'
+import ProjectCreateFlow from '@/components/ProjectCreateFlow.vue'
 
 const projectsStore = useProjectsStore()
 const { projects } = storeToRefs(projectsStore)
 
+const headers: TableHeader[] = [
+  { title: 'Name', key: 'name', width: 400 },
+  { title: 'Key', key: 'key' },
+  { title: 'Actions', key: 'actions', width: 100, align: 'end', sortable: false },
+]
+
+const menu: DynamicMenuElement[] = [
+  {
+    id: 1,
+    title: 'settings',
+    icon: 'mdi-cog',
+    click: projectSettings,
+  },
+  {
+    id: 2,
+    type: 'divider',
+  },
+  {
+    id: 3,
+    title: 'delete',
+    icon: 'mdi-trash-can',
+    color: 'error',
+    click: deleteProject,
+  },
+]
+
+const dialog = ref(false)
+
+function projectSettings(id?: number) {
+  console.log('d', id)
+}
+
+async function deleteProject(id?: number) {
+  console.log('p', id)
+  if (id) await projectsStore.remove(id)
+}
+
 onMounted(async () => {})
 </script>
 
 <template>
   <div>
-    <div v-for="project in projects" :key="project.id">
-      {{ project.name }} - {{ project.description }} - {{ project.key }}
+    <div class="d-flex align-center justify-space-between mb-4">
+      <div class="text-h5 font-weight-bold">Projects</div>
+
+      <v-dialog transition="dialog-bottom-transition" max-width="500" v-model="dialog">
+        <template v-slot:activator="{ props: activatorProps }">
+          <v-btn v-bind="activatorProps" density="comfortable" variant="flat" color="primary">
+            <span class="text-body-2">Create project</span>
+          </v-btn>
+        </template>
+        <project-create-flow v-model:dialog="dialog"></project-create-flow>
+      </v-dialog>
     </div>
+    <div class="d-flex ga-4 w-100 w-md-25">
+      <v-text-field :disabled="true" prepend-inner-icon="mdi-magnify" placeholder="search projects"></v-text-field>
+    </div>
+    <v-data-table :headers hover hide-default-footer class="border rounded" density="compact" :items="projects">
+      <template #[`item.name`]="{ item }">
+        <div class="d-flex ga-2">
+          <v-avatar color="primary" border rounded size="25"></v-avatar>
+          <v-hover v-slot="{ isHovering, props }">
+            <router-link
+              v-bind="props"
+              class="text-primary text-body-1"
+              :class="{ 'text-decoration-none': !isHovering }"
+              :to="`/projects/${item.key}/issues`"
+            >
+              {{ item.name }}
+            </router-link>
+          </v-hover>
+        </div>
+      </template>
+      <template #[`item.actions`]="{ item }">
+        <span>{{ item.id }}</span>
+        <dynamic-menu :menu :item-id="item.id"></dynamic-menu>
+      </template>
+    </v-data-table>
   </div>
 </template>
 
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 5a75915..e6c21fa 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -6,6 +6,7 @@ import vue from '@vitejs/plugin-vue'
 // https://vite.dev/config/
 export default defineConfig({
   server: {
+    host: '0.0.0.0',
     proxy: {
       '/api': 'http://localhost:3000',
     },