nandi.uk
This repository has no description
feat: revert composer card tab to use url input
It adds a bit of a friction and makes less sense to have search on this drawer. It's fine for other areas (e.g. adding from a collection).
author
pdelfan
date
(May 21, 2026, 11:00 AM -0700)
commit
4631c3ae
4631c3aef2d83cc1b25d97be74e07260b6b80338
parent
b9776de6
b9776de62b249aafe21d9b591b827482160a3fd0
+11
-53
+11
-53
src/webapp/features/composer/components/Composer.tsx
+11
-53
src/webapp/features/composer/components/Composer.tsx
···
18
18
VisuallyHidden,
19
19
Scroller,
20
20
} from '@mantine/core';
21
-
import { useState, useEffect, useRef, Suspense } from 'react';
21
+
import { useState, useEffect, Suspense } from 'react';
22
22
import { Collection, CollectionAccessType } from '@semble/types';
23
23
import { DEFAULT_OVERLAY_PROPS } from '@/styles/overlays';
24
24
import { useForm } from '@mantine/form';
···
30
30
import { useDisclosure } from '@mantine/hooks';
31
31
import { BiCollection } from 'react-icons/bi';
32
32
import { IoMdCheckmark, IoMdLink } from 'react-icons/io';
33
-
import UrlSearchInput from '@/features/connections/components/addConnectionDrawer/UrlSearchInput';
34
33
import { track } from '@vercel/analytics';
35
34
import useMyCollections from '@/features/collections/lib/queries/useMyCollections';
36
35
import { isMarginUri, getMarginUrl } from '@/lib/utils/margin';
···
85
84
pagePath: pathname,
86
85
});
87
86
88
-
const rawUrlInput = useRef(props.initialUrl ?? '');
89
-
90
87
const cardForm = useForm({
91
88
initialValues: {
92
89
url: props.initialUrl || '',
93
90
note: '',
94
91
collections: selectedCollections,
95
92
},
96
-
validateInputOnChange: false,
97
-
validateInputOnBlur: true,
98
-
validate: {
99
-
url: (value) => {
100
-
if (!value || value.trim() === '') {
101
-
return 'URL is required';
102
-
}
103
-
try {
104
-
new URL(value);
105
-
return null;
106
-
} catch {
107
-
return 'Please enter a valid URL';
108
-
}
109
-
},
110
-
},
111
93
});
112
94
113
95
// Collection form state
···
132
114
useEffect(() => {
133
115
if (props.initialUrl) {
134
116
cardForm.setValues({ url: props.initialUrl });
135
-
rawUrlInput.current = props.initialUrl;
136
117
}
137
118
}, [props.initialUrl]);
138
119
···
143
124
collectionForm.reset();
144
125
setSelectedCollections(initialCollections);
145
126
setMode('card');
146
-
rawUrlInput.current = '';
147
127
}
148
128
}, [props.isOpen]);
149
129
150
130
const handleAddCard = (e: React.FormEvent) => {
151
131
e.preventDefault();
152
-
153
-
// Auto-confirm a valid URL that was typed/pasted but not explicitly selected
154
-
if (!cardForm.values.url && rawUrlInput.current) {
155
-
try {
156
-
new URL(rawUrlInput.current);
157
-
cardForm.setFieldValue('url', rawUrlInput.current);
158
-
} catch {
159
-
// let validation handle it
160
-
}
161
-
}
162
-
163
-
const validation = cardForm.validate();
164
-
if (validation.hasErrors) return;
165
-
166
132
track('add new card');
167
133
168
134
// Capture values before any state changes
···
188
154
props.onClose();
189
155
setSelectedCollections(initialCollections);
190
156
window.history.replaceState({}, '', window.location.pathname);
191
-
rawUrlInput.current = '';
192
157
cardForm.reset();
193
158
194
159
addCard.mutate({ ...cardData, notificationId });
···
303
268
style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
304
269
>
305
270
<Stack gap={'xl'} style={{ flex: 1 }}>
306
-
<UrlSearchInput
271
+
<TextInput
307
272
id="url"
308
273
label="URL"
309
-
placeholder="Search or paste a link"
310
-
value={cardForm.values.url}
311
-
error={cardForm.errors.url}
312
-
onUrlSelect={(url) => cardForm.setFieldValue('url', url)}
313
-
onUrlClear={() => {
314
-
rawUrlInput.current = '';
315
-
cardForm.setFieldValue('url', '');
316
-
}}
317
-
onInputChange={(raw) => {
318
-
rawUrlInput.current = raw;
319
-
}}
320
-
inputProps={{
321
-
variant: 'filled',
322
-
size: 'md',
323
-
leftSection: <IoMdLink size={22} />,
324
-
}}
274
+
type="url"
275
+
placeholder="https://www.example.com"
276
+
variant="filled"
277
+
required
278
+
size="md"
279
+
leftSection={<IoMdLink size={22} />}
280
+
data-autofocus
281
+
key={cardForm.key('url')}
282
+
{...cardForm.getInputProps('url')}
325
283
/>
326
284
327
285
<Stack gap={0}>