Fixed some UI issues and routing issues

app/(tabs)/_layout.tsx

@@ -1,9 +1,8 @@
 import { supabase } from "@/lib/supabase";
 import { Session } from "@supabase/supabase-js";
-import { Tabs } from "expo-router";
+import { Redirect, Tabs } from "expo-router";
 import { useEffect, useState } from "react";
 
-
 export default function TabLayout() {
   const [session, SetSession] = useState<Session | null>(null)
   const [loading, SetLoading] = useState(true);
@@ -28,9 +27,9 @@ export default function TabLayout() {
     return null;
   }
 
-//    if (!session) {
-//      return <Redirect href="/createUser" />;
-//    }
+  if (!session) {
+    return <Redirect href="/createUser" />;
+  }
 
   return (
     <Tabs>
@@ -38,6 +37,19 @@ export default function TabLayout() {
       <Tabs.Screen name="tasks" options={{title: "Tasks"}} />
       <Tabs.Screen name="assignments" options={{title: "Assignments"}} />
       <Tabs.Screen name="subjects" options={{title: "Subjects"}} />
+      <Tabs.Screen name="timer" options={{title: "Timer"}} />
+
+      <Tabs.Screen name="subject/createSubject" options={{ href: null }} />
+      <Tabs.Screen name="subject/editSubject" options={{ href: null }} />
+      <Tabs.Screen name="subject/viewDetailsSubject" options={{ href: null }} />
+
+      <Tabs.Screen name="assignment/createAssignment" options={{ href: null }} />
+      <Tabs.Screen name="assignment/editAssignment" options={{ href: null }} />
+      <Tabs.Screen name="assignment/viewDetailsAssignment" options={{ href: null }} />
+
+      <Tabs.Screen name="task/createTask" options={{ href: null }} />
+      <Tabs.Screen name="task/editTask" options={{ href: null }} />
+      <Tabs.Screen name="task/viewDetailsTask" options={{ href: null }} />
     </Tabs>
   );
 }

app/(tabs)/timer.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import {
+  Animated,
+  Dimensions,
+  StatusBar,
+  StyleSheet,
+  TouchableOpacity,
+  View
+} from 'react-native';
+const { width, height } = Dimensions.get('window');
+
+const colors = {
+  black: '#323F4E',
+  red: '#F76A6A',
+  text: '#ffffff',
+};
+
+const timers = [...Array(13).keys()].map((i) => (i === 0 ? 1 : i * 5));
+const ITEM_SIZE = width * 0.38;
+const ITEM_SPACING = (width - ITEM_SIZE) / 2;
+
+/*
+Har bare skrevet timeren som en egen tab til å begynne med.
+Planen er at når bruker starter en task så vil de få opp denne timeren
+som viser TaskName og Description der tallene står nå
+Kanskje en animert figur hvis vi får tid
+*/ 
+export default function App() {
+    const scrollX = React.useRef(new Animated.Value(0)).current;
+    const [duration, setDuration] = React.useState(timers[0])
+    const timerAnimation = React.useRef(new Animated.Value(height)).current
+    const buttonAnimation = React.useRef(new Animated.Value(0)).current
+    const animation = React.useCallback(() => {
+        Animated.sequence([
+            Animated.timing(buttonAnimation, {
+                toValue: 1,
+                duration: 300,
+                useNativeDriver: true
+            }),
+            Animated.timing(timerAnimation, {
+                toValue: 0,
+                duration: 300,
+                useNativeDriver: true
+            }),
+            Animated.timing(timerAnimation, {
+                toValue: height,
+                duration: duration * 1000,
+                useNativeDriver: true
+            }),
+        ]) .start(() => {
+            Animated.timing(buttonAnimation, {
+                toValue: 0,
+                duration: 300,
+                useNativeDriver: true
+            }).start()
+        })
+    }, [duration])
+
+    const opacity = buttonAnimation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [1, 0]
+    })
+    const translateY = buttonAnimation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 200]
+    })
+        
+  return (
+    <View style={styles.container}>
+      <StatusBar hidden />
+      <Animated.View 
+      style={[StyleSheet.absoluteFillObject, {
+        height,
+        width,
+        backgroundColor: colors.red,
+        transform: [{
+            translateY: timerAnimation
+        }]
+      }]}
+      />
+      <Animated.View
+        style={[
+          StyleSheet.absoluteFillObject,
+          {
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            paddingBottom: 100,
+            opacity,
+            transform: [{
+                translateY
+            }]
+          },
+        ]}>
+        <TouchableOpacity
+          onPress={animation}>
+          <View
+            style={styles.roundButton}
+          />
+        </TouchableOpacity>
+      </Animated.View>
+      <View
+        style={{
+          position: 'absolute',
+          top: height / 3,
+          left: 0,
+          right: 0,
+          flex: 1,
+        }}>
+          <Animated.FlatList
+          data={timers}
+          keyExtractor={item => item.toString()}
+          horizontal
+          bounces={false}
+          onScroll={Animated.event(
+            [{nativeEvent: {contentOffset: {x: scrollX}}}],
+            { useNativeDriver: true}
+          )}
+          showsHorizontalScrollIndicator={false}
+          onMomentumScrollEnd={ev => {
+            const index = Math.round(ev.nativeEvent.contentOffset.x / ITEM_SIZE)
+            setDuration(timers[index]);
+          }}
+          snapToInterval={ITEM_SIZE}
+          decelerationRate={"fast"}
+          style={{flexGrow: 0}}
+          contentContainerStyle={{
+            paddingHorizontal: ITEM_SPACING
+          }}
+          renderItem={({item, index}) => {
+            const inputRange = [
+                (index - 1) * ITEM_SIZE,
+                index * ITEM_SIZE,
+                (index + 1) * ITEM_SIZE,
+            ]
+
+            const opacity = scrollX.interpolate({
+                inputRange,
+                outputRange: [.4, 1, .4]
+            })
+            const scale = scrollX.interpolate({
+                inputRange,
+                outputRange: [.7, 1, .7]
+            })
+            return <View style={{width: ITEM_SIZE, justifyContent: 'center', alignItems: 'center'}}>
+                <Animated.Text style={[styles.text, {
+                    opacity,
+                    transform: [{
+                        scale
+                    }]
+
+                }]}>
+                    {item}
+                </Animated.Text>
+              </View>
+            }
+          }
+          />
+        </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.black,
+  },
+  roundButton: {
+    width: 80,
+    height: 80,
+    borderRadius: 80,
+    backgroundColor: colors.red,
+  },
+  text: {
+    fontSize: ITEM_SIZE * 0.8,
+    fontFamily: 'Menlo',
+    color: colors.text,
+    fontWeight: '900',
+  }
+});

tsconfig.json

@@ -2,10 +2,9 @@
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "strict": true,
+    "jsx": "react-native",
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     }
   },
   "include": [