an app to share curated trails sidetrail.app
atproto nextjs react rsc
50
fork

Configure Feed

Select the types of activity you want to include in your feed.

add insert stop before button

+30 -2
+17 -1
app/at/(trail)/[handle]/trail/[rkey]/TrailStop.css
··· 150 150 151 151 .TrailStop-insertButton { 152 152 position: absolute; 153 - top: calc(100% + 2rem); 154 153 left: 50%; 155 154 transform: translate(-50%, -50%); 156 155 z-index: 5; 156 + } 157 + 158 + .TrailStop-insertButton--before { 159 + top: -2rem; 160 + opacity: 0.3; 161 + transition: opacity 0.2s ease; 162 + } 163 + 164 + @media (hover: hover) { 165 + .TrailStop-insertButton--before:hover { 166 + opacity: 1; 167 + } 168 + } 169 + 170 + .TrailStop-insertButton--between, 171 + .TrailStop-insertButton--final { 172 + top: calc(100% + 2rem); 157 173 } 158 174 159 175 /* Between-stops buttons are subtle by default, show fully on hover */
+13 -1
app/at/(trail)/[handle]/trail/[rkey]/TrailStop.tsx
··· 135 135 </div> 136 136 )} 137 137 138 - {/* Insert stop button - appears after current step only, and only if less than 12 steps */} 138 + {isEditing && editContext && isCurrent && index > 0 && totalStops < 12 && ( 139 + <div className="TrailStop-insertButton TrailStop-insertButton--before"> 140 + <AddButton 141 + onClick={(e) => { 142 + e.stopPropagation(); 143 + editContext.addStop(index - 1); 144 + handleGoToStop(index); 145 + }} 146 + title="insert stop before" 147 + /> 148 + </div> 149 + )} 150 + 139 151 {isEditing && 140 152 editContext && 141 153 (isCurrent ||