Skip to content

Commit a192cb5

Browse files
ItzNotABugItzNotABug
committed
update: flow.
1 parent e25a0fa commit a192cb5

File tree

7 files changed

+92
-436
lines changed

7 files changed

+92
-436
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
"@ai-sdk/svelte": "^1.1.24",
2525
"@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@f08cb74",
2626
"@appwrite.io/pink-icons": "0.25.0",
27-
"@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@4e5cc18",
27+
"@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@077179c",
2828
"@appwrite.io/pink-legacy": "^1.0.3",
29-
"@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@4e5cc18",
29+
"@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@077179c",
3030
"@faker-js/faker": "^9.9.0",
3131
"@popperjs/core": "^2.11.8",
3232
"@sentry/sveltekit": "^8.38.0",

‎pnpm-lock.yaml‎

Lines changed: 10 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/routes/(console)/project-[region]-[project]/databases/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
import Table from './table.svelte';
1515
import { registerCommands } from '$lib/commandCenter';
1616
import { canWriteDatabases } from '$lib/stores/roles';
17-
import { Icon, Layout } from '@appwrite.io/pink-svelte';
17+
import { Icon } from '@appwrite.io/pink-svelte';
1818
import { IconPlus } from '@appwrite.io/pink-icons-svelte';
1919
import EmptySearch from '$lib/components/emptySearch.svelte';
2020

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte‎

Lines changed: 78 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -21,26 +21,22 @@
2121
import {
2222
type ColumnInput,
2323
mapSuggestedColumns,
24-
mockSuggestions,
2524
type SuggestedColumnSchema,
2625
tableColumnSuggestions,
27-
basicColumnOptions
26+
basicColumnOptions,
27+
mockSuggestions
2828
} from './store';
2929
import { addNotification } from '$lib/stores/notifications';
3030
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
3131
import { sleep } from '$lib/helpers/promises';
3232
import { invalidate } from '$app/navigation';
3333
import { Dependencies } from '$lib/constants';
3434
import type { Columns } from '../table-[table]/store';
35-
36-
import { isDev } from '$lib/system';
3735
import { columnOptions } from '../table-[table]/columns/store';
3836
import Options from './options.svelte';
3937
import { InputSelect, InputText } from '$lib/elements/forms';
4038
import { Confirm } from '$lib/components';
4139
42-
// No props needed - we handle column creation directly
43-
4440
let resizeObserver: ResizeObserver;
4541
let spreadsheetContainer: HTMLElement;
4642
@@ -262,7 +258,8 @@
262258
size: col.size,
263259
min: col.min,
264260
max: col.max,
265-
width: 180,
261+
// TODO: @itznotabug, we should use a dynamic min width based on column's name.
262+
width: { min: 180 },
266263
icon: columnOption?.icon,
267264
draggable: false,
268265
resizable: false
@@ -323,36 +320,62 @@
323320
await suggestColumns();
324321
});
325322
323+
function resetSuggestionsStore(fullReset: boolean = true) {
324+
if (fullReset) {
325+
// these are referenced in
326+
// `table-[table]/+page.svelte`
327+
$tableColumnSuggestions.table = null;
328+
$tableColumnSuggestions.enabled = false;
329+
}
330+
331+
$tableColumnSuggestions.context = null;
332+
$tableColumnSuggestions.thinking = false;
333+
}
334+
335+
/**
336+
* Mark this as `true` when developing locally,
337+
* make sure not to spend credits unnecessarily!
338+
*/
339+
const useMockSuggestions = false;
326340
async function suggestColumns() {
327341
$tableColumnSuggestions.thinking = true;
342+
let suggestedColumns: {
343+
total: number;
344+
columns: ColumnInput[];
345+
} = {
346+
total: 0,
347+
columns: []
348+
};
328349
329350
try {
330-
await sleep(1250);
331-
const suggestedColumns = isDev
332-
? mockSuggestions
333-
: ((await sdk
334-
.forProject(page.params.region, page.params.project)
335-
.console.suggestColumns({
336-
databaseId: page.params.database,
337-
tableId: page.params.table,
338-
context: $tableColumnSuggestions.context ?? undefined
339-
})) as unknown as {
340-
total: number;
341-
columns: ColumnInput[];
342-
});
351+
if (useMockSuggestions) {
352+
/* animation */
353+
await sleep(1250);
354+
suggestedColumns = mockSuggestions;
355+
} else {
356+
suggestedColumns = (await sdk
357+
.forProject(page.params.region, page.params.project)
358+
.console.suggestColumns({
359+
databaseId: page.params.database,
360+
tableId: page.params.table,
361+
context: $tableColumnSuggestions.context ?? undefined
362+
})) as unknown as {
363+
total: number;
364+
columns: ColumnInput[];
365+
};
366+
}
343367
368+
const tableName = $tableColumnSuggestions.table?.name ?? undefined;
344369
trackEvent(Submit.ColumnSuggestions, {
345-
total: suggestedColumns.total,
346-
tableName: $tableColumnSuggestions.table?.name ?? undefined
370+
tableName,
371+
total: suggestedColumns.total
347372
});
348373
349374
customColumns = mapSuggestedColumns(suggestedColumns.columns);
350375
351-
// Set hasTransitioned to disable future animations after initial state change
352376
if (customColumns.length > 0) {
353-
setTimeout(() => (hasTransitioned = true), 300); // After transition completes
354-
355-
setTimeout(() => scrollToFirstCustomColumn(), 100);
377+
setTimeout(scrollToFirstCustomColumn, 100);
378+
setTimeout(() => (hasTransitioned = true), 300);
356379
}
357380
} catch (error) {
358381
addNotification({
@@ -362,10 +385,7 @@
362385
363386
trackError(error, Submit.ColumnSuggestions);
364387
} finally {
365-
// $tableColumnSuggestions.table = null;
366-
$tableColumnSuggestions.context = null;
367-
// $tableColumnSuggestions.enabled = false;
368-
$tableColumnSuggestions.thinking = false;
388+
resetSuggestionsStore(false);
369389
}
370390
}
371391
@@ -511,11 +531,6 @@
511531
512532
await invalidate(Dependencies.TABLE);
513533
514-
// Reset state
515-
customColumns = [];
516-
$tableColumnSuggestions.context = null;
517-
$tableColumnSuggestions.enabled = false;
518-
519534
addNotification({
520535
type: 'success',
521536
message: 'Columns created successfully'
@@ -528,7 +543,6 @@
528543
type: 'error',
529544
message: error.message
530545
});
531-
} finally {
532546
creatingColumns = false;
533547
}
534548
}
@@ -539,6 +553,9 @@
539553
if (scrollAnimationFrame) {
540554
cancelAnimationFrame(scrollAnimationFrame);
541555
}
556+
557+
customColumns = [];
558+
resetSuggestionsStore();
542559
});
543560
544561
function isCustomColumn(id: string) {
@@ -559,8 +576,8 @@
559576
aria-hidden="true"
560577
bind:this={rangeOverlayEl}
561578
class="columns-range-overlay"
562-
class:thinking={$tableColumnSuggestions.thinking}
563-
class:no-transition={hasTransitioned && customColumns.length > 0}>
579+
class:no-transition={hasTransitioned && customColumns.length > 0}
580+
class:thinking={$tableColumnSuggestions.thinking || creatingColumns}>
564581
</div>
565582
</div>
566583

@@ -595,6 +612,7 @@
595612
{#snippet children(toggle)}
596613
<Spreadsheet.Header.Cell
597614
{root}
615+
isEditable
598616
column={column.id}
599617
on:contextmenu={(event) => {
600618
if (isColumnInteractable) {
@@ -760,31 +778,32 @@
760778
<Button.Button
761779
size="xs"
762780
variant="secondary"
763-
on:click={() => {
764-
$tableColumnSuggestions.context = null;
765-
$tableColumnSuggestions.enabled = false;
766-
$tableColumnSuggestions.thinking = false;
767-
}}
781+
on:click={() => resetSuggestionsStore()}
768782
>Cancel
769783
</Button.Button>
770784
</svelte:fragment>
771785
</FloatingActionBar>
772786
</div>
773787
{:else if customColumns.length > 0 && showFloatingBar}
774-
<div class="floating-action-wrapper expanded">
788+
<div
789+
class="floating-action-wrapper"
790+
class:expanded={!creatingColumns}
791+
class:creating-columns={creatingColumns}>
775792
<FloatingActionBar>
776793
<svelte:fragment slot="start">
777-
{#if creatingColumns}
778-
<Spinner size="s" />
779-
{/if}
794+
<Layout.Stack gap="xl" direction="row" alignItems="center">
795+
{#if creatingColumns}
796+
<Spinner size="s" />
797+
{/if}
780798

781-
<Typography.Text style="white-space: nowrap">
782-
{creatingColumns
783-
? 'Creating columns...'
784-
: $isSmallViewport
785-
? 'Review and edit columns'
786-
: 'Review and edit suggested columns before applying'}
787-
</Typography.Text>
799+
<Typography.Text style="white-space: nowrap">
800+
{creatingColumns
801+
? 'Creating columns...'
802+
: $isSmallViewport
803+
? 'Review and edit columns'
804+
: 'Review and edit suggested columns before applying'}
805+
</Typography.Text>
806+
</Layout.Stack>
788807
</svelte:fragment>
789808

790809
<svelte:fragment slot="end">
@@ -814,8 +833,7 @@
814833
bind:open={confirmDismiss}
815834
onSubmit={() => {
816835
customColumns = [];
817-
$tableColumnSuggestions.context = null;
818-
$tableColumnSuggestions.enabled = false;
836+
resetSuggestionsStore();
819837
}}>
820838
Are you sure you want to dismiss these columns suggested by AI? This action is irreversible.
821839
</Confirm>
@@ -900,6 +918,10 @@
900918
max-width: 400px !important;
901919
}
902920
}
921+
922+
&.creating-columns :global(:first-child) {
923+
max-width: 300px !important;
924+
}
903925
}
904926
905927
& :global(.spreadsheet-container) {

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
export * from './store';
22
export { default as Empty } from './empty.svelte';
33
export { default as Input } from './input.svelte';
4-
export { default as Review } from './review.svelte';

0 commit comments

Comments
 (0)