Initial Commit

2026-08-28 21:50:26 +10:00
commit d8d4ecbe8a
142 changed files with 25234 additions and 0 deletions
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import Avatar from '@/components/dredge/Avatar.vue';
+
+defineProps<{
+    handle: string;
+    role: string;
+}>();
+</script>
+
+<template>
+    <div class="sidebar__profile">
+        <Avatar size="lg" />
+        <div>
+            <span class="card__handle">{{ handle }}</span>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.sidebar__profile {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+.sidebar__profile > div {
+    display: flex;
+    flex-direction: column;
+}
+</style>
@@ -0,0 +1,54 @@
+<!-- Sidebar.vue -->
+<script setup lang="ts">
+import ProfileSummary from './ProfileSummary.vue';
+import SuggestionRow from './SuggestionRow.vue';
+
+const catches = [
+    { id: 1, tag: 'surface' },
+    { id: 2, tag: 'midwater' },
+    { id: 3, tag: 'trench' },
+    { id: 4, tag: 'vent' },
+    { id: 5, tag: 'benthic' },
+];
+
+function follow(id: number) {
+    console.log('follow', id);
+}
+</script>
+
+<template>
+    <aside class="sidebar">
+        <ProfileSummary handle="generictravelphotos" role="crew member" />
+
+
+    </aside>
+</template>
+
+<style scoped>
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 1.75rem;
+    position: sticky;
+    top: 5.5rem;
+}
+.sidebar__suggest {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+}
+.sidebar__suggest-title {
+    font-size: 0.75rem;
+    color: var(--haze);
+    text-transform: lowercase;
+    letter-spacing: 0.03em;
+}
+
+@media (max-width: 860px) {
+    .sidebar {
+        position: static;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+}
+</style>
@@ -0,0 +1,46 @@
+<!-- SuggestionRow.vue -->
+<script setup lang="ts">
+import Avatar from '@/components/dredge/Avatar.vue';
+
+defineProps<{
+    handle: string;
+    following?: boolean;
+}>();
+
+defineEmits<{
+    follow: [];
+}>();
+</script>
+
+<template>
+    <div class="sidebar__suggest-row">
+        <Avatar size="sm" />
+        <span class="card__handle">{{ handle }}</span>
+        <button class="follow-btn" @click="$emit('follow')">
+            {{ following ? 'following' : 'follow' }}
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.sidebar__suggest-row {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+.sidebar__suggest-row .card__handle {
+    flex: 1;
+    font-size: 0.8rem;
+}
+.follow-btn {
+    background: none;
+    border: none;
+    color: var(--bioluminum);
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+.follow-btn:hover {
+    text-decoration: underline;
+}
+</style>