Initial Commit

2026-08-28 21:50:26 +10:00
commit d8d4ecbe8a
142 changed files with 25234 additions and 0 deletions
@@ -0,0 +1,111 @@
+<!-- StoryRing.vue -->
+<script setup lang="ts">
+import { proxyImage } from '@/lib/proxyImage';
+
+const props = defineProps<{
+    username: string;
+    profilePicUrl: string | null;
+    isUnread: boolean;
+    muted: boolean;
+}>();
+
+defineEmits<{
+    select: [];
+}>();
+</script>
+
+<template>
+    <button
+        class="rail__item"
+        :class="{ 'rail__item--muted': muted }"
+        @click="$emit('select')"
+        :aria-label="`${username}'s story, ${isUnread ? 'unread' : 'already viewed'}${muted ? ', muted' : ''}`"
+    >
+        <span
+            class="rail__ring"
+            :class="isUnread ? 'rail__ring--unread' : 'rail__ring--seen'"
+        >
+            <img
+                v-if="profilePicUrl"
+                :src="proxyImage(profilePicUrl)"
+                :alt="''"
+                class="rail__thumb-img"
+                loading="lazy"
+            />
+            <span v-else class="rail__thumb" />
+        </span>
+        <span class="rail__label">{{ username }}</span>
+    </button>
+</template>
+
+<style scoped>
+.rail__item--muted .rail__ring{
+    opacity: 0.26;
+}
+
+.rail__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.4rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--haze);
+    flex-shrink: 0; /* add — keeps rings from squashing, forces scroll instead */
+}
+
+.rail__ring {
+    width: 4rem;
+    height: 4rem;
+    border-radius: 999px;
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+}
+
+@media (max-width: 480px) {
+    .rail__ring {
+        width: 5rem;
+        height: 5rem;
+    }
+    .rail__thumb {
+        width: 4.35rem;
+        height: 4.35rem;
+    }
+    .rail__label {
+        font-size: 0.75rem;
+        max-width: 5.2rem;
+    }
+}
+
+.rail__ring--unread {
+    border: 1.5px solid var(--bioluminum);
+    box-shadow: 0 0 10px -2px var(--bioluminum);
+}
+.rail__ring--seen {
+    border: 1.5px solid var(--line);
+    box-shadow: none;
+}
+.rail__thumb-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 999px;
+}
+.rail__thumb {
+    width: 3.35rem;
+    height: 3.35rem;
+    border-radius: 999px;
+    background: radial-gradient(circle at 35% 30%, #1d3644, var(--midwater));
+}
+.rail__label {
+    font-size: 0.7rem;
+    letter-spacing: 0.03em;
+    text-transform: lowercase;
+    max-width: 4.2rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+</style>