Edit Bookmark

\n \n ×\n \n

\n\n

\n {/* Title - Editable */}\n

\n \n Title\n \n setTitle(e.target.value)}\n placeholder=\"Enter bookmark title\"\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition\"\n disabled={loading}\n />\n

\n\n {/* URL - Editable */}\n

\n \n URL\n \n setUrl(e.target.value)}\n placeholder=\"https://example.com\"\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition\"\n disabled={loading}\n />\n

\n\n {/* Description - Editable */}\n

\n \n Description\n \n setDescription(e.target.value)}\n placeholder=\"Enter bookmark description (optional)\"\n rows={3}\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition resize-y\"\n disabled={loading}\n />\n

\n\n {/* Tags - Editable */}\n

\n \n Tags\n \n\n {/* Current tags */}\n {tags.length > 0 && (\n

\n {tags.map((tag) => (\n \n {tag}\n handleRemoveTag(tag)}\n className=\"text-gray-500 hover:text-red-600 ml-1\"\n disabled={loading}\n >\n ×\n \n \n ))}\n

\n )}\n\n {/* Add tag input */}\n

\n {\n setTagInput(e.target.value);\n setShowSuggestions(true);\n }}\n onKeyDown={handleTagInputKeyDown}\n onFocus={() => setShowSuggestions(true)}\n onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}\n placeholder=\"Add tags...\"\n className=\"w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-coral focus:border-transparent outline-none transition\"\n disabled={loading}\n />\n\n {/* Suggestions dropdown */}\n {showSuggestions && suggestions.length > 0 && (\n

\n {suggestions.map((tag) => (\n handleAddTag(tag.value)}\n className=\"w-full text-left px-4 py-2 hover:bg-gray-50 text-gray-700 text-sm\"\n >\n {tag.value}\n \n ))}\n

\n )}\n

\n\n

\n Type to search existing tags or press Enter to create a new one\n

\n\n {/* Created date */}\n

\n Created {new Date(bookmark.createdAt).toLocaleDateString()} at{\" \"}\n {new Date(bookmark.createdAt).toLocaleTimeString()}\n

\n\n {error && (\n

\n {error}\n

\n )}\n

\n\n {/* Footer with action buttons */}\n

\n \n Cancel\n \n \n {loading\n ? (\n \n

\n Saving...\n \n )\n : (\n \"Save Changes\"\n )}\n \n

\n\n \n Delete Bookmark\n \n

\n );\n}\n","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/nbbaier/kipclip-appview/code/frontend/components/EditBookmark.tsx","extension","actionData","errors"]