refactor(fe2): Further gendo polishing (#3814)

* Add ... to all suggested prompts * Update copy and remove some icons * Update spacings * Increase gaps * Some more polishing from call * Add submit on enter * Fix overflow * Typo * keyup > keypress --------- Co-authored-by: Benjamin Ottensten <[email protected]>
specklesystems · Jan 14, 2025 · 2539025 · 2539025
1 parent 9636a56
commit 2539025
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 49 deletions.
diff --git a/packages/frontend-2/components/viewer/gendo/Item.vue b/packages/frontend-2/components/viewer/gendo/Item.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="detailedRender">
+  <div v-if="detailedRender" class="mb-2">
     <div class="relative">
       <div v-if="detailedRender.status === 'COMPLETED' && renderUrl" class="group">
         <button class="relative flex cursor-zoom-in" @click="openPreview">
@@ -55,7 +55,7 @@
       </div>
       <div
         v-if="detailedRender.status !== 'COMPLETED'"
-        class="relative w-full h-32 rounded-lg flex items-center justify-center"
+        class="relative w-full h-40 rounded-lg flex items-center justify-center"
       >
         <div
           :class="`absolute rounded-lg w-full h-full top-0 ${
@@ -66,7 +66,7 @@
         <ExclamationCircleIcon v-else class="w-6 text-danger" />
       </div>
       <div
-        class="absolute bottom-2 left-2 right-2 space-x-2 flex items-center min-w-0 max-w-full overflow-hidden z-10"
+        class="absolute bottom-2 left-2 right-2 space-x-2 flex items-center min-w-0 w-fit max-w-full overflow-hidden z-10"
       >
         <div
           class="bg-foundation p-0.5 flex items-center gap-x-1 min-w-0 max-w-full rounded-md"

diff --git a/packages/frontend-2/components/viewer/gendo/List.vue b/packages/frontend-2/components/viewer/gendo/List.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col gap-y-2 max-h-64 2xl:max-h-96 overflow-y-scroll overflow-x-hidden simple-scroll pb-4"
+    class="flex flex-col gap-y-2 max-h-64 2xl:max-h-96 overflow-y-auto overflow-x-hidden simple-scrollbar"
   >
     <ViewerGendoItem
       v-for="render in renders"

diff --git a/packages/frontend-2/components/viewer/gendo/Panel.vue b/packages/frontend-2/components/viewer/gendo/Panel.vue
@@ -15,14 +15,12 @@
         </CommonBadge>
       </div>
     </template>
-    <div class="pt-2">
-      <div class="px-4 flex flex-col gap-y-2">
-        <CommonAlert v-if="showAlert" :color="alertColor" size="xs">
-          <template #title>
-            {{ alertMessage }}
-          </template>
+    <div class="pt-3">
+      <div class="px-3 flex flex-col gap-y-3">
+        <CommonAlert v-if="!limits" color="danger" size="xs">
+          <template #title>No credits available</template>
         </CommonAlert>
-        <div class="flex flex-col gap-y-2">
+        <div class="flex flex-col gap-y-3">
           <FormTextArea
             v-model="prompt"
             name="prompt"
@@ -31,6 +29,9 @@
             color="foundation"
             :disabled="isLoading || timeOutWait || isOutOfCredits"
             textarea-classes="sm:!min-h-24"
+            @keypress.enter.prevent="
+              !isLoading && !timeOutWait && !isOutOfCredits && prompt && enqueMagic()
+            "
           />
           <div class="flex justify-between gap-2 items-center text-foreground-2">
             <FormButton
@@ -41,28 +42,29 @@
               target="_blank"
             >
               <div class="flex items-center gap-1 text-foreground-2 font-normal">
-                <span>Writing prompts</span>
+                <span>Learn to prompt</span>
                 <ArrowTopRightOnSquareIcon class="h-3 w-3" />
               </div>
             </FormButton>
 
-            <FormButton
-              :disabled="!prompt || isLoading || timeOutWait || isOutOfCredits"
-              @click="enqueMagic()"
-            >
-              Generate
-            </FormButton>
+            <View v-tippy="isOutOfCredits ? 'No credits remaining' : undefined">
+              <FormButton
+                :disabled="!prompt || isLoading || timeOutWait || isOutOfCredits"
+                @click="enqueMagic()"
+              >
+                Generate
+              </FormButton>
+            </View>
           </div>
         </div>
         <ViewerGendoList @reuse-prompt="prompt = $event" />
       </div>
       <div
-        class="flex w-full items-center justify-between gap-2 border-t border-outline-2 py-1 px-2"
+        class="flex w-full items-center justify-between gap-2 border-t border-outline-2 py-1 px-1"
       >
         <FormButton color="subtle" size="sm" @click="isFeedbackOpen = true">
           <div class="flex items-center gap-1 text-foreground-2 font-normal">
-            <IconFeedback class="h-3 w-3" />
-            <span>Feedback</span>
+            <span>Give us feedback</span>
           </div>
         </FormButton>
         <FormButton
@@ -74,12 +76,11 @@
         >
           <div class="flex items-center gap-1 text-foreground-2 font-normal">
             <span>Terms</span>
-            <ArrowTopRightOnSquareIcon class="h-3 w-3" />
           </div>
         </FormButton>
       </div>
     </div>
-    <template v-if="!showAlert && limits" #actions>
+    <template v-if="limits" #actions>
       <div class="text-body-2xs p-1">
         {{ limits.used }}/{{ limits.limit }} free renders used
         <span class="hidden-under-250">this month</span>
@@ -121,11 +122,11 @@ const timeOutWait = ref(false)
 const isFeedbackOpen = ref(false)
 
 const suggestedPrompts = ref<string[]>([
-  'Example: Minimalist Scandinavian interior with warm natural lighting',
-  'Example: Luxury penthouse with floor-to-ceiling windows and city views',
-  'Example: Cozy industrial loft with exposed brick and steel elements',
-  'Example: Modern office space with biophilic design elements',
-  'Example: High-end retail space with dramatic lighting'
+  'Example: Minimalist Scandinavian interior with warm natural lighting...',
+  'Example: Luxury penthouse with floor-to-ceiling windows and city views...',
+  'Example: Cozy industrial loft with exposed brick and steel elements...',
+  'Example: Modern office space with biophilic design elements...',
+  'Example: High-end retail space with dramatic lighting...'
 ])
 
 const { result, refetch } = useQuery(activeUserGendoLimits)
@@ -143,27 +144,6 @@ const isOutOfCredits = computed(() => {
   return (limits.value?.used || 0) >= (limits.value?.limit || 0)
 })
 
-const isNearingLimit = computed(() => {
-  if (!limits.value) return
-  const usagePercent = (limits.value?.used / limits.value?.limit) * 100
-  return usagePercent >= 80
-})
-
-const alertColor = computed(() => {
-  if (isOutOfCredits.value) return 'danger'
-  if (isNearingLimit.value) return 'warning'
-  return 'neutral'
-})
-
-const alertMessage = computed(() => {
-  if (!limits.value) return 'No credits available'
-  return `${limits.value.used}/${limits.value.limit} free renders used this month`
-})
-
-const showAlert = computed(
-  () => !limits.value || isNearingLimit.value || isOutOfCredits.value
-)
-
 const enqueMagic = async () => {
   isLoading.value = true
   const [depthData, width, height] = await viewerInstance

diff --git a/packages/frontend-2/lib/common/generated/gql/graphql.ts b/packages/frontend-2/lib/common/generated/gql/graphql.ts
@@ -4285,6 +4285,10 @@ export type WorkspaceCreationStateInput = {
   workspaceId: Scalars['ID']['input'];
 };
 
+export type WorkspaceDismissInput = {
+  workspaceId: Scalars['ID']['input'];
+};
+
 export type WorkspaceDomain = {
   __typename?: 'WorkspaceDomain';
   domain: Scalars['String']['output'];
@@ -4378,6 +4382,8 @@ export type WorkspaceMutations = {
   delete: Scalars['Boolean']['output'];
   deleteDomain: Workspace;
   deleteSsoProvider: Scalars['Boolean']['output'];
+  /** Dismiss a workspace from the discoverable list, behind the scene a join request is created with the status "dismissed" */
+  dismiss: Scalars['Boolean']['output'];
   invites: WorkspaceInviteMutations;
   join: Workspace;
   leave: Scalars['Boolean']['output'];
@@ -4415,6 +4421,11 @@ export type WorkspaceMutationsDeleteSsoProviderArgs = {
 };
 
 
+export type WorkspaceMutationsDismissArgs = {
+  input: WorkspaceDismissInput;
+};
+
+
 export type WorkspaceMutationsJoinArgs = {
   input: JoinWorkspaceInput;
 };
@@ -8117,6 +8128,7 @@ export type WorkspaceMutationsFieldArgs = {
   delete: WorkspaceMutationsDeleteArgs,
   deleteDomain: WorkspaceMutationsDeleteDomainArgs,
   deleteSsoProvider: WorkspaceMutationsDeleteSsoProviderArgs,
+  dismiss: WorkspaceMutationsDismissArgs,
   invites: {},
   join: WorkspaceMutationsJoinArgs,
   leave: WorkspaceMutationsLeaveArgs,