chore: update

views/src/App.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import type { ImagesData } from './types'
 import { computed, ref } from 'vue'
 import List from './components/List.vue'
-import SearchBar from './SearchBar.vue'
+import SearchBar from './components/SearchBar.vue'
+import { imageSize, isLandscape } from './state'
 
 // const { window, workspace } = acquireVsCodeApi()
 
@@ -15,22 +17,25 @@ window.addEventListener('message', (e) => {
 
   if (receiveData.type === 'initImages' || receiveData.type === 'updateImages') {
     vscodePostData.value = receiveData.data
-    console.log('🚀 ~ window.addEventListener ~ receiveData.data:', receiveData.data)
   }
 })
-
-const imageSize = ref<PineConeImageSize>('medium')
 </script>
 
 <template>
-  <div v-if="vscodePostData" space-y-4>
-    <SearchBar v-model:search="search" v-model:image-size="imageSize" />
-
-    <!-- Breadcrumbs -->
-    <div border-b-2 border-amber border-solid pb-2 class="text-base sm:text-lg">
-      {{ vscodePostData.currentAssetsPath }} ({{ vscodePostData.imagesData.length }})
+  <div
+    v-if="vscodePostData"
+    flex="~" space-y-4 :class="{
+      'flex-row': isLandscape,
+      'flex-col': !isLandscape,
+    }"
+  >
+    <SearchBar />
+
+    <div w-full space-y-2>
+      <div border-b-2 border-amber border-solid pb-2 class="text-base sm:text-lg">
+        {{ vscodePostData.currentAssetsPath }} ({{ vscodePostData.imagesData.length }})
+      </div>
+      <List :data="imagesDataFilter" :size="imageSize" />
     </div>
-
-    <List :data="imagesDataFilter" :size="imageSize" />
   </div>
 </template>

views/src/components/List.vue

@@ -5,26 +5,11 @@ import type { PineConeImageSize } from '../types'
 import { computed, defineProps } from 'vue'
 import { imageListMock } from '../schema.ts'
 
-// const props = withDefaults(defineProps<{
-//   data: ImageListData
-//   size: PineConeImageSize
-// }>(), {
-//   data: imageListMock,
-//   size: 'medium',
-// })
-// const props = withDefaults(, {
-//   data: () => imageListMock,
-//   size: 'medium',
-// })
-
 const { data = imageListMock, size = 'medium' } = defineProps<{
   data?: ImageListData
   size?: PineConeImageSize
 }>()
 
-// basename: '1.png',
-// extname: '.png'
-
 const gridRepeatMode = computed(() => {
   switch (size) {
     case 'small':

views/src/components/SearchBarLandscape.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const searchVModel = defineModel('search')
+// const searchVModel = defineModel('search')
 const imageSizeVModel = defineModel('imageSize')
 </script>
 

views/src/main.ts

@@ -1,9 +1,9 @@
 import { createApp } from 'vue'
-// import App from './App.vue'
-import HelloWorld from './components/HelloWorld.vue'
+import App from './App.vue'
+// import HelloWorld from './components/HelloWorld.vue'
 // import './style.css'
 import '@unocss/reset/tailwind-compat.css'
 import 'virtual:uno.css'
 
-// createApp(App).mount('#app')
-createApp(HelloWorld).mount('#app')
+createApp(App).mount('#app')
+// createApp(HelloWorld).mount('#app')

views/src/types.d.ts

@@ -1,4 +1,4 @@
-declare type ImagesData = {
+export type ImagesData = {
   imageFileUri: string
   imageVsCodePath: string
   basename: string

views/tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/main.ts","./src/types.d.ts","./src/vite-env.d.ts","./src/app.vue","./src/components/helloworld.vue","./src/components/list.vue"],"version":"5.6.3"}
+{"root":["./src/main.ts","./src/schema.ts","./src/state.ts","./src/types.d.ts","./src/vite-env.d.ts","./src/app.vue","./src/components/helloworld.vue","./src/components/list.vue","./src/components/searchbar.vue","./src/components/searchbarlandscape.vue","./src/components/searchbarportrait.vue"],"version":"5.6.3"}