commit e3b85c379499a441d07721c1f1e4f17c8647c4f6 · ptr.pet/nucleus

+95 -32

src/components/PostComposer.svelte

···

       45
        
       

     

       46
        
       	let postText = $state('');

     

       47
        
       	let info = $state('');

     

       0
        
       
     

       0
        
       
     

       48
        
       

     

       49
        
       	const doPost = () => {

     

       0
        
       
     

       0
        
       
     

       50
        
       		post(postText).then((res) => {

     

       51
        
       			if (res.ok) {

     

       52
        
       				onPostSent(res.value.uri, res.value.record);

     
···

       58
        
       			}

     

       59
        
       		});

     

       60
        
       	};

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       61
        
       </script>

     

       62
        
       

     

       63
       -
       <div

     

       64
       -
       	class="flex min-h-16 max-w-full items-center rounded-sm border-2 px-1 shadow-lg backdrop-blur-sm"

     

       65
       -
       	style="background: {theme.accent}18; border-color: {theme.accent}66;"

     

       66
       -
       >

     

       67
       -
       	<div class="w-full p-1">

     

       68
       -
       		{#if info.length > 0}

     

       69
       -
       			<div

     

       70
       -
       				class="rounded-sm px-3 py-1.5 text-center font-medium text-nowrap overflow-ellipsis"

     

       71
       -
       				style="background: {theme.accent}22; color: {theme.accent};"

     

       72
       -
       			>

     

       73
       -
       				{info}

     

       74
       -
       			</div>

     

       75
       -
       		{:else}

     

       76
       -
       			<div class="flex gap-2">

     

       77
       -
       				<input

     

       78
       -
       					bind:value={postText}

     

       79
       -
       					onkeydown={(event) => {

     

       80
       -
       						if (event.key === 'Enter') doPost();

     

       81
       -
       					}}

     

       82
       -
       					type="text"

     

       83
       -
       					placeholder="what's on your mind?"

     

       84
       -
       					class="placeholder-opacity-50 flex-1 rounded-sm border-2 px-3 py-2 text-sm font-medium transition-all focus:scale-[1.01] focus:shadow-lg focus:outline-none"

     

       85
       -
       					style="background: {theme.bg}66; border-color: {theme.accent}44; color: {theme.fg};"

     

       86
       -
       				/>

     

       87
       -
       				<button

     

       88
       -
       					onclick={doPost}

     

       89
       -
       					class="rounded-sm border-none px-5 py-2 text-sm font-bold transition-all hover:scale-105 hover:shadow-xl"

     

       90
       -
       					style="background: linear-gradient(120deg, {theme.accent}c0, {theme.accent2}c0); color: {theme.fg}f0;"

     

       91
        
       				>

     

       92
       -
       					post

     

       93
       -
       				</button>

     

       94
       -
       			</div>

     

       95
       -
       		{/if}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       96
        
       	</div>

     

       97
        
       </div>

···

       45
        
       

     

       46
        
       	let postText = $state('');

     

       47
        
       	let info = $state('');

     

       48
       +
       	let isFocused = $state(false);

     

       49
       +
       	let textareaEl: HTMLTextAreaElement | undefined = $state();

     

       50
        
       

     

       51
        
       	const doPost = () => {

     

       52
       +
       		if (postText.length === 0 || postText.length > 300) return;

     

       53
       +
       

     

       54
        
       		post(postText).then((res) => {

     

       55
        
       			if (res.ok) {

     

       56
        
       				onPostSent(res.value.uri, res.value.record);

     
···

       62
        
       			}

     

       63
        
       		});

     

       64
        
       	};

     

       65
       +
       

     

       66
       +
       	$effect(() => {

     

       67
       +
       		if (isFocused && textareaEl) {

     

       68
       +
       			textareaEl.focus();

     

       69
       +
       		}

     

       70
       +
       	});

     

       71
        
       </script>

     

       72
        
       

     

       73
       +
       <div class="relative min-h-16">

     

       74
       +
       	<!-- Spacer to maintain layout when focused -->

     

       75
       +
       	{#if isFocused}

     

       76
       +
       		<div class="min-h-16"></div>

     

       77
       +
       	{/if}

     

       78
       +
       

     

       79
       +
       	<div

     

       80
       +
       		class="flex max-w-full rounded-sm border-2 shadow-lg backdrop-blur-lg transition-all duration-300"

     

       81
       +
       		class:min-h-16={!isFocused}

     

       82
       +
       		class:items-center={!isFocused}

     

       83
       +
       		class:shadow-2xl={isFocused}

     

       84
       +
       		class:absolute={isFocused}

     

       85
       +
       		class:top-0={isFocused}

     

       86
       +
       		class:left-0={isFocused}

     

       87
       +
       		class:right-0={isFocused}

     

       88
       +
       		class:z-50={isFocused}

     

       89
       +
       		style="background: {isFocused

     

       90
       +
       			? `${theme.bg}f0`

     

       91
       +
       			: `${theme.accent}18`}; border-color: {theme.accent}{isFocused ? '' : '66'};"

     

       92
       +
       	>

     

       93
       +
       		<div class="w-full p-2" class:py-3={isFocused}>

     

       94
       +
       			{#if info.length > 0}

     

       95
       +
       				<div

     

       96
       +
       					class="rounded-sm px-3 py-1.5 text-center font-medium text-nowrap overflow-ellipsis"

     

       97
       +
       					style="background: {theme.accent}22; color: {theme.accent};"

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       98
        
       				>

     

       99
       +
       					{info}

     

       100
       +
       				</div>

     

       101
       +
       			{:else}

     

       102
       +
       				<div class="flex flex-col gap-2">

     

       103
       +
       					{#if isFocused}

     

       104
       +
       						<textarea

     

       105
       +
       							bind:this={textareaEl}

     

       106
       +
       							bind:value={postText}

     

       107
       +
       							onfocus={() => (isFocused = true)}

     

       108
       +
       							onblur={() => (isFocused = false)}

     

       109
       +
       							oninput={(e) => {

     

       110
       +
       								const target = e.currentTarget;

     

       111
       +
       								if (target.value.length > 300) {

     

       112
       +
       									target.value = target.value.slice(0, 300);

     

       113
       +
       									postText = target.value;

     

       114
       +
       								}

     

       115
       +
       							}}

     

       116
       +
       							onkeydown={(event) => {

     

       117
       +
       								if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {

     

       118
       +
       									doPost();

     

       119
       +
       								}

     

       120
       +
       							}}

     

       121
       +
       							placeholder="what's on your mind?"

     

       122
       +
       							rows="4"

     

       123
       +
       							class="placeholder-opacity-50 w-full resize-none rounded-sm border-2 px-3 py-2 text-sm font-medium transition-all focus:outline-none"

     

       124
       +
       							style="background: {theme.bg}66; border-color: {theme.accent}44; color: {theme.fg};"

     

       125
       +
       						></textarea>

     

       126
       +
       						<div class="flex items-center gap-2">

     

       127
       +
       							<div class="grow"></div>

     

       128
       +
       							<span

     

       129
       +
       								class="text-sm font-medium"

     

       130
       +
       								style="color: {postText.length > 300 ? '#ef4444' : theme.fg}88;"

     

       131
       +
       							>

     

       132
       +
       								{postText.length} / 300

     

       133
       +
       							</span>

     

       134
       +
       							<button

     

       135
       +
       								onclick={doPost}

     

       136
       +
       								disabled={postText.length === 0 || postText.length > 300}

     

       137
       +
       								class="rounded-sm border-none px-5 py-2 text-sm font-bold transition-all hover:scale-105 hover:shadow-xl disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100"

     

       138
       +
       								style="background: linear-gradient(120deg, {theme.accent}c0, {theme.accent2}c0); color: {theme.fg}f0;"

     

       139
       +
       							>

     

       140
       +
       								post

     

       141
       +
       							</button>

     

       142
       +
       						</div>

     

       143
       +
       					{:else}

     

       144
       +
       						<input

     

       145
       +
       							bind:value={postText}

     

       146
       +
       							onfocus={() => (isFocused = true)}

     

       147
       +
       							onkeydown={(event) => {

     

       148
       +
       								if (event.key === 'Enter') doPost();

     

       149
       +
       							}}

     

       150
       +
       							type="text"

     

       151
       +
       							placeholder="what's on your mind?"

     

       152
       +
       							class="placeholder-opacity-50 flex-1 rounded-sm border-2 px-3 py-2 text-sm font-medium transition-all focus:outline-none"

     

       153
       +
       							style="background: {theme.bg}66; border-color: {theme.accent}44; color: {theme.fg};"

     

       154
       +
       						/>

     

       155
       +
       					{/if}

     

       156
       +
       				</div>

     

       157
       +
       			{/if}

     

       158
       +
       		</div>

     

       159
        
       	</div>

     

       160
        
       </div>

src/routes/+page.svelte

···

       47
        
       		$accounts = $accounts.filter((acc) => acc.did !== did);

     

       48
        
       		clients.delete(did);

     

       49
        
       		posts.delete(did);

     

       0
        
       
     

       50
        
       	};

     

       51
        
       

     

       52
        
       	const handleLoginSucceed = async (did: Did, handle: Handle, password: string) => {

···

       47
        
       		$accounts = $accounts.filter((acc) => acc.did !== did);

     

       48
        
       		clients.delete(did);

     

       49
        
       		posts.delete(did);

     

       50
       +
       		selectedDid = $accounts[0]?.did;

     

       51
        
       	};

     

       52
        
       

     

       53
        
       	const handleLoginSucceed = async (did: Did, handle: Handle, password: string) => {